Animation using CSS3 KeyFrames and jQuery's scrollTop() function
Blogger> Πρότυπο
Δημιουργία αντιγράφων ασφαλείας του προτύπου σας
Κάντε κλικ στο κουμπί Επεξεργασία HTML
Αναζήτηση για <head>
Ακριβώς από κάτω επικολλήστε τα ακόλουθα σενάρια:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://foulsblog.xtgem.com/scrolltop.js' type='text/javascript'/>
Τώρα για Αναζήτηση]]> </ b: skin>
Ακριβώς πάνω από το επικολλήσετε μία από τις ακόλουθες μορφές
Για κυκλική χρησιμοποιήσετε αυτόν τον κωδικό:
/* ----- FoulsCode 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RB0DgWlaSoSpIvdwbluTHRjnpFsUSq_TFrs8hAUwgVtU262Cc6l_TpmCZBBBHDjK0wbHhy0xpwFKC-uxzqqZ8iSjUBOMAYbUpn_c0Xh8hdzaWcOHvGBK37aMPCw86BQPcOdPEQ1UDADq/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;
}
Για ορθογώνιο χρησιμοποιήσετε αυτόν τον κωδικό:
/* ----- FoulsCode 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RB0DgWlaSoSpIvdwbluTHRjnpFsUSq_TFrs8hAUwgVtU262Cc6l_TpmCZBBBHDjK0wbHhy0xpwFKC-uxzqqZ8iSjUBOMAYbUpn_c0Xh8hdzaWcOHvGBK37aMPCw86BQPcOdPEQ1UDADq/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;
}
Τώρα μόνο ένα τελευταίο βήμα. Επικολλήστε τον παρακάτω κώδικα HTML, ακριβώς κάτω από <body>
<a href='#top' id='back-top' style='right:0px; display: inline;'/>
αποθήκευση και είναι έτοιμο!
Σχόλια