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
