VN-Lives: Hướng dẫn tạo hiệu ứng hình ảnh khi con trỏ chuột chỉ vào sẽ di chuyển từ trái sang phải bằng JavaScript & CSS Animations.

Bài viết này sẽ hướng dẫn cách tạo một hiệu ứng hình ảnh động sẽ di chuyển từ trái sang phải, và khi không được con trỏ chuột chỉ vào thì nó sẽ tự đông quay về vị trí cũ.

Live Demo:

JavaScript & CSS Animations Image Effect Mouse Hover:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - JAVASCRIPT & CSS ANIMATIONS IMAGE EFFECT</title>

<style type='text/css'>
    body { font-size: .7em; font-family: Arial, Helvetica, "Liberation Sans", sans-serif; padding: 0 !important; }
img {
    -moz-transition: -moz-transform 1s ease-in;
    -webkit-transition: -webkit-transform 1s ease-in;
    -o-transition: -o-transform 1s ease-in;
    -ms-transition: -ms-transform 1s ease-in;
}
#anim.right {
    -moz-animation-name: bounce;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform: translate(400px);
    -moz-transition: none;

    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform: translate(400px);
    -webkit-transition: none;
}

@-moz-keyframes bounce {
from {
    -moz-transform: translate(0px);
    -moz-animation-timing-function: ease-in;
}
60% {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
}
73% {
    -moz-transform: translate(360px);
    -moz-animation-timing-function: ease-in;
}
86% {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
}
93% {
    -moz-transform: translate(380px);
    -moz-animation-timing-function: ease-in;
}
to {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
}
}

@-webkit-keyframes bounce {
from {
    -webkit-transform: translate(0px);
    -webkit-animation-timing-function: ease-in;
}
60% {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
}
73% {
    -webkit-transform: translate(360px);
    -webkit-animation-timing-function: ease-in;
}
86% {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
}
93% {
    -webkit-transform: translate(380px);
    -webkit-animation-timing-function: ease-in;
}
to {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
}
}
</style>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {

$(document.body).delegate( "img", "mouseenter", function() {
    var $this = $(this).addClass("right");
    setTimeout(function() {
        $this.removeClass("right");
    }, 2000);
});

});

});//]]>

</script>

</head>
<body>
<img id="anim" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPabh5qUEmRS5DZo7eupE8qm9dAqrWh1PPTYbcQqcvpvTBfqWa57BxQjWZHIQP1YgS9YulHOuNBiYDEl_1J-f8mj5ThptPcNC1tJPcTbx0qXwN8DAu0iRVu4IP-LX7q0Bx1a5S2HOJIVQ/s1600/icon_google_plus-300x300.png" width="75" height="75" />
</body>
</html>

VN-Lives

Hướng dẫn tạo hiệu ứng hình ảnh khi con trỏ chuột chỉ vào sẽ di chuyển từ trái sang phải bằng JavaScript & CSS Animations.

No comments:

Post a Comment