Skip to content
Support center
  • Home
  • Support Center
  • Docs
  • Changelog

General

  • Support
  • Plugin Bundled with Themes
  • How to Revoke Product License Key
  • How to purchase ElementsKit and Metform Pro License

Elements Kit

  • Widget Builder
  • Header Footer Builder
  • Mega Menu Builder
  • Vertical Mega Menu
  • One Page Scroll
  • Parallax Effects
  • Sticky Content Module
  • Instagram Feed API
  • Facebook Feed API
  • Facebook Messenger
  • Twitter Feed API
  • Advanced Accordion
  • Advanced Tab
  • Timeline
  • Advanced Chart
  • Data Table
  • Creative Button
  • Motion Text
  • Hotspot
  • Gallery
  • Woocommerce Product List
  • Woocommerce Category List
  • Woocommerce Mini Cart
  • Woocommerce Product Carousel
  • Heading Title
  • Button
  • Team
  • Accordion
  • Tab
  • Social Media
  • Client Logo
  • Mailchimp
  • FAQ
  • Image
  • FunFact
  • Countdown Timer
  • Image Box
  • Image Accordion
  • Icon Box
  • Pie-Chart
  • Progress Bar
  • Pricing Table
  • Testimonial
  • Header Info
  • Video
  • Image Comparison
  • Post Tab
  • Post List
  • Page List
  • Header Off-canvas
  • Dropcaps
  • Duel Button
  • Business Hours
  • Social Share
  • Category List
  • Search
  • Post Grid
  • Nav Menu
  • Contact Form 7
  • Caldera Form
  • We Forms
  • Wp Forms
  • Ninja Forms
  • Tablepress
  • Unfold
  • Advanced Toggle

MetForm

  • Getting Started
  • Form Input Field
  • Pro Input Field List
  • Pro Feature- Multi-Step Form
  • Pro Feature- Calculation
  • Pro Feature- Payment Method
  • Pro Feature- Conditional Logic
  • General
  • Confirmation
  • Notification Email
  • Integration
  • Payment
  • CRM
  • Auth
  • reCAPTCHA Integration
  • PayPal Payment Set Up
  • Stripe Payment Set Up
  • Thank You Page
  • Mailchimp Integration
  • AWeber Integration
  • ActiveCampaign
  • GetResponse Integration
  • ConvertKit Integration
  • Hubspot
  • Zoho
  • MailPoet Integration
  • Slack Integration
  • Support
  • WooCommerce Checkout
  • Create Post with MetForm
  • Response Message

WP Social

  • GETTING STARTED WITH WP SOCIAL
  • WP SOCIAL FACEBOOK LOGIN
  • WP SOCIAL GOOGLE LOGIN APP
  • WP SOCIAL LINKEDIN LOGIN APP
  • WP SOCIAL TWITTER APP
  • WP SOCIAL WORDPRESS APP
  • WP SOCIAL GITHUB APP
  • WP SOCIAL REDDIT APP
  • WP SOCIAL DRIBBBLE APP
  • WP SOCIAL COMMENT COUNT
  • WP SOCIAL POST COUNT

WP Ultimate Review

  • Settings

WP Fundraising Donation

  • Getting Started with WP Fundraising
  • WP Fundraising With Crowdfunding
  • WP fundraising with Single Donation Campaign
  • Others Way to Add Campaign
  • WP Fundraising With Default Payments
  • WP Fundraising with Woocommerce
  • Short-Code
  • Do-Action
  • Home
  • Docs
  • Elements Kit
  • Parallax Effects

Parallax Effects

Table of Contents
  • Background Image Parallax
  • CSS3
  • Tilt
  • ON Scroll
  • On Mouse Move

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

What are your Feelings
Share This Article :
Updated on February 27, 2020
Sticky Content Module Mega Menu Builder
Table of Contents
  • Background Image Parallax
  • CSS3
  • Tilt
  • ON Scroll
  • On Mouse Move
Copyright © 2021 Wpmet