Viewing Fade In Content

Fade In Content



User: Roddy 4 years ago
I was asked to create a widget to fade in page content on load. This gives a smooth transition effect but also helps with pages that load slowly due to iframe content, inefficient code and/or poor media file management.

A widget is not required. Just paste this code into the Head Code box in the Page inspector to apply the effect to one page or in the site wide Head Code box in the Site Publishing Settings page to effect all pages of the site.

Code snippet ...

<style>@keyframes fadeInContent{to{opacity:1}}.container{opacity:0;animation:fadeInContent 3s forwards}</style>

The animation time is 3 seconds - change to suit.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.