Анимация изображения в CSS

Здравствуйте, ребята, сегодня я покажу вам анимацию изображения в CSS.

Давайте начнем…
Прежде чем погрузиться в тему, сначала разберитесь в этом.

Что такое var в CSS?

Функция var() используется для вставки значения переменной CSS.
Если вы зададите элементу значение типа «—j:1», это будет означать, что у этого элемента есть переменная «i» со значением «1».
Мы можем получить доступ к этой переменной с помощью функции var().

HTML —

 <div class="bodyContainer">
      <div class="imageContainer">
        <img style="--j:1.2;" class="imageAnimation" src="./croppedImages/image_part_001.jpg" />
        <img style="--j:1.4;" class="imageAnimation" src="./croppedImages/image_part_002.jpg" />
        <img style="--j:1.6;" class="imageAnimation" src="./croppedImages/image_part_003.jpg" />
        <img style="--j:1.8;" class="imageAnimation" src="./croppedImages/image_part_004.jpg" />
        <img style="--j:2;" class="imageAnimation" src="./croppedImages/image_part_005.jpg" />
        <img style="--j:2.2;" class="imageAnimation" src="./croppedImages/image_part_006.jpg" />
        <img style="--j:2.4;" class="imageAnimation" src="./croppedImages/image_part_007.jpg" />
        <img style="--j:2.6;" class="imageAnimation" src="./croppedImages/image_part_008.jpg" />
        <img style="--j:2.8;" class="imageAnimation" src="./croppedImages/image_part_009.jpg" />
      </div>
    </div>
Вход в полноэкранный режим Выход из полноэкранного режима
  • Я создал контейнер body, в котором будет располагаться секция изображений.
  • Контейнер imageContainer создаст контейнер с сеткой 3×3, так как у нас есть 9 изображений для этой анимации.
  • Эти 9 изображений — просто обрезанная часть одного изображения.

CSS

.bodyContainer {
        display: grid;
        height: 80vh;
        place-content: center;
        animation-name: heightZero;
        animation-duration: 4.5s;
      }

      .imageContainer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

     /* <!-- Setting the animation, duration, fill mode and timing function for the images. --> */
      img {
        width: 300px;
        height: 200px;
        animation-duration: calc(var(--j)*1s);
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
      }

      img:nth-child(1) {
        animation-name: slideLeft;
        border-top-left-radius: 10px
      }
      img:nth-child(2) {
        animation-name: slideTop;
      }
      img:nth-child(3) {
        animation-name: slideRight;
        border-top-right-radius: 10px;
      }
      img:nth-child(4) {
        animation-name: slideLeft;
      } 
      img:nth-child(5) {
        animation-name: slideTop;
      } 
      img:nth-child(6) {
        animation-name: slideRight;
      }
      img:nth-child(7) {
        animation-name: slideLeft;
        border-bottom-left-radius: 10px;
      }
      img:nth-child(8) {
        animation-name: slideBottom;
      }
      img:nth-child(9) {
        animation-name: slideRight;
        border-bottom-right-radius: 10px;
      }


      @keyframes slideLeft {
        0% {
          opacity: 0;
          transform: translateX(-100px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes slideRight {
        0% {
          opacity: 0;
          transform: translateX(100px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes slideTop {
        0% {
          opacity: 0;
          transform: translateY(-100px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes slideBottom {
        0% {
          opacity: 0;
          transform: translateY(100px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
Вход в полноэкранный режим Выход из полноэкранного режима
  • CSS-часть довольно проста, мы сделали контейнер body сеткой и использовали place-content-center для центрирования нашего imageContainer.
  • Контейнер изображения преобразуется в сетку 3×3, в которой будет 9 изображений, по 3 изображения в каждом ряду.
  • Мы применили некоторые значения ширины и высоты к тегу img, поэтому они будут применены ко всем 9 изображениям.
  • Затем мы использовали функцию var, чтобы присвоить каждому изображению разное значение длительности анимации.
  • Calc() используется для вычисления свойства, указанного в var, и присвоения значения этому css-свойству.
  • Затем, используя селектор nth-child(), мы нацелились на все изображения по отдельности, как вы можете видеть, мы дали разные имена анимации изображениям и задали border-radius только тем изображениям, которые находятся по краям сетки.
  • После этого мы создали 4 типа анимации slideLeft, slideRight, slideTop, slideBottom, каждая анимация в основном сдвигает изображение в кадр в указанном направлении.
  • Мы использовали свойство translate для перемещения изображения в разных направлениях по осям X и Y, а непрозрачность используется для того, чтобы изображение выглядело исчезающим в кадре.

ПРИМЕЧАНИЕ — ВЫ МОЖЕТЕ ОБРЕЗАТЬ ЛЮБОЕ ИЗОБРАЖЕНИЕ НА РАЗЛИЧНЫЕ ЧАСТИ КАК СЕТКУ ПО ССЫЛКЕ НИЖЕ

https://www.imgonline.com.ua/eng/cut-photo-into-pieces.php

Выход —

  • Результат выглядит как разрыв, потому что изображения берутся с google drive, а не с локального хоста. Поэтому попробуйте эту анимацию на своей машине, чтобы увидеть ее плавность.

СПАСИБО, ЧТО ПРОВЕРИЛИ ЭТОТ ПОСТ

Вы можете связаться со мной на —
Instagram — https://www.instagram.com/supremacism__shubh/
LinkedIn — https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email — shubhmtiwri00@gmail.com

Вы можете помочь мне пожертвованием по ссылке ниже Спасибо👇👇👇 ^^
☕ —> https://www.buymeacoffee.com/waaduheck <—.

Также проверьте эти посты
https://dev.to/shubhamtiwari909/text-animation-in-css-16j9

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Оцените статью
devanswers.ru
Добавить комментарий