Форум

Sanu0074 · #1 (**permalink**) 07.04.2016, 12:54

На странице есть блок с категориями брендов. На изображении привел пример, для понимания как это примерно выглядит. Голубые блоки это сами div'ы с картинками внутри, зеленый пунктир - это ось по которой должны двигаться элементы, красный прямоугольник - это область в которую попадает текущий блок и он увеличивается находясь в этой области. По идее блоки начинают вращаться в момент загрузки страницы, когда юзер подводит курсор к левой стороне - элементы вращаются по часовой стрелке, и к правой - наоборот.

Дело в том, что я не работал никогда с анимацией, подскажите куда рыть чтобы запилить это, или может быть есть что-то реализованное и можно адаптировать это под себя?

Dilettante_Pro · #2 (**permalink**) 07.04.2016, 18:53

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>

рони · #3 (**permalink**) 07.04.2016, 19:12

Sanu0074,
Круговое меню

Форум

Справочник

Discord чат

Курсы javascript