Skip to content

Commit 3cd131b

Browse files
drainbadenergydrainbadenergy
authored
Create Parralax.html
1 parent 5e50fc9 commit 3cd131b

File tree

1 file changed

+181
-0
lines changed

1 file changed

+181
-0
lines changed

‎Parallax Effect Scroll/Parralax.html

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
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>Parallax Scrolling Example</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<nav>
14+
<ul>
15+
<li><a href="#home">Home</a></li>
16+
<li><a href="#about">About</a></li>
17+
<li><a href="#services">Services</a></li>
18+
<li><a href="#contact">Contact</a></li>
19+
</ul>
20+
</nav>
21+
22+
<!-- Parallax Section -->
23+
<section class="parallax-section">
24+
<div class="parallax-background"></div>
25+
<div class="content">
26+
<Br><br>
27+
<h1>Parallax Scrolling Effect</h1>
28+
<p>Scroll down to see the parallax effect in action!</p>
29+
</div>
30+
</section>
31+
32+
<!-- Other Content -->
33+
<section class="regular-section">
34+
<h2>Other Section</h2>
35+
<p>This is a regular section of the page. Add more content here to make the page scrollable.</p>
36+
</section>
37+
38+
<footer>
39+
<p>Visit our other pages:</p>
40+
<ul>
41+
<li><a href="#page1">Page 1</a></li>
42+
<li><a href="#page2">Page 2</a></li>
43+
<li><a href="#page3">Page 3</a></li>
44+
</ul>
45+
</footer>
46+
47+
</body>
48+
<style>
49+
nav {
50+
position: fixed;
51+
top: 0;
52+
width: 100%;
53+
background-color: #333;
54+
z-index: 100;
55+
}
56+
57+
nav ul {
58+
list-style-type: none;
59+
padding: 10px;
60+
text-align: center;
61+
}
62+
63+
nav ul li {
64+
display: inline;
65+
margin: 0 15px;
66+
}
67+
68+
nav ul li a {
69+
color: white;
70+
text-decoration: none;
71+
font-size: 16px;
72+
}
73+
74+
nav ul li a:hover {
75+
text-decoration: underline;
76+
}
77+
78+
/* General Reset */
79+
* {
80+
margin: 0;
81+
padding: 0;
82+
box-sizing: border-box;
83+
}
84+
85+
body {
86+
font-family: Arial, sans-serif;
87+
line-height: 1.6;
88+
}
89+
90+
/* Parallax Section */
91+
.parallax-section {
92+
position: relative;
93+
height: 100vh;
94+
/* Full viewport height */
95+
overflow: hidden;
96+
}
97+
98+
.parallax-background {
99+
background-image: url(mountain-lake-forest-nature-scenery-4k-wallpaper-uhdpaper.com-135@[email protected]);
100+
/* Replace with your image URL */
101+
position: absolute;
102+
top: 0;
103+
left: 0;
104+
width: 100%;
105+
height: 100%;
106+
background-attachment: fixed;
107+
background-size: cover;
108+
background-position: center;
109+
z-index: -1;
110+
/* Send the background behind the content */
111+
}
112+
113+
.content {
114+
position: relative;
115+
text-align: center;
116+
color: white;
117+
z-index: 1;
118+
padding: 20px;
119+
}
120+
121+
.content h1 {
122+
font-size: 4rem;
123+
}
124+
125+
.content p {
126+
font-size: 1.5rem;
127+
}
128+
129+
/* Regular Section */
130+
.regular-section {
131+
padding: 100px 20px;
132+
background-color: #f4f4f4;
133+
}
134+
135+
.regular-section h2 {
136+
font-size: 2rem;
137+
}
138+
139+
.regular-section p {
140+
font-size: 1.25rem;
141+
}
142+
143+
/* Responsive Design */
144+
@media (max-width: 768px) {
145+
.content h1 {
146+
font-size: 2.5rem;
147+
}
148+
149+
.content p {
150+
font-size: 1.2rem;
151+
}
152+
}
153+
154+
footer {
155+
background-color: #333;
156+
color: white;
157+
padding: 20px;
158+
text-align: center;
159+
}
160+
161+
footer ul {
162+
list-style-type: none;
163+
padding: 0;
164+
}
165+
166+
footer ul li {
167+
display: inline;
168+
margin: 0 10px;
169+
}
170+
171+
footer ul li a {
172+
color: white;
173+
text-decoration: none;
174+
}
175+
176+
footer ul li a:hover {
177+
text-decoration: underline;
178+
}
179+
</style>
180+
181+
</html>

0 commit comments

Comments
 (0)