BUTTONS: HOW TO MAKE BACK TO TOP ROCKET ANIMATED

Hovered link animated

How to make an animated back to top button? This is a rocket animated for scroll up button in our website or blog.

BUTTONS: HOW TO MAKE BACK TO TOP ROCKET ANIMATED

Features:
• Scroll to top screen.
jQuery version.
• Animated effects.
• Animated button.

CSS

Put this on CSS area or ]]></b:skin> or </style> :
/* Back to Top KiseFXrocket */
<style type="text/css" scoped="scoped">
#scrolltop{display:none}
#KiseFXrocket{position:fixed;bottom:50px;z-index:7;display:none;overflow: inherit;!important;width:26px;height:48px;right:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19X8MLCCONce5ne-SXqTze-6rOgcJI0Jx65SwPStDb4fl5wqd_jY-7jTjGKo-MitZdNmA6V_-ZdkGrOrovUySnX1k_0U4FZ37QGEt3ideiQtwbmdo-E3xPc6j4MIqIpTD2N7EjfkalQkS/s1600/kisefx.rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#KiseFXrocket i{display:block;margin-top:48px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19X8MLCCONce5ne-SXqTze-6rOgcJI0Jx65SwPStDb4fl5wqd_jY-7jTjGKo-MitZdNmA6V_-ZdkGrOrovUySnX1k_0U4FZ37QGEt3ideiQtwbmdo-E3xPc6j4MIqIpTD2N7EjfkalQkS/s1600/kisefx.rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#KiseFXrocket:hover{background-position:50% -62px}
#KiseFXrocket:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}
#KiseFXrocket.showrocket{visibility:visible;opacity:1;border:none;box-shadow: 0 0px 0px rgba(0,0,0,0.0);}
#KiseFXrocket.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#KiseFXrocket.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}
</style>



And then put jQuery and HTML code before </body> tag:

jQuery

<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#KiseFXrocket").slideUp(500):jQuery("#KiseFXrocket").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("KiseFXrocket"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.css("right", 10)}),jQuery("#KiseFXrocket").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

HTML CODE

<a href="javascript:void(0);" id="KiseFXrocket" class="showrocket"></a>






Rebates Bonus
Exclusive Rebate

Sign up today and be the first to get notified on new updates.


LOAD DISCUSSION

0 comments:

Post a Comment