Parallax.scrolling.websites.

14
Examples of Parallax Web Design for More Engaging Brand Communications

description

An another interesting website trend to get a better business's brand communication.

Transcript of Parallax.scrolling.websites.

Page 1: Parallax.scrolling.websites.

Examples of Parallax Web

Designfor More

Engaging Brand Communications

Page 2: Parallax.scrolling.websites.

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.

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.

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.

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.

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.

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.

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.

Interactive storytelling, making great use of the scrolling format

- The Forgotten Roadtrip -

Examples of creative parallax scrolling

websites

Page 10: Parallax.scrolling.websites.

Making it engaging- The Forgotten Roadtrip -

Examples of creative parallax scrolling

websites

Page 11: Parallax.scrolling.websites.

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.

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.

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.

Page 14: Parallax.scrolling.websites.

Visit Us: www.meijun.ccTweet Us: @meijun

Email Us: [email protected]

ANY QUESTIONS?