Showing posts with label animation. Show all posts

Cara Membuat Animasi Scroll ke Atas dan ke Bawah

Ketika sebuah halaman web memiliki artikel atau konten yang sangat panjang untuk dibaca, untuk mempermudah pembaca kembali ke posisi paling atas atau ke bawah, kita sebaiknya menggunakan "Animated Scroll to Top" dan "Animated Scroll to Bottom". Berikut yang saya dapat contohkan:

//ASSET IMAGES

//CSS

/*scrollToTop*/

.scrollToTop{

text-align:center;

background: transparent;

font-weight: bold;

color: #444;

text-decoration: none;

position: fixed;

top: 50%;

margin-top: -40px;

right: 0px;

display: none;

opacity: .7;

float: right;

}

.scrollToTop img {width: 50%}

.scrollToTop:hover{

text-decoration:none;

}

.scrollToBottom{

text-align:center;

background: transparent;

font-weight: bold;

color: #444;

text-decoration: none;

position: fixed;

top: 50%;

margin-top: 40px;

right: 0px;

display: none;

opacity: .7;

float: right;

}

.scrollToBottom img {width: 50%}

.scrollToBottom:hover{

text-decoration:none;

}

/*scrollToBottom*/

//VIEW

</footer>

//JQUERY & JAVASCRIPT

$(function () {

var scrollHeight = $(document).height() - $(window).height() - $(window).scrollTop();

//var scrollBottom = $(window).scrollBottom();

$(window).scroll(function () {

if ($(this).scrollTop() > 300) {

$('.scrollToTop').fadeIn();

} else {

$('.scrollToTop').fadeOut();

}

if ($(this).scrollBottom() === scrollHeight) {

$('.scrollToBottom').fadeOut();

} else {

$('.scrollToBottom').fadeIn();

}

});

$('.scrollToTop').click(function () {

$('html, body').animate({scrollTop: 0}, 800);

return false;

});

$('.scrollToBottom').click(function () {

$('html, body').animate({scrollTop: $('footer').offset().top}, 'fast');

return false;

});

</script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Beberapa Link Membuat Animasi dengan CSS

Add Comment

Banyak sekali cara membuat animasi dengan menggunakan css, berikut beberapa referensi yang bisa kamu lihat:

http://www.nyekrip.com/nyekrip-yuk/index.php?fdata=skrip-cara-membuat-animasi-dengan-css-3-dasar
to be continue...

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cara Membuat Animasi Scroll ke Atas

1 Comment

Ketika sebuah halaman web memiliki artikel atau konten yang sangat panjang untuk dibaca, untuk mempermudah pembaca kembali ke posisi paling atas, kita sebaiknya menggunakan "Animated Scroll to Top". Berikut yang saya dapat contohkan:

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Back To Top</title>
<style type="text/css">
/* Back to top button */
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
@media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
</style>
</head>

<body>
...content....
<a href="#0" class="cd-top">Top</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function ($) {
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');

//hide or show the "back to top" link
$(window).scroll(function () {
($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if ($(this).scrollTop() > offset_opacity) {
$back_to_top.addClass('cd-fade-out');
}
});

//smooth scroll to top
$back_to_top.on('click', function (event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration
);
});
});
</script>

</body>

</html>

Sumber: codyhouse[dot]co

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.