December 27, 2012

Widgets

Animation using CSS3 KeyFrames and jQuery's scrollTop() function


css3 keyframesJquery is indeed the most compressed and efficient library of JavaScript introduced so far that has made a web developer's job more easy. Its built in functions of show(), hide(), AJAX() and my beloved scrollTop() are indeed the most used functions that gives a new life to user interface (UI). CSS3 animations using @Keyframes rule is one of the most innovative things I came across so far. Pseudo elements such as :before and :after are increasingly being used now because they eliminated the use of unnecessary div tags.

These days since  I am on vocations I am trying to improve skills of both Jquery and CSS3. From the combination of beautiful web tricks that I learnt so far, I managed to design a simple scroll to top button that uses JQuery's scrollTop function to produce smooth scrolling and is spiced up with CSS3 effects to make it stand out. I have created just two sample versions with circular and rectangular shapes. The Styles are extremely easy to be customized. Lets first see a demo for the circular one:


Live Demo

Don't forget to check our previously released versions of back to top buttons:

 

How to add it to Blogger?

  1. Go To Blogger > Template
  2. Back up your template
  3. Click Edit HTML
  4. Search for <head>
  5. Just below it paste the following scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://downloads.mybloggertricks.com/scrolltop.js' type='text/javascript'/>

Note: I have included the dynamic link for jquery so you wont need to update it when a new version of Jquery is released. It will update automatically.

   6.  Now Search for ]]></b:skin>

   7. Just above it paste one of the following styles

For circular one use this code:

/* ----- MBT's Back-To-Top Button Circular version -----*/

@-webkit-keyframes arrow_to_top{
    0%{
        top:10px
    }
    50%{
        top:5px
    }
    100%{
        top:10px
    }
}
@-moz-keyframes arrow_to_top{
    0%{
        top:10px
    }
    50%{
        top:5px
    }
    100%{
        top:10px
    }

}
@keyframes arrow_to_top{
    0%{
        top:10px
    }
    50%{
        top:5px
    }
    100%{
        top:10px
    }

}

#back-top, #back-top:hover{
    position: fixed;
    display:block;
    display:none;
    bottom: 20px;
    right:20px;
    cursor:pointer;
    width: 52px;
    height:52px;
    text-align: center;
    text-decoration: none;
    color: #797e82;
    color: rgba(100,100,100,0.8);
    font-size:16px;
    border:1px solid #c5ccd3;
    border-radius:30px;
    z-index:9999;
    padding-top:35px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;             
    background: #dee1e7;
    background: rgba(208,215,222,0.5);
}

   
   
#back-top:hover{
    color:#000;
    text-shadow:1px 1px 0 #fff;
    background: #d0d7de;
    background: rgba(208,215,222,0.9);
    border-color:#8fa8c1;
}
#back-top:before{
    display:block;
    content:"";
    position:absolute;
    z-index:998;
    background: #e2e3e6;
    background: rgba(222,225,231,0.3);
    width: 66px;
    height:66px;
    border-radius:35px;
    border:1px solid #c5ccd3;
    top:-9px;
    left:-9px
}
#back-top:hover:before{
    border-color:#8fa8c1
}
#back-top:after{
    display:block;
    content:"";
    position:absolute;
    z-index:10000;
    background: url(http://3.bp.blogspot.com/-GgZTH0g3MQw/UNsqy--OCmI/AAAAAAAAIUg/riUFz9WLaaI/s400/sprite-mbt.png) -10px -5px no-repeat;
    opacity:0.5;
    width: 10px;
    height:23px;
    top:10px;
    left:50%;
    margin-left:-5px;
}

#back-top, #back-top:after, #back-top:before{
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
#back-top:hover:after{
    opacity:1;

    -moz-animation-duration: .5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: arrow_to_top;
    -moz-animation-timing-function: linear;

    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: arrow_to_top;
    -webkit-animation-timing-function: linear;

    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-name: arrow_to_top;
    animation-timing-function: linear;
}

For Rectangular one use this code:


/* ----- MBT's Back-To-Top Button Rectangular version -----*/

@-webkit-keyframes arrow_to_top{
    0%{
        top:10px
    }
    50%{
        top:5px
    }
    100%{
        top:10px
    }
}
@-moz-keyframes arrow_to_top{
    0%{
        top:10px
    }
    50%{
        top:5px
    }
    100%{
        top:10px
    }

}
@keyframes arrow_to_top{
    0%{
        top:10px
    }
    50%{
        top:5px
    }
    100%{
        top:10px
    }

}

#back-top, #back-top:hover{
    position: fixed;
    display:block;
    display:none;
    bottom: 20px;
    right:0px;
    cursor:pointer;
    width: 24px;
    height:34px;
    text-align: center;
    text-decoration: none;
    color: #797e82;
    color: rgba(100,100,100,0.8);
    font-size:16px;
    border:1px solid #c5ccd3;
    border-radius:2px;
    z-index:9999;
    padding-top:35px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    margin:0px;
    background: #dee1e7;
    background: rgba(208,215,222,0.5);
}


#back-top:hover{
    color:#000;
    text-shadow:1px 1px 0 #fff;
    background: #d0d7de;
    background: rgba(208,215,222,0.9);
    border-color:#8fa8c1;
}
#back-top:before{
    display:block;
    content:"";
    position:absolute;
    z-index:998;
    background: #e2e3e6;
    background: rgba(222,225,231,0.3);
    width: 37px;
    height:50px;
    border-radius:2px;
    border:1px solid #c5ccd3;
    top:-9px;
    left:-9px
}
#back-top:hover:before{
    border-color:#8fa8c1
}
#back-top:after{
    display:block;
    content:"";
    position:absolute;
    z-index:10000;
    background: url(http://3.bp.blogspot.com/-GgZTH0g3MQw/UNsqy--OCmI/AAAAAAAAIUg/riUFz9WLaaI/s400/sprite-mbt.png) -10px -5px no-repeat;
    opacity:0.5;
    width: 10px;
    height:23px;
    top:7px;
    left:50%;
    margin-left:-5px;
}

#back-top, #back-top:after, #back-top:before{
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
#back-top:hover:after{
    opacity:1;

    -moz-animation-duration: .5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: arrow_to_top;
    -moz-animation-timing-function: linear;

    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: arrow_to_top;
    -webkit-animation-timing-function: linear;

    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-name: arrow_to_top;
    animation-timing-function: linear;
}

 

        8.   Now just one last step. Paste the following HTML code just below <body>


<a href='#top' id='back-top' style='right:0px; display: inline;'/>

Tip: Play with border-radius property to design more creative shapes yourself!

       9.    Save your template and you are all done!

Visit your blog and scroll to bottom to see it working just fine!

How it works?

The script shows and hides the button based on the position of the window. As soon as the user scrolls down, the script will activate the button through .show() function and as soon as the user moves up, the button disappears due to activation of .Hide() function. The soft fading effect also depends on the inner width of the window (i.e 1600px and 812px) and button location. The effects are introduced using simple Jquery built-in functions of fadeIn() and fadeOut().

The button will display to the bottom right corner of the page.

The opacity in button's background colors is introduced using rgba colors. Where thanks to the alpha channel the opacity of the object is easily controlled without introducing a separate property for it. In order to avoid IE's opacity issues I have included a separate property for background color using rgb settings. So the button would look the same in all browsers. However since IE does not support Keyframes animation, therefore the arrow wont animate in IE alone.

Questions?

I just hope this little object may help in adding a new spice to your blog's appearance. If you have any problems installing the widget, just post me a query. If you carefully observe the stylesheet & the scrolltop.js script for this widget, you will be able to learn almost everything about CSS3 and JQuery's widely used functions. Wish you great health and peace buddies. Peace and blessings. :)

Don't forget to check this beautiful image effects using CSS:



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

33 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Hello sir, I want your help regarding CSS, HTML and "how web Hosting works?"
    Can you please provide me some data, articles or books??

    I shall be very thankful.
    My email : waqasazamkml@gmail.com

    Regards

    ReplyDelete
  2. Thanks for the cool widdget, I will use this on my site soon.

    Free Mobile recharge

    ReplyDelete
  3. thanks for this amazing tip.

    Please tell me how to change the background color of the button.

    ReplyDelete
  4. Great work bro, you are just too good May ALLAH bless you long life to keep on going with the work.
    Visit M.Y.B Softwares!

    ReplyDelete
  5. hey bro plzz help me maine
    apne blog pe templets
    download kiya bt edit nahi
    ho hai mere hisab
    se...
    www.newblackhat.
    blogspot.in

    check bro and vo site jaha se
    maine
    templets download
    kiya

    www.bloggerhack.com/2011
    /10/progray-blogger-
    template.html?m=1

    kya maine app ko apne blog
    ka email and password aur
    apne detail de do app sahi kar
    doge...plzzzzzzzzzzz help app
    ne pahle bhi mera help
    kiya....uske liye thnxxxxxx

    ReplyDelete
  6. Nice widget. I will surely put it on my blog as soon as i get time.Thanks bro for this

    Blogging Tips

    ReplyDelete
  7. please tell me how to move the lables,time and author below post title
    CareerAndTricks

    ReplyDelete
  8. Very nice tutorial Bro. Just love your blog :)

    Zeshan
    From: ZAKeTeck

    ReplyDelete
  9. Nice post. this great work. thanks for sharing :)

    Regards
    Rahul Kashyap
    Blog: SDMMovies.com

    ReplyDelete
  10. its very nice....by www.quizvook.com

    ReplyDelete
  11. Mohd bro, I want to contact you personally. Please tell me how can i do so. Coz you don't read emails frequently. :(

    ReplyDelete
  12. Thank you Sir for sharing this. I have seen the demo page and seen the top navigation menus which are also looking nice. Please provide me the code for that.

    BLOGGER TIPS & TRICKS

    USEFUL TRICKS

    ReplyDelete
  13. bro i have commented many times but i did not get solution of any problem
    CareerAndTricks

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Hey, whats the problem with your comment box... i want to explain my problem but when i type the body tag it says somewhat like "Tag not accepted: BODY..................
    WHATZ THE PROBLEM

    ReplyDelete
  16. Thanks for this amazing post brother. But i am using wordpress :(. dont know much about it.


    Shahbaz Khan recently posted How to Sneak into unprotected Security Cameras using Google Dorks

    ReplyDelete
  17. simply awesome.keep rocking.
    regards
    www.technosati.com

    ReplyDelete
  18. @Waqas

    If you seriously wish to learn them all and comprehensively then read our articles on web hosting one by one ,download our Ebooks,learn web designing using books from sitepoint or just use w3schools.com

    Hope this helps :)


    @Sumit
    To change background look in the selector properties shown by highlighted border-radius. You will find these properties:


    background: #dee1e7;
    background:rgba(208,215,222,0.5);

    They will appear twice. So edit them accordingly. Use our color generator tool.


    @MYB
    May Allah bless you more dear brother :)


    @Hemant Verma

    Such comments will be considered spam from now onwards buddy. Kindly avoid them.

    @ABHIJEET

    If I could help each one of you I would love to do that but time kills buddy. Never share your password with anyone. Since that template is not our resource thats why you may kindly contact its designer for help. I help out with MBT templates only buddy.


    @Rohit
    Never loose hope buddy. Honestly 24 hours a day is just too less of a time these days. I really over loaded with many tasks so hardly publish juts a post on alternate days. Juts preparing an new year gift for all of you. :)

    For that simply click expand widgets box and then search for
    data:post.body

    To move the labels and author info just below titles then paste its code just above data:post.body and if you wish to place it at the bottom of post then place it below data:post.body


    In your template you will fine the code for Author info code just below:

    <div class='post-footer-line post-footer-line-1'>



    and the labels code just below:

    <div class='post-footer-line post-footer-line-2'>


    Let me know for more help pal :)

    @abhishek

    There you go dear: Create Colorful tabs Menu with jQuery :)


    @lucky
    Please first encode your html code using this tool

    :)

    @shahbaz
    This widget can be added to any page online! Not limited to any platform dear. The head and body tags exsit in wordpress too. Just place them accordingly. :)





    ReplyDelete
  19. @Mohammad:
    so please tell me, from where I should start?

    ReplyDelete
  20. awesome tutorial sir.
    thanks for this.

    ReplyDelete
  21. i added all the scripts but still not showing up in my blog ? O.o .. thetrick11.blogspot.com

    ReplyDelete
  22. Animation using css3 key frames is described here. Know all about it

    Web Designers Singapore

    ReplyDelete
  23. at the very last step i.e; step no. 8
    i cudn't find "body" in my blogger template
    so plz help me out !!!

    http://www.tip-d-trick.blogspot.in/

    ReplyDelete
  24. Dear brother
    scroll to top honestly worked fine for couple of days in my blogger, but now do not work smoothly even though some times disappeared!!. when i cheked DEMO in this blogg i find it also no more working. so i ask you devotional to fix this problem or tell me how can i fixed?

    regards. with lot of best wishes

    ReplyDelete
  25. this good..for me...thanks...www.hapta.in

    ReplyDelete
  26. Simply wish to say your article is as surprising. The clarity for your post is just great. Thanks one million and please keep up the enjoyable work. dentist nj

    ReplyDelete
  27. Thanks maan http://www.khotikor.com

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |