Beautify Your Website with Parallax Effect.pdf

1. Beautify Your Website with
Parallax Effect
Lintang Pratama
Front-End Core Team at GDSC UIN
Walisongo

2. List of the material
• What’s Parallax Effect
• Why Why We Should Apply Parallax Effect
• Parallax Effect Benefits
• How to Make Parallax Effect
• Code Session
Overview

3. What is Parallax Effect
Definition
Parallax effect is a computer graphics technique used by
designers to create a faux-3D effect.
Website case: As users scroll down a webpage, different
layers of content or backgrounds move at different
speeds, and this creates an optical illusion.

4. Here’s why
According to a study by Adobe, 38% of internet users will
stop engaging with a website if the content or layout is
unattractive. (exposure.com)
User impression keys: Security, Speed, Responsiveness,
Design, and Content
Why We Should Apply
Parallax Effect

5. List of the benefits
• It helps tell a story
• Parallax scrolling allows us to immerse our website visitors in unique online
experiences.
• It helps to improve user engagement
Parallax Effect Benefits

6. Let’s dive in
Parallax is all about layers!

7. How
There are a few different ways designers can create
parallax website designs.
Ex: Use a container element and add a background
image to this container. Then you should use the
“background-attachment: fixed” CSS property to create
the actual parallax effect. (W3Schools)
Cooking Parallax Effect

8. Prepare your device
Let’s code!
Assets link: bit.ly/parallax-effect-assets
pastebin.pl/view/26d4a847 (css)
pastebin.pl/view/b7d0b707 (html)