Skip to content

Commit 5892adc

Browse files
daggerokdaggerok
committed
fixed some minor stuff, might need some additional work. (C) whatthecommit.com
1 parent 573ff49 commit 5892adc

File tree

5 files changed

+116
-7
lines changed

5 files changed

+116
-7
lines changed

‎README.adoc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ image::ui-principles.png[]
66

77
reference:
88

9+
- link:https://www.youtube.com/watch?v=6zGTxITQkN0&t=0s[YouTube: Super Lightweight Scroll Animations with Sal.js - 2.8kb!]
910
- link:https://en.parceljs.org/recipes.html#bootstrap-+-fontawesome[Parcel Bundler + Bootstrap 4 + Font Awesome]
1011
- link:https://github.com/parcel-bundler/parcel/issues/1080#issuecomment-584745016[Parcel Bundler copy static resources assets files]
1112
- link:https://daggerok.github.io/css-examples[Project reference documentation]

‎sal-super-lightweight-animation/src/app.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,9 @@ WebFont.load({
1111
import 'sal.js/dist/sal.css';
1212
import sal from 'sal.js';
1313

14-
sal();
14+
sal({
15+
threshold: 1,
16+
once: false,
17+
});
18+
19+
// see: https://www.youtube.com/watch?v=6zGTxITQkN0&t=0s

‎sal-super-lightweight-animation/src/index.html

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,63 @@
99
<title>sal.js -> Super lightweight animation!</title>
1010
</head>
1111
<body>
12+
1213
<section>
13-
<h1
14-
data-sal="slide-up"
15-
data-sal-delay="500"
16-
data-sal-duration="1000"
17-
data-sal-easing="ease-out-bounce"
18-
>Scroll me, baby!</h1>
14+
<h1 data-sal="slide-up"
15+
data-sal-delay="300"
16+
data-sal-duration="1200"
17+
data-sal-easing="ease-out-bounce">
18+
Scroll me, baby!
19+
<br/>
20+
Oh, yeah!
21+
</h1>
1922
</section>
23+
24+
<section>
25+
<div class="left"
26+
data-sal="slide-up"
27+
data-sal-delay="300"
28+
data-sal-duration="1200"
29+
data-sal-easing="ease-out-bounce">
30+
<h3>Look at me! Weee..</h3>
31+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eum inventore ipsa magni maxime. Ab.</p>
32+
</div>
33+
<div class="right"
34+
data-sal="slide-up"
35+
data-sal-delay="600"
36+
data-sal-duration="1200"
37+
data-sal-easing="ease-out-bounce">
38+
<img src="./swipe-down.png" alt="">
39+
</div>
40+
</section>
41+
42+
<section>
43+
<div class="one"
44+
data-sal="slide-down"
45+
data-sal-delay="300"
46+
data-sal-duration="1200"
47+
data-sal-easing="ease-out-bounce">
48+
<h3>Keep</h3>
49+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio.</p>
50+
</div>
51+
<div class="two"
52+
data-sal="slide-down"
53+
data-sal-delay="500"
54+
data-sal-duration="1200"
55+
data-sal-easing="ease-out-bounce">
56+
<h3>It</h3>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
58+
</div>
59+
<div class="three"
60+
data-sal="slide-down"
61+
data-sal-delay="700"
62+
data-sal-duration="1200"
63+
data-sal-easing="ease-out-bounce">
64+
<h3>Scrolling</h3>
65+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error.</p>
66+
</div>
67+
</section>
68+
2069
<script src="./app.js"></script>
2170
</body>
2271
</html>

‎sal-super-lightweight-animation/src/main.scss

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,59 @@
11
//@import '../node_modules/sal.js/dist/sal.css';
22

3+
body,
4+
html {
5+
margin: 0;
6+
height: 100vh;
7+
}
8+
39
body {
410
font-family: 'Roboto', sans-serif;
511
}
12+
13+
section {
14+
height: calc(100vh - 4em);
15+
padding: 4em;
16+
align-items: center;
17+
18+
h1 {
19+
font-size: 6em;
20+
text-transform: uppercase;
21+
line-height: .9em;
22+
}
23+
24+
&:nth-of-type(1) {
25+
background-color: #81816e;
26+
color: #c3c3c3;
27+
}
28+
29+
&:nth-of-type(2),
30+
&:nth-of-type(3) {
31+
position: relative;
32+
background-color: white;
33+
height: calc(75vh - 8em);
34+
color: gray;
35+
display: grid;
36+
grid-template-columns: repeat(2, 50%);
37+
38+
h3 {
39+
text-transform: uppercase;
40+
margin: 0;
41+
}
42+
43+
img {
44+
display: block;
45+
max-height: 10em;
46+
}
47+
}
48+
49+
&:nth-of-type(3) {
50+
background-color: beige;
51+
color: gray;
52+
display: grid;
53+
grid-template-columns: repeat(3, 33.3%);
54+
55+
p {
56+
width: 50%;
57+
}
58+
}
59+
}

‎sal-super-lightweight-animation/src/swipe-down.png

3.69 KB
Loading

0 commit comments

Comments
 (0)