ProThemesWP Fade-In Shortcode

Fading in content as your visitors scroll down the page is an amazing effect for your web pages.

To fade your content in, you can simply install (and activate) ProThemesWP Fade In Shortcode and use the shortcode [fadein].

Content placed within the shortcode will be faded in as your visitors scroll down your webpages.

Here is an example using the [fadein] shortcode. The source of the example is below the example. There is a “Restart Fade-ins” buttons so that you can reload all of the fade-ins on this page without reloading the page.

Content that is faded in.
Restart Fade-ins

[fadein]Content that is faded in.[/fadein]

The [fadein] shortcode has various options such as changing the duration of the fade-in and delaying the fade-in. Here is an example of a delayed fade-in with a long duration.

Restart Fade-ins
This fade-in is delayed by 2 seconds and lasts for 10 seconds.

[fadein delay="2" duration="10"]This fade-in is delayed by 2 seconds and lasts for 10 seconds.[/fadein]

Background Images

Fade-Ins are really effective when combined with background images. ProThemesWP Fade In Shortcode plugin also provides a shortcode [fadeinbackground] for background images. Here is an example.

Restart Fade-ins

Here is some html that is faded in over a background image.

[fadeinbackground backgroundimage="https://prothemeswp.com/wp-content/uploads/2019/08/wordpress-background.jpg"][fadein]<h1 style="color:white;">Here is some html that is faded in over a background image.</h1>[/fadein][/fadeinbackground]

Some CSS (style=”color:white;”) was used to change the color of the html to white so that it appeared over the background image. A better alternative might have been to add an opaque background color to the text to make it easier to see by adding “backgroundcolor” and “backgroundcoloropacity” attributes to the [fadein] shortcode ([fadein backgroundcolor=”white” backgroundcoloropacity=”50%”]).

We can also make this fade-in look better using the “padding” attribute of the [fadeinbackground] shortcode to add 100 pixels of padding ([fadeinbackground padding=”100px”]).

Restart Fade-ins

This fade-in shortcode looks good with some padding.


[fadeinbackground backgroundimage=”https://prothemeswp.com/wp-content/uploads/2019/08/wordpress-background.jpg” padding=”100px”][fadein backgroundcolor=”white” backgroundcoloropacity=”50%”]<h1>This fade-in shortcode looks good with some padding.</h1>[/fadein][/fadeinbackground]

By default, the background image is resized and cropped. However you can tile a small background image by setting the “backgroundimage” attribute to be a small image and by setting the “backgroundfit” attribute to be “tiled”.

Restart Fade-ins

This fade-in’s background is a tiled thumbnail.

[fadeinbackground backgroundimage="https://prothemeswp.com/wp-content/uploads/2019/08/wordpress-background-150x150.jpg" backgroundfit="tile" padding="100px"][fadein backgroundcolor="white" backgroundcoloropacity="50%"]<h1>This fade-in's background is a tiled thumbnail.</h1>[/fadein][/fadeinbackground]

You can also switch off the parallax effect.

Restart Fade-ins

This fade-in has no parallax.

[fadeinbackground parallax="no" backgroundimage="https://prothemeswp.com/wp-content/uploads/2019/08/wordpress-background.jpg" padding="100px"][fadein backgroundcolor="white" backgroundcoloropacity="50%"]<h1>This fade-in has no parallax.</h1>[/fadein][/fadeinbackground]

Background Overlays

You can add a partially opaque background color that overlays the background image to make the text over the background image clearer and/or to change the background image’s color to be closer to your theme colors.

Here is an example using the “backgroundcolor” and “backgroundcoloropacity” attributes on the [fadeinbackground ] shortcode (rather than the [fadein] shortcode).

Restart Fade-ins

The background has an overlay.

[fadeinbackground  backgroundcolor="white" backgroundcoloropacity="90%" backgroundimage="https://prothemeswp.com/wp-content/uploads/2019/08/wordpress-background.jpg" padding="100px"][fadein]<h1>The background has an overlay.</h1>[/fadein][/fadeinbackground]

Fading In One Element After Another

It looks great if you fade in one element after another over a background image at the top of your home page (or another landing page).

Here is an example that also adds some padding to the second fadein.

Restart Fade-ins

Welcome to ProThemesWP.

Professional Themes for WordPress

[fadeinbackground backgroundimage="https://prothemeswp.com/wp-content/uploads/2019/08/wordpress-background.jpg" padding="100px"][fadein backgroundcolor="white" backgroundcoloropacity="50%"]
<h1>Welcome to ProThemesWP.</h1>
[/fadein]<h1></h1>[fadein backgroundcolor="white" backgroundcoloropacity="50%" delay="2" duration="2" padding="20px"]<h1>Professional Themes for WordPress</h1>
[/fadein][/fadeinbackground]

Summary

Fading in content is easy using ProThemesWP Fade-In Shortcode plugin.