2015/08/26

إضافة زر الصعود إلى الأعلى مع ثأثير الإرتداد

إضافة زر الصعود إلى الأعلى مع ثأثيرات عدة

إضافة زر الصعود إلى الأعلى مع ثأثير الإرتداد-يسهل على الزائر العودة إلى الأعلى عندما تكون المقالة طويلة,لذالك سوف أشارك معكم كيفية إضافة هذا الزر الإحترافي و بثأثيراث عدة .

طريقة التركيب

أدخل إلى لوحة تحكم المدونة
إختر قالب
إضغط فوق تحرير Html

الأن إبحث عن </head> وأضف الكود التالي فوقه

code<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

الأن إبحث عن ]]></b:skin> وأضف الكود التالي فوقها

CSS/* Back to top */
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}

ثم إبحث عن الوسم </body> وأضف هذا الكود فوقة

Jquery<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

النتيجة

لإضافة الزر مع ثأثير الإرتداد أضف الكود التالي بدل من الكود السابق

Jquery<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

النتيجة

لإضافة ثأثيرات أخرى يمكنك الإستعانة بهذا الموقع http://easings.net ثم إستبدل الثأثير الملون بالأزرق بإسم الثأثير الذي تريده.

إلى هنا ينتهي الشرح أي إستفسار أو سؤال لا تتردد بترك تعليق

محمد 8/26/2015

إضافات بلوجر jQuery