В данном уроке мы продолжим рассматривать возможности CSS, и те возможности которые можно с ним использовать. Берем длинное изображение, начальная и конечная части которого идентичны. Суть данной функции в том, что изображения плавно скользят в черно-белом колорите, а  при наведении курсора мыши, скорость прокрутки изображений увеличивается, при этом изображения становятся цветными. Данный прием интересен широтой своего применения, так как изображения можно заменить на любой другой необходимый контент, давайте посмотрим как это выглядит..


Для этого просмотрим как будет выглядеть наш исходный результат:

Для начала создания нам потребуется только внешний контейнер с относительным позиционированием и скрытием того, что выступает за границы. Также понадобится внутренний контейнер, в котором будет происходить анимация, будем использовать следующий код:

Стилизируем наши контейнеры CSS стилем:

Вот тут возникает интересная ситуация, приведенный выше код должен работать нормально, но мы можем улучшить производительность (по крайней мере, в браузерах семейства WebKit / Mobile WebKit) , применив при этом translateX вместо left.

Рассмотрим наши эффекты слайдера, которые будут срабатывать при наведении курсора мыши:

  • Увеличиваться скорость проигрывания слайдов.
  • Изображение будет становиться цветным.
Тут следует обратить внимание, если указать новое время скольжения свойств, то браузер будет воспринимать как немедленное действие, и осуществлять не плавную прокрутку, а рывок.

Далее, чтобы сделать  Мы будем использовать трансформации, чтобы сделать переход плавным.

Стилизируем его следующим образом:

Так как в нашей галереи мы используем css спрайты, черно-белый медленный вариант будет размещаться сверху, а цветной быстрый — снизу.

На главную