Cool fade in effect on page load

If you want to make your page fade in after loading you need to:

  1. Add a body class in your page settings and name it hidden

  2. Add hidden class in class manager and set opacity to zero

  3. Make a text file and paste this code:

    (document).ready(function () { (document.body).fadeIn(800).removeClass(‘hidden’);
    });

  4. Save it as a .js file and attach this file to your page attachments.

You can also control the fade in speed by changing this value .fadeIn(800)

:v:

2 Likes

Thanks for this tip man!
A question: how do you add a body class to the page settings?

Cheers!

You are welcome!

Its a new feature in blocs 4

1 Like

Oh I see! I was looking into my v3 app, of course I’d never find it :smile:

I’m just waiting to receive my email to download v4. Very excited!
Thanks again man, will let you know once I get t running.

Cheers!

1 Like

I must admit I cheat here and use the custom bric that has several effect options https://blocs.store/product/page-transition/

1 Like

Loved the Blocs 3 websites you have submitted to Built with Blocs collection! Looking forward to see what you come up with using much powerful Blocs 4!

1 Like

Thanks Eldar! I’m also looking forward to that ha! :rofl:
Feels like receiving a big Lego box for Christmas, super excited!

Chees!

1 Like

You also can add class manually by editing an exported html file I guess :roll_eyes:

1 Like

Thanks man! I’ll try that shortly.
Cheers!

You are welcome :blush:

1 Like