Блог

У меня есть фоновое изображение в виде карты. Я хочу, чтобы список отзывов (абсолютно позиционированных divs) появлялся и исчезал один за другим на указанной карте. Как только все будут показаны, это нужно повторить.

Как бы я реализовал это с помощью анимации css3?

Вы можете использовать анимации CSS3 и, отложив их, вы можете создать анимацию полного элемента, а затем использовать JS setInterval для перезапуска анимации. Это часто используемый способ создания объявлений AdWords.

Хорошей библиотекой с предопределенными анимациями является animate.css, и вам нужно рассчитать время прохождения всех анимаций и их завершения и установить интервал, который удаляет класс и добавляет его обратно каждый раз, когда выполняются анимации (общее время, необходимое для завершения всех анимаций).

трюк, который мне нравится использовать, заключается в переборе каждого элемента, который вы хотите показать, и смещении анимации на отрезок времени * индекс элемента. Вы могли бы обернуть это в функцию и вызвать ее после времени * длина массива элементов. Это фактически зациклило бы ее навсегда. Некоторый общий код, основанный на полусекундных анимациях, будет выглядеть как:

  function runThrough() {
        $('.your-elements').each(function(i,v) {
            var current = $(this);
            setTimeout(function() { 
                // do your animation e.g. $(current).fadeIn(500);            
            }, i * 500);        
        });
        setTimeout(runThrough(), $('.your-elements').length * 500 );
    }