Skip to content

Commit e29dfa4

Browse files
fullstackNRJfullstackNRJ
committed
day 15
1 parent 6a01db7 commit e29dfa4

File tree

6 files changed

+268
-1
lines changed

6 files changed

+268
-1
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
3030
| [Day 11](./each%20day%20build%20day!/Day%11/) | [Drag & Drop File Upload](./each%20day%20build%20day!/Day%2011/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2011/README.md/) |
3131
| [Day 12](./each%20day%20build%20day!/Day%12/) | [Multi select checkboxes](./each%20day%20build%20day!/Day%2012/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2012/README.md/) |
3232
| [Day 13](./each%20day%20build%20day!/Day%13/) | [Custom video player](./each%20day%20build%20day!/Day%2013/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2013/README.md/) |
33-
| [Day 14](./each%20day%20build%20day!/Day%14/) | [Key sequence detection](./each%20day%20build%20day!/Day%2014/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2014/README.md/) |
33+
| [Day 14](./each%20day%20build%20day!/Day%14/) | [Key sequence detection](./each%20day%20build%20day!/Day%2014/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2014/README.md/) |
34+
| [Day 15](./each%20day%20build%20day!/Day%15/) | [Scrolling IN effects](./each%20day%20build%20day!/Day%2015/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2015/README.md/) |

‎each day build day!/Day 15/README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Slide in on Scroll
2+
3+
Cool animation effect where images slides in from left and right side after the user scrolls to particular image on the page. This is built using html, css and js.
4+
5+
6+
# Challenges
7+
- scroll event
8+
- debounce function like lodash
9+
- css3 translate properties
10+
- window scrollY, innerHeight
11+
- image offset, height
12+
- closures
13+
14+
# demo
15+
![scrolling demo](scrolldemo(1).gif)

‎each day build day!/Day 15/index.html

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Slide In with Scroll 📜 </title>
8+
<link rel="stylesheet" href="style.css">
9+
<script defer src="main.js"></script>
10+
</head>
11+
12+
<body>
13+
<div class="site-wrap">
14+
<h1>Slide in on Scroll</h1>
15+
16+
<p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum
17+
delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas
18+
laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
19+
<p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in
20+
reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur
21+
fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
22+
<p>Adipisicing elit. Tempore tempora rerum..</p>
23+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
24+
corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
25+
omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
26+
esse magni, ut, dignissimos.</p>
27+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
28+
corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
29+
omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
30+
esse magni, ut, dignissimos.</p>
31+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
32+
corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
33+
omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
34+
esse magni, ut, dignissimos.</p>
35+
36+
<img src="http://unsplash.it/400/400" class="align-left slide-in">
37+
38+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis
39+
tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error
40+
molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus
41+
voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis
42+
reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam,
43+
eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa,
44+
dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut
45+
doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
46+
47+
<img src="http://unsplash.it/400/401" class="align-right slide-in">
48+
49+
<p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error
50+
quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta
51+
consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas
52+
consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui
53+
aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum,
54+
officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam
55+
doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga
56+
culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam
57+
beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus
58+
dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit
59+
repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut
60+
excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident
61+
omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit!
62+
Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur,
63+
corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi
64+
eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque
65+
suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis
66+
id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse
67+
aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam
68+
enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint
69+
eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni.
70+
Eum amet autem dolor ullam.</p>
71+
72+
<img src="http://unsplash.it/200/500" class="align-left slide-in">
73+
74+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae
75+
dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
76+
voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img
77+
src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis.
78+
Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis
79+
eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio,
80+
eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus
81+
atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos
82+
necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt
83+
labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit
84+
itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem
85+
blanditiis</p>
86+
87+
88+
<p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum
89+
reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda
90+
natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste?
91+
Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum
92+
aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam
93+
suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita
94+
distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur
95+
fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio
96+
molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas
97+
odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit
98+
excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut!
99+
Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
100+
101+
<img src="http://unsplash.it/400/400" class="align-right slide-in">
102+
103+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae
104+
dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
105+
voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus
106+
facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium
107+
blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos
108+
distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur
109+
possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque
110+
dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis.
111+
Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum
112+
fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.
113+
Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi.
114+
Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in
115+
nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui
116+
inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis,
117+
tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas
118+
sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam
119+
quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos
120+
nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis
121+
necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo,
122+
ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae
123+
neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet!
124+
Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
125+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae
126+
dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
127+
voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus
128+
facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium
129+
blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos
130+
distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur
131+
possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque
132+
dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis.
133+
Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum
134+
fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.
135+
Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi.
136+
Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in
137+
nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui
138+
inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis,
139+
tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas
140+
sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam
141+
quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos
142+
nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis
143+
necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo,
144+
ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae
145+
neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet!
146+
Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
147+
148+
149+
150+
151+
</div>
152+
153+
154+
</body>
155+
156+
</html>

‎each day build day!/Day 15/main.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const sliderImages = document.querySelectorAll('.slide-in');
2+
3+
//debounce function to controll the triggering of scroll event
4+
function debounce(func, wait = 20, immediate = true) {
5+
var timeout;
6+
return function() {
7+
var context = this, args = arguments;
8+
var later = function() {
9+
timeout = null;
10+
if (!immediate) func.apply(context, args);
11+
};
12+
var callNow = immediate && !timeout;
13+
clearTimeout(timeout);
14+
timeout = setTimeout(later, wait);
15+
if (callNow) func.apply(context, args);
16+
};
17+
};
18+
19+
function checkSlide(){
20+
sliderImages.forEach(sliderImage => {
21+
// half way through the image
22+
23+
const slideInAt = (window.scrollY + window.innerHeight); // full window width
24+
// bottom of the image
25+
const imageBottom = sliderImage.offsetTop + sliderImage.height;
26+
//condition for rendering image
27+
const isShown = slideInAt > sliderImage.offsetTop;
28+
const isNotScrolledPast = window.scrollY < imageBottom;
29+
30+
//apply css class now
31+
if (isShown && isNotScrolledPast) {
32+
sliderImage.classList.add('active');
33+
} else {
34+
sliderImage.classList.remove('active');
35+
}
36+
37+
})
38+
}
39+
40+
window.addEventListener('scroll', debounce(checkSlide));

‎each day build day!/Day 15/scrolldemo(1).gif

16.4 MB
Loading

‎each day build day!/Day 15/style.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
html {
2+
box-sizing: border-box;
3+
background: #292928;
4+
font-family: 'helvetica neue';
5+
font-size: 20px;
6+
font-weight: 200;
7+
}
8+
9+
body {
10+
margin: 0;
11+
}
12+
13+
*, *:before, *:after {
14+
box-sizing: inherit;
15+
}
16+
17+
h1 {
18+
margin-top: 0;
19+
}
20+
21+
.site-wrap {
22+
max-width: 700px;
23+
margin: 100px auto;
24+
background: rgb(241, 230, 230);
25+
padding: 40px;
26+
text-align: justify;
27+
}
28+
29+
.align-left {
30+
float: left;
31+
margin-right: 20px;
32+
}
33+
34+
.align-right {
35+
float: right;
36+
margin-left: 20px;
37+
}
38+
39+
.slide-in {
40+
opacity: 0;
41+
transition: all .3s;
42+
}
43+
44+
.align-left.slide-in {
45+
transform: translateX(-30%) scale(0.95);
46+
}
47+
48+
.align-right.slide-in {
49+
transform: translateX(30%) scale(0.95);
50+
}
51+
52+
.slide-in.active {
53+
opacity: 1;
54+
transform: translateX(0%) scale(1);
55+
}

0 commit comments

Comments
 (0)