Створення об’ємних зображень для сайту
Шановні користувачі! Ми дякуємо Вам за те, що Вам цікавий наш контент, тому з кожним днем хочемо ставати все краще і краще!
Велике спасибі за вашу допомогу та уважність до нас!
Хай! У цьому уроці ви дізнаєтеся, як звичайнезображеннязробити об'ємним за допомогою звичайного CSS і звичайного Javascript:) Насправді, в результаті, вийде не звичайне зображення, тому що воно змінюватиметься залежно від положення курсору миші. Ефект дійсно цікавий та застосування йому можна знайти на будь-якому сайті. Пам'ятайте, що саме креативні ефекти вирізняють сайт серед звичайних стандартних. Цей ефект може бути не замінний також у лендингах.
УВАГА
Ефект працює тільки при наведенні, тому Ви не побачите ефект на мобільних пристроях із сенсорними екранами.
HTML
Почнемо з підключення потрібних стилів та HTML розмітки. Між тегами підключаємо стилі (tilteffect.css):
Потім задаємо для потрібного зображення клас "tilt-effect":
Декілька слів за кодом:
Створюємо блок, у якому вказуємо ширину та висоту. Додаємо зображення, до якого буде застосовуватися ефект. Тобто необхідно "обернути" зображення ще один блок, у якого вказати ширину і висоту.
Декілька слів хочу сказати про налаштування даного ефекту, тому що вони в нього є.
extraImgs Кількість додаткових шарів із зображенням; min:1, max:5
opacity Прозорість додаткових шарів
bgfixed Рух першого шару; за умовчанням він статичний
movement Налаштування для кожного окремого додаткового шару
perspective Значення перспективи для 3D перетворення
translateX Відносне зміщення по осі X. Позитивне значення даної властивості вказує на скільки зміщується додатковий шар у напрямку руху покажчика миші. Якщо ми задамо негативне значення, тоді додатковий шар зміщуватиметься у бік протилежного руху покажчику миші.
translateY Відносне зміщення по осі Y.
translateZ Відносне зміщення по осі Z. Ця властивість застосовується, коли покажчик миші переміщається вертикально. Для цього властивості має бути задано значення перспективи.
rotateX Відносний поворот по осі X. Для цієї властивості має бути задане значення перспективи.
rotateY Відносний поворот по осі Y. Для цієї властивості має бути задане значення перспективи.
rotateZ Відносний поворот по осі Z. Для цієї властивості має бути задане значення перспективи.
Налаштування для кожного окремого зображення необхідно писати в атрибуті "data-tilt-options"