Scrolling Effects – Transparency

Transparency lets you gradually make elements more transparent or more visible in correlation to the visitor’s scroll. An example is having a title appear and then dissolve in accordance with the scroll.

Advanced or Style > Background

Motion Effects

  1. Scrolling Effects: Slide to ON
  2. Transparency: Click pencil edit icon
    Direction: Choose one of 4 possible effect directions:
    *Fade In – The element starts as transparent and gradually becomes visible, based on the viewport settings.
    *Fade Out – The element starts as visible and gradually becomes transparent, based on the viewport settings
    *Fade Out In – The element starts as visible, then fades out, then becomes visible again, based on the viewport settings.
    *Fade In Out – The element starts as transparent, then becomes visible, then transparent again, based on the viewport settings.
    Level: Set level of transparency  from 0 to 10
    Viewport: Determine when to begin the effect, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the effect starts only after you scroll half the viewport height.
  3. Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices
  4. Effects Relative To: Choose from Default, Viewport, or Entire Page

Tip: Try the following scenario. Set the Direction as Fade In Out.  Set the viewport between 30-60, and notice what happens: the heading starts off transparent, reaches peak Transparency level at 30%, stays the same until 60%, and fades out until the end of the screen.

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page

Birthday Sale: Up to 50%30% Off
Birthday Sale: Last 24 hours!
Birthday Sale: Last 24 hours:
Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount