Skip to content

Commit fac2777

Browse files
SaipradyumnagoudSaipradyumnagoud
committed
Added article
1 parent e7db365 commit fac2777

File tree

8 files changed

+11329
-120
lines changed

8 files changed

+11329
-120
lines changed

‎Web Development/How-To-Create-Parallax-Website/images/section1.jpg

-9.21 KB
Binary file not shown.

‎Web Development/How-To-Create-Parallax-Website/images/section2.jpg

-6.31 KB
Binary file not shown.

‎Web Development/How-To-Create-Parallax-Website/images/section3.jpg

-14.9 KB
Binary file not shown.

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

Lines changed: 198 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,209 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>How-To-Create-Parallax-Website</title>
7-
<link rel="stylesheet" href="styles.css">
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>
817
</head>
18+
919
<body>
10-
<nav>
11-
<ul>
12-
<li><a href="#section1">Section 1</a></li>
13-
<li><a href="#section2">Section 2</a></li>
14-
<li><a href="#section3">Section 3</a></li>
15-
</ul>
16-
</nav>
17-
18-
<section id="section1" class="parallax" style="background-image: url('images/section1.jpg');">
19-
<div class="content">
20-
<h1>Section 1</h1>
21-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores explicabo quos corrupti rem consequuntur animi distinctio dolorem, eaque sequi nulla eius maxime repudiandae perferendis consectetur cupiditate minus quis fugiat!</p>
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>
2245
</div>
23-
</section>
24-
25-
<section id="section2" class="parallax" style="background-image: url('images/section2.jpg');">
26-
<div class="content">
27-
<h1>Section 2</h1>
28-
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit odit temporibus porro atque, eum fugit animi, quasi numquam at ipsum nihil accusamus optio alias aperiam cumque magni fuga quod! Eligendi?</p>
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>
29193
</div>
30-
</section>
31-
32-
<section id="section3" class="parallax" style="background-image: url('images/section3.jpg');">
33-
<div class="content">
34-
<h1>Section 3</h1>
35-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea omnis voluptatum at repellat! Reprehenderit sed optio vel minima vitae, fugit cumque at, quia facilis, provident quo quod corporis. Aperiam, laboriosam?</p>
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>
36201
</div>
37-
</section>
38-
39-
<script src="script.js"></script>
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>
40207
</body>
208+
41209
</html>

‎Web Development/How-To-Create-Parallax-Website/script.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎Web Development/How-To-Create-Parallax-Website/styles.css

Lines changed: 0 additions & 80 deletions
This file was deleted.

0 commit comments

Comments
 (0)