Как можно реализовать анимацию на сайте?

310

24 июня 2018, 08:50

Всем привет!
Задался я вопросом создания анимации некоего планшета который состоит из 3 частей.

Элемент 1 - это корпус
Элемент 2 - это картинка некоего "кода"
Элемнты 3 - это картинка интерфейса

Анимация:
Сначала все три элемнты складываются вместе в один будто целый планшет Когда сайт открылся тогда наверх поднимаются 2 и 3 элемента и слегка пульсируют над элементом 1

Значит как правильнее создать эту анимацию?
Какие есть способы ?
Буду благодарен за помощь!

Answer 1

Как раз сегодня наткнулся на одном из сайтов на такой эффект. Реализация достаточно простая. Картинки изначально нарисованы как 3д и в перспективе. Для такого простого эффекта вполне достаточно одного лишь ксс. Код не мой, просто скопировал с того сайта где увидел. Эффект срабатывает при наведении. Желательно смотреть в развернутом виде.

.concept__cards { 
  display: inline-block; 
  margin-top: 75px; 
  width: 1024px; 
  height: 595px; 
  margin-bottom: 85px; 
} 
 
.concept__cards:hover .concept__card-1 { 
  transform: translateY(-60px); 
} 
.concept__card-1 { 
  transition-timing-function: ease-in-out; 
  transition-property: transform; 
  transition-duration: 0.5s; 
  position: absolute; 
  padding-top: 105px; 
  height: 475px; 
  width: 1024px; 
  z-index: 4; 
  background: url("http://i.piccy.info/i9/920b48124d1069dce70f2d53419dbab3/1528064757/56261/1248849/screen.png") no-repeat 50% 100%; 
} 
 
.concept__cards:hover .concept__card-2 { 
  transform: translateY(-40px); 
} 
.concept__card-2 { 
  transition-timing-function: ease-in-out; 
  transition-property: transform; 
  transition-duration: 0.5s; 
  position: absolute; 
  padding-top: 135px; 
  height: 475px; 
  width: 1024px; 
  z-index: 3; 
  background: url("http://i.piccy.info/i9/920b48124d1069dce70f2d53419dbab3/1528064757/56261/1248849/screen.png") no-repeat 50% 100%; 
} 
 
.concept__cards:hover .concept__card-3 { 
  transform: translateY(-20px); 
} 
.concept__card-3 { 
  transition-timing-function: ease-in-out; 
  transition-property: transform; 
  transition-duration: 0.5s; 
  position: absolute; 
  padding-top: 165px; 
  height: 475px; 
  width: 1024px; 
  z-index: 2; 
  background: url("http://i.piccy.info/i9/920b48124d1069dce70f2d53419dbab3/1528064757/56261/1248849/screen.png") no-repeat 50% 100%; 
} 
 
.concept__cards:hover .concept__card-4 { 
  transform: translateY(0px); 
} 
.concept__card-4 { 
  transition-timing-function: ease-in-out; 
  transition-property: transform; 
  transition-duration: 0.5s; 
  position: absolute; 
  padding-top: 195px; 
  height: 475px; 
  width: 1024px; 
  z-index: 1; 
  background: url("http://i.piccy.info/i9/920b48124d1069dce70f2d53419dbab3/1528064757/56261/1248849/screen.png") no-repeat 50% 100%; 
} 
 
@keyframes animation-1 { 
  0% { 
    transform: translate(0, 0); 
  } 
  33.33% { 
    transform: translate(-5px, -3px); 
  } 
  66.66% { 
    transform: translate(0, -6px); 
  } 
  100% { 
    transform: translate(0, 0); 
  } 
} 
@keyframes animation-2 { 
  0% { 
    transform: translate(0, 0); 
  } 
  33.33% { 
    transform: translate(5px, 3px); 
  } 
  66.66% { 
    transform: translate(0, 6px); 
  } 
  100% { 
    transform: translate(0, 0); 
  } 
} 
@keyframes animation-3 { 
  0% { 
    transform: translate(0, 0); 
  } 
  33.33% { 
    transform: translate(0, 3px); 
  } 
  66.66% { 
    transform: translate(0, 6px); 
  } 
  100% { 
    transform: translate(0, 0); 
  } 
} 
@keyframes animation-4 { 
  0% { 
    transform: translate(0, 0); 
  } 
  33.33% { 
    transform: translate(3px, -4px); 
  } 
  66.66% { 
    transform: translate(0, -8px); 
  } 
  100% { 
    transform: translate(0, 0); 
  } 
}

<div class="content"> 
<div class="concept__cards"> 
<div class="concept__card-1"></div> 
<div class="concept__card-2"></div> 
<div class="concept__card-3"></div> 
<div class="concept__card-4"></div> 
</div> 
</div>