Ефекти завантаження елементів, сітки з допомогою анімації CSS

13

Від автора: надихаємося ефектами завантаження елементів, сітки з допомогою анімації CSS.

Сьогодні ми хотіли б поділитися з вами ефектами завантаження елементів, сітки. Ідея в тому, щоб показувати елементи в сітці з анімацією, коли ті опиняються у вікні перегляду. Ці можливості нескінченні і ми хотіли б трохи надихнути вас. Деякі ефекти взяті з чудових ефектів прокрутки CSS3 Хакіма ель Хаттаба (Hakim El Hattab), а ідея навіяна мозаїчної анімацією, підглянутий в додатку Google Plus.

Так як Masonry є популярною бібліотекою розмітки сіток, ми подумали, що це демо-прикладі використовувати її було б непогано. Якщо хочете застосувати іншу, або взагалі обійтися без бібліотеки, вам доведеться видалити ініціалізацію з скрипта і відрегулювати селектори і т. д. Це очевидно.

Ефекти завантаження елементів, сітки з допомогою анімації CSSЕфекти завантаження елементів, сітки з допомогою анімації CSS

Будь ласка, зверніть увагу: все працює як слід тільки в тих браузерах, які підтримують відповідні властивості CSS. Тільки сучасні браузери!

Відображені в демо-прикладах чудові ілюстрації належать Еріці Макли (Erika Mackley). Відвідайте вебсайт Erika Noel Design або її магазин. Якщо бажаєте, щоб на одному з демо-прикладів були показані ваші роботи, просто зв’яжіться з нами.

Отже, для сітки ми застосуємо ненумерованний список, і просто додамо клас відповідного ефекту:

  • Ефекти завантаження елементів, сітки з допомогою анімації CSS
  • Ефекти завантаження елементів, сітки з допомогою анімації CSS
  • Ефекти завантаження елементів, сітки з допомогою анімації CSS
  • Ефекти завантаження елементів, сітки з допомогою анімації CSS

Ідея в тому, щоб додавати клас до тих елементів, які вже показано у вікні перегляду при завантаженні сторінки. Елементи, які з’являться в ньому при прокручуванні, отримають клас з назвою animate. В CSS ми визначаємо анімацію, яка відбудеться при кожному ефекті і необхідні індивідуальні стилі:

/* Ефект 4: перспектива падіння */
.grid.effect-4 {
perspective: 1300px;
}
.grid.effect-4 li {
transform-style: preserve-3d;
}
.grid.effect-4 li.animate {
transform: translateZ(400px) translateY(300px) rotateX(-90deg);
animation: fallPerspective .8s ease-in-out forwards;
}
@keyframes fallPerspective {
100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

Ми можемо встановити наступне. Для деякої довільності можна визначити мінімальну і максимальну протяжність анімації. Елементи, що з’являються у вікні перегляду, отримають тривалість анімації між цими значеннями. viewportFactor визначає, яка частина з’являється елемента буде видно для того, щоб запустити анімацію. Наприклад, якщо ми застосуємо значення 0, це буде означати, що воно буде додавати клас анімації, як тільки елемент з’явиться у вікні перегляду. Якщо застосувати значення 1, анімація буде запускатися тільки тоді, коли весь елемент буде відображено у вікні перегляду (100%).

new AnimOnScroll( document.getElementById( ‘grid’ ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );

Зверніть увагу, що нам довелося видалити перетворення Masonry, щоб ті не конфліктували з анімацією.

Сподіваюся, вам сподобається цей маленький експеримент і послужить джерелом натхнення вам!