Анимации для переключения сетки изображений
Сегодня мы хотели бы поделиться некоторыми фантазиями по поводу анимации для эскизов сетки изображений. Есть много возможностей, когда речь идет о таком роде эффектов, но не все из них хорошо ложатся при нанесении на несколько элементов , как сетка изображений. Существует не так много места, и мы должны рассмотреть порядок расположения элементов для эффекта. Интересно то, что мы можем играть с задержками , усиливая впечатления от просмотра.
Красивые иллюстрации , используемые в демо созданы талантливым Исаак Монтемайор .
Обратите внимание, что мы не использовали js для листания фотографий.
В демо мы используем неупорядоченный список с изображениями завернутый в якорь. В зависимости от класса списка, мы будем применять определенный эффект.
Активный класс вызовет анимации и первый якорь исчезнет проиграв определенную анимацию ключевых кадров.
В каждой демо странице используются разные классы для анимаций. Выберете нужную для себя и замените классы в списке картинок.
Далее переключатели. Сейчас реализовано лишь переключение по 4 из ссылок. Что бы увеличить количество вам нужно будет подправить js файл который реализует подстановку и удаление классов анимаций.
Шаг 2. CSS
Дадим пример для эффекта "scale и rotate”. В этом случае, активный класс будет "scaleRotateOut”. tt-empty используется для того, чтобы определить был ли элемент пуст до данного момента. В этом случае, не убираем ссылку:
У нас есть дополнительная ссылка появится при другой анимации. В этом случае, элемент изначально был пуст, так что нам нужно обработать это следующим образом:
Если ссылка была добавлена в элемент, то просто плавно отобразим его:
последним шагом мы будем осуществлять анимацию:
Следует отметить, что не все последние браузеры поддерживают данные эффекты, по этому данные эффекты относятся к концептам.
Тем более забудьте про IE, но IE10 и выше поддерживают эффекты!
Красивые иллюстрации , используемые в демо созданы талантливым Исаак Монтемайор .
Обратите внимание, что мы не использовали js для листания фотографий.
В демо мы используем неупорядоченный список с изображениями завернутый в якорь. В зависимости от класса списка, мы будем применять определенный эффект.
Активный класс вызовет анимации и первый якорь исчезнет проиграв определенную анимацию ключевых кадров.
Шаг 1. HTML
В каждой демо странице используются разные классы для анимаций. Выберете нужную для себя и замените классы в списке картинок.
Код
<ul class="tt-grid tt-effect-fall tt-effect-delay">
<li><a href="#"><img src="img/1.jpg" alt="img01"></a></li>
<li><a href="#"><img src="img/2.jpg" alt="img02"></a></li>
<li><a href="#"><img src="img/3.jpg" alt="img03"></a></li>
<li><a href="#"><img src="img/4.jpg" alt="img04"></a></li>
<li><a href="#"><img src="img/5.jpg" alt="img05"></a></li>
<li><a href="#"><img src="img/6.jpg" alt="img06"></a></li>
</ul>
<li><a href="#"><img src="img/1.jpg" alt="img01"></a></li>
<li><a href="#"><img src="img/2.jpg" alt="img02"></a></li>
<li><a href="#"><img src="img/3.jpg" alt="img03"></a></li>
<li><a href="#"><img src="img/4.jpg" alt="img04"></a></li>
<li><a href="#"><img src="img/5.jpg" alt="img05"></a></li>
<li><a href="#"><img src="img/6.jpg" alt="img06"></a></li>
</ul>
Далее переключатели. Сейчас реализовано лишь переключение по 4 из ссылок. Что бы увеличить количество вам нужно будет подправить js файл который реализует подстановку и удаление классов анимаций.
Код
<nav>
<a class="tt-current"></a>
<a></a>
<a></a>
<a></a>
</nav>
<a class="tt-current"></a>
<a></a>
<a></a>
<a></a>
</nav>
Шаг 2. CSS
Дадим пример для эффекта "scale и rotate”. В этом случае, активный класс будет "scaleRotateOut”. tt-empty используется для того, чтобы определить был ли элемент пуст до данного момента. В этом случае, не убираем ссылку:
Код
.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:first-child {
animation: scaleRotateOut 0.6s forwards;
}
animation: scaleRotateOut 0.6s forwards;
}
У нас есть дополнительная ссылка появится при другой анимации. В этом случае, элемент изначально был пуст, так что нам нужно обработать это следующим образом:
Код
.tt-effect-scalerotate.tt-effect-active li a:nth-child(2),
.tt-effect-scalerotate.tt-effect-active li.tt-empty a {
opacity: 0;
animation: scaleRotateIn 0.6s forwards;
}
.tt-effect-scalerotate.tt-effect-active li.tt-empty a {
opacity: 0;
animation: scaleRotateIn 0.6s forwards;
}
Если ссылка была добавлена в элемент, то просто плавно отобразим его:
Код
.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:only-child {
animation: fadeOut 0.6s forwards;
}
animation: fadeOut 0.6s forwards;
}
последним шагом мы будем осуществлять анимацию:
Код
@keyframes scaleRotateOut {
100% { opacity: 0; transform: scale(0); }
}
@keyframes scaleRotateIn {
0% { opacity: 0; transform: translateX(50%) translateY(100%) rotate(25deg); }
100% { visibility: visible; opacity: 1; transform: translateX(0%) translateY(0%) rotate(0deg); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
100% { opacity: 0; transform: scale(0); }
}
@keyframes scaleRotateIn {
0% { opacity: 0; transform: translateX(50%) translateY(100%) rotate(25deg); }
100% { visibility: visible; opacity: 1; transform: translateX(0%) translateY(0%) rotate(0deg); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
Следует отметить, что не все последние браузеры поддерживают данные эффекты, по этому данные эффекты относятся к концептам.
Тем более забудьте про IE, но IE10 и выше поддерживают эффекты!
-
FalleN -
6154 -
1 -
232
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...