#JavaScript #Html #CSS #Анимация

Создание анимации — отличный способ изучить основные понятия Html, Css и JavaScript. Анимации можно использовать для выделения важной информации, направления пользователей по веб-сайту и создания уникального игривого дизайна. Одной из популярных анимаций является сердечная анимация, которая часто используется, чтобы добавить нотку романтики или игривости на веб-сайт.

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

Создание анимации

  1. Сначала создайте папку с файлом Html, Css и JavaScript с именами index.html, style.css и script.js.
  2. Поместите все файлы в одну папку.

После этого напишите код:

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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="header-plugin"></div>
    <div class="bg_heart"></div>
<script src="script.js"></script>
</body>
</html>

CSS-КОД

html,body{
    height:100%
  }
  
  .bg_heart {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden
   }
  
  .heart {
      position: absolute;
      top: -50%;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -m-transform: rotate(-45deg);
      transform: rotate(-45deg)
   }
  
  .heart:before {
      position: absolute;
      top: -50%;
      left: 0;
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: 100%;
  }
  
  .heart:after {
      position: absolute;
      top: 0;
      right: -50%;
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: 100%;
  }
  
  @-webkit-keyframes love {
    0%{top:110%}
  }
  @-moz-keyframes love {
    0%{top:110%}
  }
  @-ms-keyframes love {
    0%{top:110%}
  }
  @keyframes love {
    0%{top:110%}
  }

Пояснение

html,body{
    height:100%
}

Это устанавливает высоту элементов HTML и body на 100%, что гарантирует, что фоновая анимация сердца заполнит всю страницу.

.bg_heart {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

Это создает контейнер для анимации сердца с относительной позицией и шириной и высотой 100%. Свойство overflow: hidden гарантирует, что любые переполняющие элементы будут скрыты.

.heart {
    position: absolute;
    top: -50%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -m-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Это создает форму сердца, позиционируя абсолютно позиционированный элемент с верхним значением -50% (чтобы расположить его вне контейнера) и поворачивая его на 45 градусов, чтобы создать форму ромба. Различные префиксы поставщиков для свойства преобразования обеспечивают кросс-браузерную совместимость.

.heart:before {
    position: absolute;
    top: -50%;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 100%;
}

.heart:after {
    position: absolute;
    top: 0;
    right: -50%;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 100%;
}

Эти псевдоэлементы создают две половины формы сердца. Элемент :before расположен в верхнем левом углу сердца и имеет радиус границы 100%, а элемент :after расположен в верхнем правом углу сердца и также имеет радиус границы 100%.

@-webkit-keyframes love {
    0%{top:110%}
}
@-moz-keyframes love {
    0%{top:110%}
}
@-ms-keyframes love {
    0%{top:110%}
}
@keyframes love {
    0%{top:110%}
}

Это ключевые кадры анимации движения сердца. Свойство top:110% ключевого кадра 0% устанавливает начальное положение анимации сердца, при этом сердце располагается под контейнером. Затем анимация будет перемещать сердце вверх, пока оно не достигнет верхней части контейнера. Различные префиксы поставщиков обеспечивают кросс-браузерную совместимость.

КОД JAVASCRIPT

// Define a function that creates a heart element with random properties
function createHeart() {
    const heart = document.createElement('div');
    heart.classList.add('heart');
    heart.style.width = `${Math.floor(Math.random() * 65) + 10}px`;
    heart.style.height = heart.style.width;
    heart.style.left = `${Math.floor(Math.random() * 100) + 1}%`;
    heart.style.background = `rgba(255, ${Math.floor(Math.random() * 25) + 100 - 25}, ${Math.floor(Math.random() * 25) + 100}, 1)`;
    const duration = Math.floor(Math.random() * 5) + 5;
    heart.style.animation = `love ${duration}s ease`;
    return heart;
  }
  
  // Get the container element where the hearts will be added
  const container = document.querySelector('.bg_heart');
  
  // Define a function that removes hearts that have gone off screen
  function removeHearts() {
    const hearts = container.querySelectorAll('.heart');
    hearts.forEach((heart) => {
      const top = parseFloat(getComputedStyle(heart).getPropertyValue('top'));
      const width = parseFloat(getComputedStyle(heart).getPropertyValue('width'));
      if (top <= -100 || width >= 150) {
        heart.remove();
      }
    });
  }
  
  // Define a function that repeatedly adds hearts to the container
  function addHeart() {
    const heart1 = createHeart();
    const heart2 = createHeart();
    container.appendChild(heart1);
    container.appendChild(heart2);
    setTimeout(removeHearts, 1000);
  }
  
  // Start the animation loop
  const love = setInterval(addHeart, 500);

Пояснение:

  1. Функция createHeart() создает элемент сердца, используя document.createElement(). Он устанавливает свойства width, height, left, background и animation элемента, используя случайные значения.
  2. Переменная container получает элемент DOM, в который будут добавлены сердца, используя document.querySelector().
  3. Функция removeHearts() выбирает все элементы .heart внутри контейнера и удаляет все, что исчезло с экрана.
  4. Функция addHeart() создает два элемента сердца с помощью createHeart(), добавляет их в контейнер с помощью appendChild() и устанавливает тайм-аут для вызова removeHearts() через одну секунду.
  5. Интервал love повторно вызывает addHeart() каждые 500 миллисекунд.

Не стесняйтесь подписываться на меня в Twitter, GitHub и YouTube.🙂