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

Хотите увидеть код в действии? Ознакомьтесь с Codepen.

На прошлой неделе я наткнулся на статью Codrops, представляющую библиотеку под названием hover-effect, созданную Robin Delaporte. Это было очень просто в использовании и действительно хорошо работало.

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

Как это работает

Согласно статье о Codrops, эффект работает в три этапа.

  1. Примените изображение смещения к двум изображениям, между которыми мы будем переходить.
  2. Исчезновение между двумя изображениями
  3. Убрать смещение

Начиная

Для этого урока вам понадобится только один файл HTML или вы можете создать свой собственный CodePen. Для остальных примеров в руководстве я буду использовать один файл HTML.

Сначала мы создадим наш html файл. Создайте файл с именем index.html и откройте его в своем любимом редакторе кода.

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

<html>
    <head>
        <title>Distortion Hover Effect Example</title>
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">        
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js">
        </script>
        <script src="https://cdn.rawgit.com/robin-dela/hover-effect/master/js/hover.min.js">
        </script>
    </body>
</html>

Итак, что мы только что добавили?

  • Освальд: веб-шрифт Google, который мы будем использовать для нашего текста.
  • Three.js: библиотека WebGL, которую библиотека эффектов наведения использует для искажения.
  • TweenMax.js: библиотека GSAP, которая позволяет библиотеке эффектов наведения курсора создавать плавную анимацию.
  • Hover-Effect: библиотека, которая создает фактический эффект.

Добавление разметки

Теперь, когда у нас есть все необходимые внешние источники, мы можем приступить к созданию нашего div с полетной информацией. Идите вперед и добавьте этот div внутри тега body. Это вся наша разметка, которую мы будем использовать. Здесь ничего особенного.

<div class="ticket">
  <div class="overlay"></div>
  <div class="flight-info">
    <h3>JUNE 30 2018 12:30PM</h3>
    <div class="flight-locations">
      <h1>LAX</h1>
      <img src="https://cdn-images-1.medium.com/max/800/1*QFU_XYAKOGJ9nunfqvem1w.png" />
      <h1>JFK</h1>
    </div>
  </div>
</div>

Идите вперед и откройте файл index.html в своем браузере. Это должно выглядеть хорошо… ужасно. Это потому, что мы еще не добавили компонент css. Мы можем это сделать сейчас. Идите вперед и создайте тег <style> в разделе <head> вашей html-страницы.

Опять же, здесь нечего особенного. Мы используем flexbox для многих наших макетов.

body{
  background:#4F4F4F;
  color:white;
  font-family: 'Oswald', sans-serif;
  display:flex;
  justify-content:center;
  padding-top:40px;
}
h1{
  font-size:60px;
}
h3{
  font-weight:400;
  color:#F2C94C;
}
h1,
h3{
  margin:0;
  padding:0;
}
img{
  width:42px;
  height:39px;
  margin:0px 20px;
}
.ticket{
  position:relative;
  height:410px;
  width:690px;
  background:black;
  display:flex;
  align-items:flex-end;
  box-shadow: 0px 10px 40px rgba(0,0,0,.4);
}
.flight-info{
  position:relative;
  z-index:99;
  padding:30px;
}
.flight-locations{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:-20px;
}
canvas{
  position:absolute;
  border-radius:6px;
  z-index:0;
}
.overlay{
  position:absolute;
  background:rgba(0, 0, 0, .2);
  left:0; 
  right:0;
  top:0;
  bottom:0;
  z-index:1;
}

Обновите свой браузер, и вы должны увидеть гораздо лучше выглядящую страницу.

Теперь мы можем добавить наш эффект наведения. Мы будем переходить между двумя изображениями. На первом изображен Лос-Анджелес, представляющий Лос-Анджелес, а на другом - Нью-Йорк, представляющий JFK.

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

Это создаст очень крутой полосатый эффект при наведении курсора на изображения.

Чтобы создать эффект, нам нужно создать тег <script> прямо над тегом </body>.

Вот весь код, который нам нужен для создания эффекта

new hoverEffect({
  parent: document.querySelector('.ticket'),
  intensity1: 0.1,
  intensity2: 0.1,
  angle2: Math.PI / 2,
  image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
  image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
  displacementImage: 'https://cdn.rawgit.com/robin-dela/hover-effect/b6c6fd26/images/stripe1mul.png?raw=true'
});

Итак, вот что мы делаем. Мы создаем новый объект hoverEffect. Затем мы указываем на то, для какого div требуется применить к нему эффект наведения с помощью свойства parent. Затем мы можем установить такие вещи, как intensity и angles для обоих изображений. Наконец, мы определяем, к каким изображениям мы хотим применить эффект, а также к фактическому изображению смещения, которое мы будем использовать.

Готовый продукт

Обновите браузер и оцените созданный вами потрясающий эффект наведения.

Спасибо за прочтение!

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