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
