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(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;
}


Για ορθογώνιο χρησιμοποιήσετε αυτόν τον κωδικό:


/* ----- 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(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;
} 


Τώρα μόνο ένα τελευταίο βήμα. Επικολλήστε τον παρακάτω κώδικα HTML, ακριβώς κάτω από <body>


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


αποθήκευση και είναι έτοιμο!


Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Εγγραφείτε για να λαμβάνετε τις σημαντικότερες ειδήσεις της ημέρας