Parallax Effects

Background Image Parallax #

A major trend in web design is Parallax scrolling, which involves the Background Image is moving at a slower rate to the foreground content as you scroll down the page. In this guide we’ll show you how you can add Parallax effect on a Background Image with ElementsKit.

Watch the video guide:

Or, follow the step by step instructions below:

Step=>1: Make sure the Parallax module is ON from Dashboard → ElementsKit → MODULES

Step=>2: Go to Elements=> Search for Image=> Drag and Drop the Image section.

Step=>3: Add a Background Image from Edit Section → Content tab

Step=>4: Go to Advanced Tab -> Click on ElementsKit effects-> Select Effect Type CSS3, Tilt, On scroll, On Mouse Move option at your own choice

CSS3 #

• Step=>1: Go to Advanced Tab=>ElementsKit Effects=> Effect Type=> Select CSS3=> Turn on the CSS Animation Toggle

• Select Animation effect from Drop-Down

• Modify Animation Speed
• Animation Iteration Count=> Infinite or Unset

• Select Animation Direction

• Step=>2: ElementsKit Effects=> Effect Type=> Select CSS3=> Turn on the CSS Transformation Toggle

• Translate
• Rotate
• Scale
• Skew
• Reset if want

Tilt #

Step=>1: Go to Advanced Tab=>ElementsKit Effects=> Effect Type=> Select Tilt

ON Scroll #

Step=>1: Go to Advanced Tab=>ElementsKit Effects=> Effect Type=> Select On Scroll

On Mouse Move #

Step=>1: Go to Advanced Tab=>ElementsKit Effects=> Effect Type=> Select On Mouse Move