Создание интерактивной анимации изображения с помощью HTML и CSS

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

Создание интерактивной анимации изображения с помощью HTML и CSS

Структура папок проекта:

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

  • HTML
  • css
  • ингредиенты-1.png
  • чаша-1.png
  • ингредиенты-2.png
  • чаша-2.png


Теперь давайте проанализируем HTML-структуру нашей интерактивной анимации изображения. Предоставленный HTML-код создает простой макет контейнера, используя комбинацию элементов div и тегов изображений. Вот разбивка структуры HTML:

  • Самый внешний div с классом “box” действует как основной контейнер для нашей анимации.
  • Внутри этого контейнера у нас есть два идентичных div с классом “container”. Каждый div представляет один экземпляр нашей интерактивной анимации изображения.
  • Внутри каждого “контейнерного” div у нас есть вложенный div с классом “wrapper” и тег изображения с классом “img-1”.
  • Div “оболочка” используется для размещения элемента “img-1” абсолютно внутри div “контейнера”.
  • Класс “img-2” применяется к другому тегу изображения, который является родственным тегу “wrapper” div. Это изображение представляет собой фон или базовое изображение для анимации.


Теперь рассмотрим стили CSS, применяемые к нашей структуре HTML. Эти стили определяют визуальный вид и анимационные эффекты нашей интерактивной анимации изображения. Вот обзор используемых свойств CSS:

  • Универсальный селектор (*) устанавливает отступы и поля равными 0 для всех элементов и применяет модель определения размеров полей “border-box” для обеспечения согласованных вычислений размеров.
  • Класс “box” определяет макет основного контейнера, используя свойства viewport width (90vw) и flexbox для центрирования содержимого как по горизонтали, так и по вертикали.
  • Класс “container” задает размеры каждого экземпляра анимации (500 на 500 пикселей) и позиционирует их относительно основного контейнера.
  • Класс “img-1” определяет начальный стиль анимированного изображения, включая его положение (абсолютное), длительность перехода (1 сек.) и начальные значения масштаба и поворота.
  • Селектор “.container:hover .img-1” применяет преобразование к элементу “img-1” при наведении курсора на его родительский контейнер, что приводит к эффекту масштабирования и трансформации поворота.

HTML КОД:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box">
      <div class="container">
        <div class="wrapper"><img class="img-1" src="ingredients-1.png"/ ></div>
        <img class="img-2" src="bowl-1.png"/ >
      </div>
      <div class="container">
        <div class="wrapper"><img class="img-1" src="ingredients-2.png"/ ></div>
        <img class="img-2" src="bowl-2.png"/ >
      </div>
    </div>
  </body>
</html>
CSS КОД:

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }
 .box {
   width: 90vw;
   position: absolute;
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
   display: flex;
   align-items: center;
   justify-content: space-around;
 }
 .container {
   position: relative;
   height: 500px;
   width: 500px;
 }
 .container img {
   position: absolute;
 }
 .img-2 {
   width: 100%;
   cursor: pointer;
 }
 .img-1 {
   width: 100%;
   position: absolute;
   transition: 1s;
   transform-origin: center;
   transform: scale(0) rotate(100deg);
 }
 .container:hover .img-1 {
   transform: scale(1);
 }

В этом сообщении в блоге мы рассмотрели, как создать интерактивную анимацию изображения с использованием HTML и CSS. Объединив мощь этих двух технологий, мы смогли создать визуально привлекательную анимацию, которая реагирует на взаимодействия пользователя. Мы рассмотрели структуру HTML, стили CSS и структуру папок, необходимые для этого проекта.

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


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