نارنجی گراف

کد ها و جاوا اسکریپت های کاربردی بیان

نارنجی گراف

کد ها و جاوا اسکریپت های کاربردی بیان

کد ساخت دکمه هدایت به بالا با انیمیشن

دانلود رمان | شنبه, ۳ شهریور ۱۳۹۷، ۰۶:۰۸ ق.ظ | ۰ نظر
سلام در این ساعت از وبسایت نارنجی گراف با کد بالا بر سایت در خدمت شما دوستان هستیم با استفاده از این کد در سایت خود قادر خواهید بود تا با یک کلیک به بالای سایت هدایت شوید

ویژگی های این دکمه میتوان به موارد زیر اشاره کرد:

- رسپانسیو و ولید

- انیمیشن های جذاب

- نمایش در زمانی که ما به پایین اسکرول کنید

- بازگشت به بالا با انیمیشن

- زیبا و کم حجم

آموزش استفاده از کد :
ابتدا کد زیر را در head قالبتون قرار دهید:

<link rel="stylesheet" href="http://up.hypertemp.ir/view/520303/fontawesome.css">
<style>
.up {
width: 60px !important;
height: 60px !important;
background-color: #FFF;
position: fixed;
border-radius: 100%;
box-shadow: 0px 4px 6px -2px #000;
right: 20px;
bottom: -60px;
display:none;
transition: all 0.4s ease 0.1s;
overflow: hidden;
}
.up:hover {
animation: 1s ease-in 0s alternate none infinite running dordorbyhypertemp;
}
.up i {
vertical-align: middle;
text-align: center;
color: #03B0FF;
padding: 11px 14px;
}
.up:hover i {
color: #333;
animation: 1s ease-in 0s alternate none infinite running dordorbyhypertemp;
}
.hypershowup{
display: block !important;
bottom: 20px !important;
}
@-webkit-keyframes dordorbyhypertemp {
0% {transform:scale(0.9)}
50% {border-bottom: 2px solid #E71E6C;transform:scale(1)}
100% {transform:scale(0.9)}
}
@-moz-keyframes dordorbyhypertemp {
0% {transform:scale(0.9)}
50% {border-bottom: 2px solid #E71E6C;transform:scale(1)}
100% {transform:scale(0.9)}
}
@keyframes dordorbyhypertemp {
0% {transform:scale(0.9)}
50% {border-bottom: 2px solid #E71E6C;transform:scale(1)}
100% {transform:scale(0.9)}
}
</style>
<script src="http://up.hypertemp.ir/view/96809/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://up.hypertemp.ir/view/983047/hyperUpera.js" type="text/javascript"></script>


کد زیر هم در هر جا که مورد نظرتون در Body قالبتون قرار دهید:

<a href="#top"><div class="up" id="back-to-top"><i class="fa fa-chevron-up fa-2x uper"></i></div></a>

سوالی چیزی بود در خدمتیم در مورد این مطلب در نظرات.



نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی