Простая анимация переворота карты
Анимации могут оживить самые скучные веб-сайты (и, с другой стороны, отнять у некоторых действительно замечательных, если на них слишком много специй). Простая анимация, которую можно перевести во множество различных приложений и, надеюсь, оживить ваш веб-сайт (не добавляя слишком много специй), — это переворачивание карты.
Существует несколько способов реализовать переворот карты, и многие учебные пособия на YouTube сопровождают их. В зависимости от конкретных потребностей и деталей того, что вы переворачиваете, ваши методы могут различаться — но это простой вариант, который отлично сработал для меня, но урезанный, чтобы не включать все мои странно выбранные имена классов и ненужные атрибуты CSS.
Поскольку мне пришлось закодировать это, чтобы написать об этом, вот пример репозитория со всем кодом и сайт git hub pages, чтобы проверить код для себя.
Механика, лежащая в основе этого метода реализации, предполагает минимум javascript, но без знакомства максимум путаницы. Примечание. В некоторых случаях вы можете реализовать это без Javascript, однако в конечном итоге вы обнаружите, что это требует больше работы, чем требуется JavaScript. Позвольте мне сказать следующее: если вы хотите, чтобы карта переворачивалась или чтобы карта переворачивалась при щелчке, JS — это то, что вам нужно. Все, для чего вы используете JS, — это управление классом с помощью переключателя.
Шаг первый — строим скелет:
Вы получаете div, вы получаете div, вы все получаете div. Я построил внешний основной контейнер, который сначала содержал все мои карты (не обязательно), именно так, как я это сделал, а затем еще один «контейнер» div в детстве. У каждого из этих детей затем был свой ребенок, «карта», у которого, в свою очередь, было два ребенка, «передний» и «задний». Для демонстрации я в конце концов добавил еще несколько карт!
‹div class="card-container"›
Первый div-контейнер (не основной внешний) — это просто div, представляющий перспективу карты. Дверная рама, кости и т.
‹класс div="карта"›
Следующая «карточка» div будет холстом, на котором нарисованы лицевая и оборотная стороны.
‹класс div = «спереди»› / ‹класс div = «назад»›
Передний и задний разделы — это просто то, что вы хотели бы видеть на карточках спереди или сзади.
Шаг второй — сборка кожи:
Эта часть, по сути, заняла у меня больше всего времени, чтобы все исправить. Мои потребности были очень конкретными, как и наши ваши, но это общий план того, чего ожидать. Имейте в виду, что основной внешний контейнер в стилистических целях содержит все карты, которые нужно перевернуть.
.card_container {
«.card_container» — это контейнер, который содержит карту (отсюда и название), и будет служить основой для карты.
}
.карта {
Сразу ниже находится сама .card, которая переворачивается. Обратите внимание, стили перехода и трансформации обязательны, но время перехода зависит от вас. На мой взгляд, 1 секунда кажется правильной. Preserve-3d — это то, что позволяет карте существовать в нашем трехмерном мире. В этом примере это может быть не сразу очевидно, но у MDN есть отличный визуальный пример с использованием куба.
}
.card div {
Следующий селектор на этой карточке, «.card div», более специфичен для отображения его содержимого. Все атрибуты необходимы для работы флип-визуала. Без позиции элемент будет двигаться, когда вы попытаетесь перевернуть его. Без атрибута backface-visibility обратная сторона элемента (обычно невидимая в 2d) станет видимой.
}
.карта .фронт {
Здесь у нас есть фактическое содержимое того, что будет отображаться впереди, без каких-либо причудливых CSS, кроме цвета фона, который я выбрал наугад.
}
.карта .назад {
Здесь у нас есть фактическое содержимое того, что будет отображаться сзади, в дополнение к атрибуту преобразования, который позволяет вращать карту, и другому случайному цвету фона, который, как мне кажется, будет хорошим контрастом. Лучше, чем обычный красный против синего, вы увидите еще где. Очень оригинальный.
}
.card.flipped {
.card.flipped выбирает перевернутый класс. В частности, что-то с этим классом будет вращаться. В данном случае карта с этим классом, который является отличным переходом к финальной части — мозгу операции — javascript.
}
Шаг третий — мозги:
В файле index.js (или как бы вы его ни называли) должны быть по крайней мере две вещи при использовании ванильного javascript: селектор запросов и прослушиватель событий.
Эти строки JS в комбинации будут нацелены на все карты и добавят прослушиватель, чтобы при «щелчке» — classList переключался на перевернутый. Звучит знакомо, верно? Затем CSS включится, чтобы выполнить поворот на 180 градусов по оси Y, в результате чего вы настроите флип!
/* .card:hover{
В качестве примечания: если вы хотите выполнить простое перелистывание при наведении мыши вместо щелчка, это можно сделать с помощью прослушивателя наведения мыши или с помощью чистого маршрута CSS «.card:hover».
}*/
И вот она, переворачивающаяся карта! Лично я все еще новичок в CSS-анимациях, и учиться этому было весело. В проекте, в котором я научился их использовать, было немного больше анимации и немного больше карточек. Быстрый поиск в Google приведет вас к отличным кодам с похожими анимациями. Привет всем, кто поделился своим кодом до меня. Я рад видеть, куда это меня приведет, поскольку я рискну больше работать с интерфейсом!
