wb_sunny

Как сделать Flipping эффект для блока на CSS и JS

12 840 любопытных

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

Так же предлагаю взглянуть на следующие уроки:

Ну а сейчас давайте подробнее.

Демо Ι Скачать

HTML разметка

Она довольно проста и не большая. Она состоит из div, которым задан соответствующий класс, которому позже зададутся стили CSS.

<div class="card effect__EFFECT">
<div class="card__front"><span class="card__text">front</span></div>
<div class="card__back"><span class="card__text">back</span></div>
</div>
<!-- /card -->

Обратите внимание на на класс EFFECT там будут размещать другие классы random, hover или click, в зависимости от того какой из трёх эффектов мы захотим использовать.

Сейчас давайте взглянем как выглядят стили CSS

CSS

.card {
position: relative;
float: left;
padding-bottom: 25%;
width: 25%;
text-align: center;
}

.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.card__front,
.card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.card__front {
background-color: #ff5078;
}

.card__back {
background-color: #1e1e1e;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

Тут мы будем использовать 4 блока, которые расположены горизонтально вряд. Так же зададим им ширину в 25%. Здесь же мы задаём некоторые правила для передней и задней части блока, зададим им разные цвета ,чтобы было понято где какая сторона.

Теперь давайте взглянем ещё подробнее на все три эффекта, которые были перечислены выше.

Срабатывание при наведении

Это довольно простой эффект, в котором мы используем псевдо — класс :hover для достижения желаемого эффекта. Когда мы наведём на блок, он должен перевернуться на 180 градусов. Вот эта часть стилей используется для достижения подобного эффекта:

.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
<h2>Срабатывание по клику</h2>
В этот раз мы хотим, чтобы эффект срабатывал при клике. В данном случае мы должны применить небольшой скрипт для проверки CSS классов, чтобы всё работало правильно. Вот этот CSS код отвечает за этот эффект:

.card.effect__click.flipped .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}

А это сам код JS:

(function() {
var cards = document.querySelectorAll(“.card.effect__click”);
for ( var i = 0, len = cards.length; i &lt; len; i++ ) {
var card = cards[i];
clickListener( card );
}
function clickListener(card) {
card.addEventListener( "click", function() {
var c = this.classList;
c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
});
}
})();

Случайное повторение эффекта по кругу

Это единственный эффект, который требует немного внести дополнения в HTML разметку. Так как мы собираемся добавить флип эффект в случайный период времени. И конечно же будет совершенно другой JS код. А сейчас давайте взглянем на разметку HTML:

<div class="card effect__random" data-id="1">
  <div class="card__front">
    <span class="card__text">front</span>
  </div>
  <div class="card__back">
    <span class="card__text">back</span>
  </div>
</div><!-- /card -->

А вот как выглядит CSS код:

.card.effect__random.flipped .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.card.effect__random.flipped .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}

И теперь давайте посмотрим на JS код. Здесь мы зададим диапазон в 1 и 3 секунды, это то время через которое будет срабатывать эффект каждый раз:

(function() {
// cache vars
var cards = document.querySelectorAll(“.card.effect__random”);
var timeMin = 1;
var timeMax = 3;
var timeouts = [];
// loop through cards
for ( var i = 0, len = cards.length; i &lt; len; i++ ) {
var card = cards[i];
var cardID = card.getAttribute("data-id");
var id = "timeoutID" + cardID;
var time = randomNum( timeMin, timeMax ) * 1000;
cardsTimeout( id, time, card );
}
// timeout listener
function cardsTimeout( id, time, card ) {
if (id in timeouts) {
clearTimeout(timeouts[id]);
}
timeouts[id] = setTimeout( function() {
var c = card.classList;
var newTime = randomNum( timeMin, timeMax ) * 1000;
c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
cardsTimeout( id, newTime, card );
}, time );
}
// random number generator given min and max
function randomNum( min, max ) {
return Math.random() * (max - min) + min;
}
})();

Разнообразие Flipping эффекта

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

Надеюсь, что Вам понравился данный урок! Если Вам будет что либо не понятно, обязательно завдавайте вопросы в комментариях!

Спасибо http://speckyboy.com

#Похожее: