2. What is Parallax
Scrolling Design?
It Is a special effect used in computer graphics.
The background moving at a slower rate to the foreground, creating a
3D effect as you scroll down the page
3. What is Parallax
Scrolling Design?
It Is a special effect used in computer graphics.
The background moving at a slower rate to the foreground, creating a
3D effect as you scroll down the page
Parallax web design is a technique of using CSS
to make different layers on the web page move at
different rates.
4. History
1982 • Arcade game ‘Moon Patrol’ became
popular
1990s • The usage of technique widely
spread in the gaming industry
Now • The major trend for web design
5. Pros of
Parallax
Scrolling
Design
Hot topic of the user experience to a new
interactive level of online viewing
Increasing the usage of parallax scrolling design
makes their web presence more
appealing
Strong connection to an online brand
experience and the specific products, based on the
interactivity of the website
1
2
3
6. Complex development- some light
JavaScript coding that needs to be done to
creat the three dimensional effect
Loading time – the single image heavy page
can take far longer to load than your standard
five page static HTML site
The lack of SEO function – as the site is built to be
a single webpage, there are obvious issues that occur
when competing on search engines with fuller, content
heavy websites
1
2
3
Cons of
Parallax
Scrolling
Design
7. What are some effects
that parallax scrolling
can achieve?
1 Sites can be more interactive
A story-telling approach
Direct visitors to calls to action
2
This can provide means to engage the audience with
cleaver use of animations for scene changes.
v
3 This can direct users toward a desired action on the page
This can make people interested in websites.
8. Make it tell a story
- DE VRIEND Book Trailer -
Examples of creative parallax
scrolling websites
The dark background of the site lets users focus on the story itself and
enjoy outstanding audio and video effects.
9. Interactive storytelling, making great use of the scrolling format
- The Forgotten Roadtrip -
Examples of creative parallax
scrolling websites
10. Making it engaging
- The Forgotten Roadtrip -
Examples of creative parallax
scrolling websites
11. Call to Action
- Tinkle -
Examples of creative parallax
scrolling websites
Let this parallax scrolling visitors guide to the ‘shop now’
12. Making it Cool
- Pharrell williams happy -
Examples of creative parallax
scrolling websites
24 hours of happy is a full-screen experience
that pushed the boundaries of web technologies and interactive video.
13. How is your business
website improving a site’s
page ranking?
With more images to move around the website at
different perspectives and speeds,
businesses will be able to encourage visitors to
scroll through the entire page.