Parallax.scrolling.websites.
-
Upload
meijuncorp -
Category
Design
-
view
102 -
download
0
description
Transcript of Parallax.scrolling.websites.
![Page 1: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/1.jpg)
Examples of Parallax Web
Designfor More
Engaging Brand Communications
![Page 2: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/2.jpg)
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
![Page 3: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/3.jpg)
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.
![Page 4: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/4.jpg)
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
![Page 5: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/5.jpg)
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
![Page 6: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/6.jpg)
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
![Page 7: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/7.jpg)
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.
v3 This can direct users toward a desired action on the page
This can make people interested in websites.
![Page 8: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/8.jpg)
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.
![Page 9: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/9.jpg)
Interactive storytelling, making great use of the scrolling format
- The Forgotten Roadtrip -
Examples of creative parallax scrolling
websites
![Page 10: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/10.jpg)
Making it engaging- The Forgotten Roadtrip -
Examples of creative parallax scrolling
websites
![Page 11: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/11.jpg)
Call to Action- Tinkle -
Examples of creative parallax scrolling
websites
Let this parallax scrolling visitors guide to the ‘shop now’
![Page 12: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/12.jpg)
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.
![Page 13: Parallax.scrolling.websites.](https://reader035.fdocuments.us/reader035/viewer/2022070304/54c7d06f4a7959a5608b45cb/html5/thumbnails/13.jpg)
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.