Skip to content

Commit bcb3367

Browse files
Durgesh-VaigandlaDurgesh-Vaigandla
authored
Merge pull request #519 from Saipradyumnagoud/main
Added How To Create a Parallax Website
2 parents c12c4d1 + fac2777 commit bcb3367

File tree

3 files changed

+11340
-0
lines changed

3 files changed

+11340
-0
lines changed

‎Web Development/How-To-Create-Parallax-Website/index.html

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="description" content="Learn how to create a parallax website, including setting up a project, configuring the parallax effect, and using CSS and JavaScript." />
7+
<meta name="keywords" content="Parallax, Web design, CSS, JavaScript, Frontend development, Animation, Scrolling effects, Web development, Tutorials, UI/UX" />
8+
<title>Creating a Parallax Website: Step-by-Step Guide</title>
9+
<meta name="vaishali-sharma-20" content="CSEdge" />
10+
<!-- Favicon-->
11+
<link rel="icon" type="image/x-icon" href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
12+
<!-- Core theme CSS (includes Bootstrap)-->
13+
<link rel="stylesheet" href="../main.css">
14+
<link rel="stylesheet" href="../styles.css">
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
16+
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
17+
</head>
18+
19+
<body>
20+
<!-- Responsive navbar-->
21+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
22+
<div class="container">
23+
<img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
24+
<a class="navbar-brand" href="./index.html">CSEdge Learn</a>
25+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
26+
<span class="navbar-toggler-icon"></span>
27+
</button>
28+
29+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
30+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 flex">
31+
<li class="nav-item me-2">
32+
<a class="nav-link" href="https://csedge.courses"><i class="fa-solid fa-house"></i> Home</a>
33+
</li>
34+
<li class="nav-item me-2">
35+
<a class="nav-link" href="https://csedge.courses/about"> <i class="fa-solid fa-circle-info"></i> About</a>
36+
</li>
37+
<li class="nav-item me-2">
38+
<a class="nav-link" href="https://csedge.courses#contact"><i class="fa-solid fa-phone"></i> Contact</a>
39+
</li>
40+
<li class="nav-item me-2">
41+
<a class="nav-link active" aria-current="page" href="#!"><i class="fa-solid fa-blog"></i> Blog</a>
42+
</li>
43+
</ul>
44+
</div>
45+
</div>
46+
</nav>
47+
48+
<!--Page Content-->
49+
50+
<div class="container mt-5">
51+
<div class="row">
52+
<!-- Blog entries-->
53+
<div class="col-lg-8 py-6">
54+
<h1 class="pt-5">Creating a Parallax Website: Step-by-Step Guide</h1>
55+
<!-- Featured blog post-->
56+
<div class="card mb-4">
57+
<div class="card-body">
58+
<main class="container">
59+
<section>
60+
<p>A parallax website creates a dynamic and visually engaging experience by making background images move slower than the foreground content as you scroll. This effect adds depth and an interactive feel to your site. In this guide, we'll walk you through the process of creating a parallax website from scratch.</p>
61+
</section>
62+
<section>
63+
<h3>What is a Parallax Website?</h3>
64+
<p>A parallax website uses a scrolling effect where background images move slower than the content in the foreground, creating an illusion of depth and immersion. This technique is often used in modern web design to make websites more visually appealing and engaging.</p>
65+
<h4>Benefits of Using Parallax Effect</h4>
66+
<ul>
67+
<li><b>Visual Appeal:</b> Parallax scrolling adds a dynamic visual element that makes your website stand out.</li>
68+
<li><b>Engagement:</b> The interactive nature of parallax effects can keep visitors engaged for longer periods.</li>
69+
<li><b>Storytelling:</b> Parallax scrolling can be used to guide users through a narrative or story as they scroll down the page.</li>
70+
<li><b>Modern Design:</b> Using parallax effects can give your website a modern and cutting-edge look.</li>
71+
</ul>
72+
</section>
73+
<section>
74+
<h3>How to Create a Parallax Website</h3>
75+
<p>Creating a parallax website involves using HTML, CSS, and JavaScript. Follow these steps:</p>
76+
<ol>
77+
<li>Set up your HTML structure:</li>
78+
<pre><code>&lt;!DOCTYPE html&gt;
79+
&lt;html lang="en"&gt;
80+
&lt;head&gt;
81+
&lt;meta charset="UTF-8"&gt;
82+
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
83+
&lt;title&gt;Parallax Website&lt;/title&gt;
84+
&lt;link rel="stylesheet" href="styles.css"&gt;
85+
&lt;/head&gt;
86+
&lt;body&gt;
87+
&lt;div class="parallax"&gt;&lt;/div&gt;
88+
&lt;div class="content"&gt;
89+
&lt;h1&gt;Welcome to My Parallax Website&lt;/h1&gt;
90+
&lt;p&gt;This is an example of a parallax website.&lt;/p&gt;
91+
&lt;/div&gt;
92+
&lt;/body&gt;
93+
&lt;/html&gt;</code></pre>
94+
<li>Apply CSS for the parallax effect:</li>
95+
<pre><code>body, html {
96+
margin: 0;
97+
padding: 0;
98+
font-family: Arial, sans-serif;
99+
}
100+
101+
.parallax {
102+
background-image: url('background.jpg');
103+
height: 100vh;
104+
background-attachment: fixed;
105+
background-position: center;
106+
background-repeat: no-repeat;
107+
background-size: cover;
108+
}
109+
110+
.content {
111+
text-align: center;
112+
padding: 50px;
113+
}</code></pre>
114+
<li>Add JavaScript (optional for more complex effects):</li>
115+
<pre><code>window.addEventListener('scroll', function() {
116+
let parallax = document.querySelector('.parallax');
117+
let scrollPosition = window.pageYOffset;
118+
parallax.style.backgroundPositionY = scrollPosition * 0.5 + 'px';
119+
});</code></pre>
120+
<li>Test your parallax website to ensure the effect works as expected.</li>
121+
</ol>
122+
<p>By following these steps, you can create a stunning parallax website that will impress your visitors and provide a unique browsing experience.</p>
123+
</section>
124+
</main>
125+
</div>
126+
</div>
127+
</div>
128+
<!-- Side widgets-->
129+
<div class="col-lg-4 pt-5">
130+
<!-- Search widget-->
131+
<div class="card mb-4">
132+
<div class="card-header">Search</div>
133+
<div class="card-body">
134+
<div class="input-group">
135+
<input class="form-control" type="text" id="searchInput" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" />
136+
<button class="btn btn-primary" id="button-search" type="button" onclick="search()">
137+
Go!
138+
</button>
139+
</div>
140+
</div>
141+
<!-- Search Results -->
142+
<div id="searchResults"></div>
143+
</div>
144+
<!-- Categories widget-->
145+
<div class="card mb-4">
146+
<div class="card-header">Categories</div>
147+
<div class="card-body">
148+
<div class="row">
149+
<div class="col-sm-6">
150+
<ul class="list-unstyled mb-0">
151+
<li><a href="#!">Web Design</a></li>
152+
<li><a href="#!">HTML</a></li>
153+
<li><a href="#!">Freebies</a></li>
154+
</ul>
155+
</div>
156+
<div class="col-sm-6">
157+
<ul class="list-unstyled mb-0">
158+
<li><a href="#!">JavaScript</a></li>
159+
<li><a href="#!">CSS</a></li>
160+
<li><a href="#!">Tutorials</a></li>
161+
</ul>
162+
</div>
163+
</div>
164+
</div>
165+
</div>
166+
<!-- Side widget-->
167+
<div class="card mb-4">
168+
<div class="card-header">Recent Posts</div>
169+
<div class="card-body">
170+
<p>Coming Soon..!</p>
171+
</div>
172+
</div>
173+
<div class="card mb-4">
174+
<div class="card-body">
175+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409" crossorigin="anonymous"></script>
176+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409" data-ad-slot="9866674087"></ins>
177+
<script>
178+
(adsbygoogle = window.adsbygoogle || []).push({});
179+
</script>
180+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409" crossorigin="anonymous"></script>
181+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409" data-ad-slot="9866674087"></ins>
182+
<script>
183+
(adsbygoogle = window.adsbygoogle || []).push({});
184+
</script>
185+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409" crossorigin="anonymous"></script>
186+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409" data-ad-slot="9866674087"></ins>
187+
<script>
188+
(adsbygoogle = window.adsbygoogle || []).push({});
189+
</script>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
</div>
195+
<!-- Footer-->
196+
<footer class="py-5 bg-dark">
197+
<div class="container">
198+
<p class="m-0 text-center text-white">
199+
Copyright &copy CSEdge Learn 2024
200+
</p>
201+
</div>
202+
</footer>
203+
<!-- Bootstrap core JS-->
204+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
205+
<!-- Core theme JS-->
206+
</div>
207+
</body>
208+
209+
</html>

‎Web Development/main.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
2+
Remove default hyperlink style
3+
a {
4+
text-decoration: none;
5+
color: inherit;
6+
}
7+
8+
/* Footer CSS */
9+
.site-footer {
10+
background-color: #f5f5f5;
11+
padding: 30px 0;
12+
}
13+
14+
.site-footer h6 {
15+
font-size: 18px;
16+
margin-bottom: 15px;
17+
}
18+
19+
.site-footer ul {
20+
list-style: none;
21+
padding: 0;
22+
}
23+
24+
.site-footer li {
25+
margin-bottom: 10px;
26+
}
27+
28+
.site-footer a {
29+
color: #777;
30+
}
31+
32+
.site-footer a:hover {
33+
color: #333;
34+
}
35+
36+
.site-footer hr {
37+
margin: 20px 0;
38+
border-top: 1px solid #e5e5e5;
39+
}
40+
41+
.site-footer .copyright-text {
42+
font-size: 14px;
43+
text-align: center;
44+
margin-bottom: 0;
45+
}
46+
47+
48+
#goTopBtn {
49+
display: none;
50+
position: fixed;
51+
bottom: 20px;
52+
right: 30px;
53+
z-index: 99;
54+
border: none;
55+
outline: none;
56+
background-color: #555;
57+
color: white;
58+
cursor: pointer;
59+
padding: 15px;
60+
border-radius: 50%;
61+
font-size: 18px;
62+
63+
}
64+
65+
#goTopBtn:hover {
66+
background-color: #333;
67+
/* Darker shade on hover */
68+
}
69+
70+
#goTopBtn i {
71+
font-size: 24px;
72+
position: relative;
73+
left: 2px;
74+
/* Increase icon size for better visibility */
75+
}

0 commit comments

Comments
 (0)