Блок с движущимися анимированными элементами
Вложений: 1
На странице есть блок с категориями брендов. На изображении привел пример, для понимания как это примерно выглядит. Голубые блоки это сами div'ы с картинками внутри, зеленый пунктир - это ось по которой должны двигаться элементы, красный прямоугольник - это область в которую попадает текущий блок и он увеличивается находясь в этой области. По идее блоки начинают вращаться в момент загрузки страницы, когда юзер подводит курсор к левой стороне - элементы вращаются по часовой стрелке, и к правой - наоборот.
Дело в том, что я не работал никогда с анимацией, подскажите куда рыть чтобы запилить это, или может быть есть что-то реализованное и можно адаптировать это под себя? |
Sanu0074,
Для начала - очень грубый простой пример
<!DOCTYPE html >
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
@keyframes rotate {
from { top: 100px;
left: 400px;
height: 10px;
width: 10px}
12% { top: 100px;
left:470px;}
25% { top: 150px;
left:500px;
height: 50px;
width: 50px}
38% { top: 200px;
left:470px;}
50% { top: 200px;
left: 400px;
height: 100px;
width: 100px}
62% { top: 200px;
left:330px;}
75% { top: 150px;
left: 300px;
height: 50px;
width: 50px}
88% { top: 100px;
left:330px;}
to { top: 100px;
left: 400px;
height: 10px;
width: 10px}
}
.move
{ position: absolute;
animation: rotate 8s infinite linear;
}
</style>
<script>
$(document).ready(function () {
$('#i1').addClass('move');
setTimeout(function () { $('#i2').addClass('move') }, 2000);
setTimeout(function () { $('#i3').addClass('move') }, 4000);
setTimeout(function () { $('#i4').addClass('move') }, 6000)
});
</script>
</head>
<body>
<img id="i1" src="http://javascript.ru/cat/list/event.gif" >
<img id="i2" src="http://javascript.ru/cat/list/dom.gif" >
<img id="i3" src="http://javascript.ru/cat/list/mobile.jpg" >
<img id="i4" src="http://javascript.ru/cat/list/donkey.gif" >
</body>
</html>
|
Sanu0074,
Круговое меню |
| Часовой пояс GMT +3, время: 07:32. |