Создайте адаптивные переворачивающиеся карточки с параллаксом используя HTML и CSS

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

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

Создайте адаптивные переворачивающиеся карточки с параллаксом используя HTML и CSS

Подробный обзор проекта

Этот эффект создается путем объединения 3D-преобразований и переходов CSS. Структура HTML обычно состоит из элемента-контейнера и двух дочерних элементов: одного для лицевой и обратной стороны карточки.

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

HTML-структура

Начнем с создания HTML-структуры. Сначала создается контейнер с четырьмя столбцами, каждый из которых содержит карточку с лицевой и оборотной стороны. На лицевой стороне карточки содержится абзац и текст, а на оборотной стороне — более длинный текст.

Далее, тег div с оболочкой класса — это самый внешний контейнер, который охватывает все столбцы. Внутри этого тега div находится еще один тег div с классом cols, который содержит четыре столбца.

Каждый столбец создается с использованием тега div с классом col. Атрибут ontouchstart определяет функцию JavaScript, которая будет вызываться, когда пользователь касается карты, включая и выключая класс наведения.

HTML КОД:

<div class="wrapper">
  <div class="cols">

			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images6.alphacoders.com/112/thumbbig-1125041.webp)">
						<div class="inner">
							<p>Yoru</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>

			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images8.alphacoders.com/109/thumbbig-1093220.webp)">
						<div class="inner">
							<p>Viper</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>

			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images7.alphacoders.com/112/thumbbig-1123608.webp)">
						<div class="inner">
							<p>Sova</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>

			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images7.alphacoders.com/109/thumbbig-1091959.webp)">
						<div class="inner">
							<p>Omen</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>

			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images2.alphacoders.com/120/thumbbig-1204924.webp)">
						<div class="inner">
							<p>Neon</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>


			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images8.alphacoders.com/110/thumbbig-1101846.webp)">
						<div class="inner">
							<p>Diligord</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
						  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>

			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://oyster.ignimgs.com/mediawiki/apis.ign.com/valorant/9/91/KillJoy_Wallpapers_blue1.jpg?width=1024)">
						<div class="inner">
							<p>Killjoy</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>

			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images7.alphacoders.com/110/thumbbig-1101269.webp)">
						<div class="inner">
							<p>Jett</p>
              <span>Lorem ipsum</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
						</div>
					</div>
				</div>
			</div>

	</div>
</div>

Лицевая сторона карточки создается с использованием тега div с классом front, у которого есть свойство фонового изображения, которому в настоящее время присвоен пустой URL-адрес. Вы можете поместить в него любое изображение, на форму открытки это не повлияет.

Обратная сторона карточки создается с использованием тега div с обратной стороной класса. Внутри тега div с обратной стороной класса находится еще один тег div с внутренним классом. Внутренний элемент div содержит один элемент абзаца (p) с текстом Lorem Ipsum. В нем можно что-то описать, а можно и о ком-то написать.

Когда пользователь наводит курсор на лицевую часть карточки, класс наведения переключается в родительском элементе div col с помощью функции JavaScript ontouchstart, указанной для каждого элемента col. Это приведет к тому, что карта перевернется, обнажая обратную сторону карты с более длинным описанием.

Стилизация с помощью CSS

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

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

Далее идет .cols — это селектор классов, который применяется к группе элементов, которые будут отображаться в макете flexbox. в этом режиме отображения элемента используется гибкий контейнер, так что его дочерние элементы можно упорядочить с помощью свойств flexbox.

CSS КОД:

@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&display=swap');

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body{
  background-image: linear-gradient( 109.6deg,  rgba(116,18,203,1) 11.2%, rgba(230,46,131,1) 91.2% );
  background-repeat: no-repeat;
  background-size: auto;
  background-size: 100% 500rem;
}

.wrapper{
  width: 90%;
  margin: 0 auto;
  max-width: 80rem;
}

.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}

.container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  border-radius: 10px;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-align: center;
  min-height: 280px;
  height: auto;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
}

.back{
  background: #cedce7;
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}
}

.front:after{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: 0.5;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.container .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 2.9rem;
  margin-bottom: 2rem;
  position: relative;
  font-family: 'Edu NSW ACT Foundation', cursive;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

Наконец, .col — это селектор класса, который применяется к каждому из дочерних элементов внутри контейнера .cols. ширина Устанавливает ширину каждого столбца равной 25% ширины контейнера .cols минус 2rem. Функция Calc() используется для вычитания 2rem из расчета ширины.

А .front и .back определяют переднюю и обратную сторону карты соответственно. Они устанавливают фон, радиус границы, высоту и размер шрифта карты. Они также используют переходы для анимации свойства преобразования при наведении на карту.

.front:after создает полупрозрачное наложение на лицевую сторону карты. и .inner стилизует содержимое внутри карточки, устанавливая его положение и отступы.

.container .back и .container .front используют преобразования для поворота задней и передней граней на 180 градусов вокруг оси Y, делая их невидимыми, когда они не должны отображаться.

.front .inner p стилизует текстовое содержимое карточки, устанавливая размер шрифта, поле нижнего края и семейство шрифтов элемента абзаца.


0 Комментарии