Skip to content

Commit f4a969e

Browse files
Shreekant-04Shreekant-04
committed
SlideIn scroll addded
1 parent 984ed49 commit f4a969e

File tree

9 files changed

+148
-0
lines changed

9 files changed

+148
-0
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,5 +138,9 @@
138138
<td><a href="Currency calculator">Currency calculator</a></td>
139139
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/Currency calculator/">Link</a></td>
140140
</tr>
141+
<td>26</td>
142+
<td><a href="slideinscroll">slidein on scroll</a></td>
143+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/slideinscroll/">Link</a></td>
144+
</tr>
141145
</tbody>
142146
</table>

‎index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,13 @@
195195
<a href="./Currency calculator/index.html" target="_blank">Link</a>
196196
</td>
197197
</tr>
198+
<tr>
199+
<td>26</td>
200+
<td>SlideIn on scroll</td>
201+
<td>
202+
<a href="./slideinscroll/index.html" target="_blank">Link</a>
203+
</td>
204+
</tr>
198205
</tbody>
199206
</table>
200207
</body>

‎slideinscroll/Style.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
5+
box-sizing: border-box;
6+
scroll-behavior: smooth;
7+
}
8+
nav {
9+
height: 8vmin;
10+
position: sticky;
11+
top: 0;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
gap: 5%;
16+
backdrop-filter: blur(10px);
17+
z-index: 9999;
18+
}
19+
20+
nav a {
21+
text-decoration: none;
22+
color: black;
23+
}
24+
main {
25+
height: 92vh;
26+
padding: 8vmin;
27+
width: 100%;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
gap: 5%;
32+
}
33+
#about,
34+
#contact,
35+
#services {
36+
height: 100vh;
37+
padding: 8vmin;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
gap: 5%;
42+
}
43+
img {
44+
height: 250px;
45+
transform: translate(-100px) scale(0.9);
46+
transition-duration: 0.75s;
47+
transition-delay: 0.2s;
48+
opacity: 0;
49+
}
50+
.active {
51+
transform: translate(0) scale(1);
52+
opacity: 1;
53+
}

‎slideinscroll/images/about.jpg

8.29 KB
Loading

‎slideinscroll/images/contact.jpg

20.3 KB
Loading

‎slideinscroll/images/home.jpg

2.19 MB
Loading

‎slideinscroll/images/services.jpg

13.5 KB
Loading

‎slideinscroll/index.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Slidein</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<nav>
11+
<a href="#">Home</a>
12+
<a href="#about">About</a>
13+
<a href="#contact">Contact</a>
14+
<a href="#services">services</a>
15+
<a href="#">user</a>
16+
</nav>
17+
<main>
18+
<img src="./images/home.jpg" alt="" srcset="" />
19+
<p>
20+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque sint
21+
libero iusto eaque voluptatibus placeat alias itaque nostrum nesciunt?
22+
Officiis facere dolorum ipsum enim debitis ducimus consectetur dolores
23+
quae atque. Recusandae ipsa minus, libero inventore deserunt magnam?
24+
Maxime similique commodi doloribus earum suscipit quam error, quo quasi,
25+
cumque animi quia qui, dolore nulla ratione ipsum ipsam deserunt ab modi
26+
laboriosam?
27+
</p>
28+
</main>
29+
<section id="about">
30+
<img src="./images/about.jpg" alt="image" />
31+
<p>
32+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum rem
33+
voluptatum ea repellendus quam quo! Magnam officiis, sed quis voluptas
34+
velit a tempore facere aliquam ipsa nostrum nemo vero eos. Repellat
35+
nostrum veritatis quod adipisci rem dolorem incidunt error temporibus
36+
cupiditate molestiae beatae nemo nam, neque exercitationem quam
37+
necessitatibus tempore cumque nulla quasi suscipit quae consectetur. Quo
38+
minima perspiciatis nihil.
39+
</p>
40+
</section>
41+
<section id="contact">
42+
<img src="./images/contact.jpg" alt="image" />
43+
<p>
44+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
45+
distinctio fugit voluptatibus modi! Reprehenderit earum, quaerat
46+
voluptas recusandae aliquam, iure quibusdam asperiores iste harum quo
47+
nemo delectus ipsa nulla facere. Tenetur, veniam? Ipsa accusamus velit
48+
nobis earum mollitia quasi quas asperiores impedit libero, similique
49+
sint iste animi officiis corporis, dolore ratione, iusto neque
50+
distinctio eaque recusandae rem. Eius, impedit provident!
51+
</p>
52+
</section>
53+
<section id="services">
54+
<img src="./images/services.jpg" alt="image" />
55+
<p>
56+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
57+
officiis dolorem, autem, consequatur ratione delectus repellat illo
58+
cumque quis accusamus quibusdam non labore voluptatibus nobis aperiam.
59+
Accusantium dolore culpa voluptas. Veritatis quasi eligendi natus at
60+
illo? Repellat voluptate perferendis aperiam sapiente provident, cum id
61+
unde dicta sed ullam beatae iste quae obcaecati eveniet! Nihil, sequi
62+
rem? Temporibus porro minus neque?
63+
</p>
64+
</section>
65+
<script src="script.js"></script>
66+
</body>
67+
</html>

‎slideinscroll/script.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const image = document.querySelectorAll("img");
2+
function slide() {
3+
image.forEach((el) => {
4+
const slideAt = window.scrollY + window.innerHeight + el.height /2;
5+
const imageBottom = el.offsetTop + el.height;
6+
const isHalfShown = slideAt > el.offsetTop;
7+
const isNotScrolledPast = window.scrollY < imageBottom;
8+
if (isHalfShown && isNotScrolledPast) {
9+
el.classList.add("active");
10+
} else {
11+
el.classList.remove("active");
12+
}
13+
});
14+
}
15+
16+
slide();
17+
window.addEventListener("scroll", slide);

0 commit comments

Comments
 (0)