How to add Floating and Fade in effects in blogger post/page/theme/template

How to add Floating and Fade in effect in blogger post

In this article, we will add fading and floating effect using CSS, JS, JQUERY in blogspot.

It is very simple. Please Follow there step.

1. Adding jquery script to your blogger.

Skip this is already added a jquery script to your blog. 

To add jquery script, just go to this link and copy the jquery script code. You may copy for minified version.

For now I am giving you the reference script, you can also use it. 

Add this code just before the closing body tag in edit theme. OR add it just end of the post in html.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

2. Adding CSS

Add the following code in the top html of your post or add it just before closing head tag in edit theme html.

.floating { animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; margin-top: 5px; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, -0px); } } @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .slideInLeft { animation: 1s ease-out 0s 1 slideInFromLeft; } @keyframes slideInFromRight { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } .slideInRight { animation: 1s ease-out 0s 1 slideInFromRight; } @keyframes slideInFrombottom { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } .slideInBottom { animation: 1s ease-out 0s 1 slideInFrombottom; } @keyframes slideInFromtop { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .slideInTop { animation: 1s ease-out 0s 1 slideInFromtop; }

3. Adding the JS and Jquery

Add the following code just after the jquery script you have add earlier.

<script> $(".hk-fade").each(function () { if($(this).hasClass('fadeInTop')){ var slidecls = 'slideInTop'; } if($(this).hasClass('fadeInRight')){ var slidecls = 'slideInRight'; } if($(this).hasClass('fadeInLeft')){ var slidecls = 'slideInLeft'; } if($(this).hasClass('fadeInBottom')){ var slidecls = 'slideInBottom'; } var top_of_element = $(this).offset().top; var bottom_of_element = $(this).offset().top + $(this).outerHeight(); var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight()-30; var top_of_screen = $(window).scrollTop(); if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){ $(this).addClass(slidecls); } }); $(window).scroll(function() { $(".hk-fade").each(function () { if($(this).hasClass('fadeInTop')){ var slidecls = 'slideInTop'; } if($(this).hasClass('fadeInRight')){ var slidecls = 'slideInRight'; } if($(this).hasClass('fadeInLeft')){ var slidecls = 'slideInLeft'; } if($(this).hasClass('fadeInBottom')){ var slidecls = 'slideInBottom'; } var top_of_element = $(this).offset().top; var bottom_of_element = $(this).offset().top + $(this).outerHeight(); var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight()-25; var top_of_screen = $(window).scrollTop(); if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){ $(this).addClass(slidecls); } }); }); </script>

4. How to use?

You can get reference from the code and preview given below.

<h2 class="floating" style="text-align: left;">Adding Fade in Effect in blogger post</h2> <div> <ol style="text-align: left;"> <li class="hk-fade fadeInRight">Heading</li> <li class="hk-fade fadeInRight">Sub-heading</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> <li class="hk-fade fadeInRight">Paragraph</li> </ol> </div>

hk-fade : compulsory to use in every element. 

fadeInRight : Fade from right

fadeInLeftt : Fade from left

fadeInBottom : Fade from bottom

fadeInTop : Fade from top

floating: floating effect

Preview(Refresh the page to see the preview of following text.)

Adding Fade in Effect in blogger post

1. Heading
2. Sub-heading
3. Paragraph
4. Paragraph
5. Paragraph
6. Paragraph
7. Paragraph
8. Paragraph
9. Paragraph
10. Paragraph
11. Paragraph
12. Paragraph
13. Paragraph
14. Paragraph
15. Paragraph

If you are having any query or need help in installation. You can contact.