Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e29dfa4

Browse files
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));
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)

AltStyle によって変換されたページ (->オリジナル) /