Анимированные плитки

@Egor_Zhurawski · Регистрация: 08.08.2017

Студворк — интернет-сервис помощи студентам

Подскажите пожалуйста плагин, который реализовывает анимированные плитки на сайте

Пример анимированной плитки: https://cnc.by/ практически в самом конце страницы, раздел "команда"

Нашел один из плагинов MetroJs ( http://www.drewgreenwell.com/projects/metrojs ), но, у меня какой-то косяк с разными переключениями плиток, т.е., я хочу чтобы один блок с слева на право двигался, а уже следующий сверху вниз и т.д., возникает мол конфликт и габела..

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="carousel-plitka d-flex">
  <div id="tile1" class="live-tile" data-direction="horizontal" data-delay="5000">
    <div class="wide-slide">
      <img src="img/plitka/1.jpg" alt="1">
      <img src="img/plitka/2.jpg" alt="2">
    </div>
  </div>
 
<div id="tile2" data-mode="carousel" data-start-now="true" class="live-tile" data-direction="vertical" data-delay="3000">        
  <div><img class="full" src="img/plitka/4.jpg" alt="1" /></div>
    <div><img class="full" src="img/plitka/3.jpg" alt="2" /></div>
  </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var idx = 0;
$("#tile1").liveTile(
    {
      mode:'slide',
      stops:"-183px,0",
      animationComplete: function ( tileData, $front, $back ) {
        idx += 1;
        if ( idx == tileData.stops.length -1 )
        {
            window.setTimeout(function(){
                $front.fadeOut(function(){
                    $front.css( { left: '0px' } ); // reset the front tile position
                    window.setTimeout(function(){                 
                        $front.fadeIn();                    
                    }, tileData.speed); // delay for speed
                });
            }, tileData.delay - tileData.speed);  // the amt of time before the fade
            idx = -1; // keep the count evened out
        }
        
      }
    }
);
 
$("#tile2").liveTile();

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.live-tile{
    height:175px;
    width:175px;
    position: relative;
    overflow: hidden;
}
#tile1 div.wide-slide {
    width:600px; /* 4 150px wide images */
}
 
#tile1 div.wide-slide>img { 
    display:block; 
    float:left; 
    position: relative;
    overflow: hidden;
}
 
.carousel-plitka {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

@Уф · 21.09.2020, 11:05

посмотри в код станицы там есть скрипт и разметка

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
    (function ($){
        $(document).ready(function(){
 
            var curr = ["2231","200","2227","205","209","1053","190","203","2224","192","230","194","519","218","212","204","210","3511","3508","219","214","3509","3507","217",];
            var free = ["198","193","199","208","216","202","187","517","3512","220","518","197","211","1052","213","2241","56","188","53","206","2230","201","195",];
            
            var list = {2231 : {
            name: 'Денис',
            pos: 'Художник-дизайнер',
            image: '/upload/resize_cache/iblock/d1d/160_160_2/d1dc0644d1d4acf0aa28f1a093d06dfa.jpg',
        },....
};
 
            setInterval(function(){
 
                var id_del = Math.floor(Math.random() * curr.length);
                var id_add = Math.floor(Math.random() * free.length);
                var item_del = curr[id_del];
                var item_add = free[id_add];
                curr.splice(id_del, 1);
                free.splice(id_add, 1);
                curr.push(item_add);
                free.push(item_del);        
 
                var rand  = Math.floor(Math.random() * 4 + 1);
                var cl;
                switch(rand){
                    case 1: cl = 'transform: translateX(100%)'; break;
                    case 2: cl = 'transform: translateX(-100%)'; break;
                    case 3: cl = 'transform: translateY(100%)'; break;
                    case 4: cl = 'transform: translateY(-100%)'; break;
                    default: break;
                };
                    
                var data = "<div class='wrapper' style='"+cl+"'><img  src='"+list[item_add].image+"' width='160' height='160'><div class='info'><div class='name'>"+list[item_add].name+"</div><div class='pos'>"+list[item_add].pos+"</div></div></div>";
                
                var del = $(".item-small[data-id="+item_del+"]");
                var w = del.width();
                var h = del.height();
                del.css({
                    'background' : 'url('+ $(".item-small[data-id="+item_del+"] img").attr("src") +')',
                    'filter' : 'grayscale(100%)',
                    '-webkit-filter': 'grayscale(100%)',
                }).html(data).attr("data-id", item_add);
                $(".item-small[data-id="+item_add+"] .wrapper").transition({x: '0%', y: '0%'}, 600, 'ease');
                setTimeout(function(){
                    $(".item-small[data-id="+item_add+"]").css({
                        'filter' : 'grayscale(0%)',
                        '-webkit-filter': 'grayscale(0%)',
                    });
                }, 600);
 
            }, 750);
 
 
        });
 
    })(jQuery);

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

Анимированные плитки

Решение