-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (155 loc) · 8.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="assets/images/logo.svg" type="image/x-icon">
<link rel="stylesheet" href="static/css/style.css">
<title>Escalators Parallax</title>
</head>
<body>
<header class="header">
<a href="#" class="logo"><img src="assets/images/logo.svg" alt="Logo"></a>
<ul class="nav">
<li><a href="#about">About</a></li>
<li><a href="#credits">Credits</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<section class="home-section">
<img src="assets/images/woman01.svg" alt="First woman" id="first-woman">
<img src="assets/images/man01.svg" alt="First man" id="first-man">
<img src="assets/images/woman02.svg" alt="Second woman" id="second-woman">
<img src="assets/images/escalator.svg" alt="Escalator" id="escalator">
<img src="assets/images/man02.svg" alt="Second man" id="second-man">
</section>
<section class="about-section" id="about">
<h2>What is a parallax?</h2>
<p>
The parallax scrolling allows the user to perceive an impression of depth. The website appears as a 3D
animation that scrolls down the page. This operational concept is particularly well adapted to
storytelling,
as the reading of the contents is encouraged by the scrolling effects, animations and advertising
displays.
The parallax scrolling is also found in web design under the terms parallax website, scrolling website
or
parallax web design.
</p>
<p>
The term parallax scrolling is used to describe websites whose operating concept differs significantly
from
conventional navigation menus: websites with parallax scrolling are operated using the scroll function
of
the mouse. If the user scrolls through the website, the elements of the website move at different rates.
A
background image moves slowly, while images or graphic elements in the foreground move faster.
</p>
<h3>General information</h3>
<p>
Parallax Scrolling works with what is called parallax scrolling. When an observer moves parallel to two
objects, the objects appear to move at different speeds. The closer object seems to move faster, the one
further away slower. This effect of perceptual psychology gives the observer a particular impression of
depth, because the light reflections of the object near him are perceived more quickly by the retina.
The
human brain processes these stimuli in such a way that the space represented is perceived as if it were
in
3D.
</p>
<p>
The impact of parallax scrolling is important in geometry, astronomy, photography and metrology. In 2D
video
games, parallax is used to create depth and to give orientation to the player. In recent years, the
parallax
scrolling effect is also used in web design. The objective is to improve the registration of the
presented
information and to design the website in an interactive way. Users are then expected to remember the
range
of information based on the presentation and find the functionality of the website enjoyable (Joy of
use).
</p>
<h3>Functionality</h3>
<p>
Parallax scrolling can be created in different ways on websites. In general, background images and
visual
elements are inserted in the foreground so that the viewer can move through the landscape via the scroll
function. The global image or the visible area above the fold is the landmark - also called viewport -
for
the viewer: the website moves, so to speak, from this fixed landmark, while the individual elements move
more slowly and quickly. These movements are caused by Slides, Fade out, Fade in and fixed elements such
as
text or graphics loaded continuously via so-called HTML Reflow. The arrangement of the partly animated
elements on the parallax scroll leads to a dynamic display of the website contents: the user
"experiences"
the contents as they move horizontally.
</p>
<p>
The website itself is, from the point of view of its design, often a Single Page or OnePager website:
source
code, texts, images, CSS and scripts are in one and the same document filed on a server. The effects are
controlled via selectors and CSS tags, the requests are managed by the effects, after being triggered by
the
user who has scrolled the page. In the case of multiple scripts, very detailed graphics, high resolution
images or high rendering, the loading time of the content can be longer than expected. For this reason,
it
is advisable to use effects only in a subtle way and it is always better to choose a light source code.
Ideally, parallax scrolling is part of the overall website concept, which can also be a multi-page
website
for targeted use.
</p>
<h3>In practice</h3>
<p>
The most common use case is storytelling. Here, the contents are arranged in a way that tells a story -
while the user scrolls down the page. The range of information and the technical representation of the
contents are combined. Freelancers, websites, online stores, landing pages with many calls to action,
product launch websites and advertising campaigns also benefit from the advantages of parallax scrolling
for storytelling.
From a web design point of view, the following points are relevant for the representation of information
using parallax scrolling[1] :
Parallax scrolling should be used in a minimalist way if we want to move towards a flat design.
It should act as a visual storytelling.
</p>
<ul>
<li>It should give pleasure to the user and no frustration.</li>
<li>It should push the user towards an action. For example a contact or the order of a product.</li>
<li>It should be retroactively compatible with older versions of browsers and work without any problems
on
mobile browsers.</li>
</ul>
<p>
If these criteria are not met when creating a website based on parallax scrolling, the end user may be
faced with major problems. In the worst case, the website would be unusable, the information impossible
to consult, and the website would not reach its goal. Too many technical difficulties could frustrate
the users and also damage the image of the site.
</p>
</section>
<section class="credits-section" id="credits">
<h2>Credits</h2>
<p>
All visuals used belong to <a href="https://fr.freepik.com/upklyak">Upklyak</a>. Thanks to him for providing
them.
</p>
</section>
<footer id="contact">
<a href="#" class="logo"><img src="assets/images/logo.svg" alt="Logo"></a>
<p>2022 © Paul Chevrier</p>
<div class="social">
<a href="https://codepen.io/paulchevrier" target="_blank" rel="noopener noreferrer"
title="Link to author's Codepen profile">
<i class="fa-brands fa-codepen"></i>
</a>
<a id="profile-link" href="https://github.com/iampaulchevrier" target="_blank" rel="noopener noreferrer"
title="Link to author's GitHub profile">
<i class="fa-brands fa-github"></i>
</a>
</a>
<a href="https://twitter.com/iampaulchevrier" target="_blank" rel="noopener noreferrer"
title="Link to author's Twitter profile">
<i class="fa-brands fa-twitter"></i>
</a>
</div>
</footer>
<script src="static/js/parallax.js"></script>
<script src="https://kit.fontawesome.com/dbc353f1d2.js" crossorigin="anonymous"></script>
</body>
</html>