Ефекти титрів при проведенні миші

19

Від автора: Сьогодні ми покажемо вам, як створити простий, але стильний ефекти проведення мишею для титрів до зображень. Ідея полягає в тому, щоб зробити сітку з зображеннями і застосувати до них ефекти, які при проведенні мишею покажуть титри з назвою, автором і кнопкою-посиланням. Для деяких ефектів ми застосуємо 3D-перетворення. Нам потрібно добитися витонченості і гарантувати натхнення при створенні безлічі їх варіацій.

Ефекти титрів при проведенні мишіЕфекти титрів при проведенні миші

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

РОЗМІТКА

Структура нашої сітки і малюнки будуть зроблені з неупорядкованого списку, і в кожному буде знаходитися елемент figure. У figure міститься зображення і figcaption з текстовими елементами і посиланням:

  • Ефекти титрів при проведенні миші

    Camera

    Jacob Cummings
    Take a look

Будь ласка, зверніть увагу, що застосовувати figure має сенс, тільки якщо в ньому самому ні вмісту, але на нього робиться посилання з основного потоку документа і його можна прибрати (наприклад, додаток). Прочитайте докладніше про елементі figure у цій чудовій статті HTML5 Doctor: Елементи figure & figcaption.

Це – структура за замовчуванням для будь-яких зразків сітки. Зауважте, що для Ефекту 4 ми обернем зображення в додатковий div.

Клас кожного окремого ефекту буде доданий у список; тобто у приклад 1 буде cs-style-1, зразок 2 — cs-style-2 і так далі. Саме так будуть призначатися стилі ефекту кожного прикладу окремо.

Але спочатку давайте визначимо загальні стилі для всіх ефектів.

CSS

Зверніть увагу, що CSS не містить вендорних префіксів, але ви побачите їх у файлах.

Загальні стилі всіх малюнків наступні: для початку ми визначаємо стилі сітки і пунктів списку, які послужать нам контейнерами для рисунків:

.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 440px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}

Відображення елементів списку, як вбудованих блоків дозволяє нам вирівнювати їх шляхом застосування до їх батьківського елементу центрованого вирівнювання тексту.

Давайте скинемо поля елементів figure і встановимо position на relative. Наш figcaption буде позиціонується абсолютно, тому нам потрібно переконатися, що він і залишиться таким всередині figure:

.grid figure {
margin: 0;
position: relative;
}

Максимальна ширина зображення буде 100%, що стане нам при призначенні медиазапроса для зміни розміру елементів списку:

.grid figure img {
max-width: 100%;
display: block;
position: relative;
}

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

.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}

І нарешті, визначимо деякі стилі елементів тексту і посилання:

.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}
.grid figcaption span:before {
content: ‘by ‘;
}
.grid figcaption a {
text-align: center;
padding: 10px 5px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}

Додамо by до діапазону, який містить ім’я автора, з допомогою псевдокласу :before. Звичайно, можна додати його в HTML, але так ви отримаєте можливість легко змінювати його на щось на зразок made by або Designer: або що-небудь подібне. Зробивши що-небудь подібне, дивіться не видалите значення свого HTML. В кінці CSS ми також додамо медиазапрос для маленьких екранів:

@media screen and (max-width: 31.5 em) {
.grid {
padding: 10px 10px 100px 10px;
}
.grid li {
width: 100%;
min-width: 300px;
}
}

А тепер приймемось за самі ефекти.

Зверніть увагу, що для визначення торкання ми користуємося Modernizr’ом. Але пам’ятайте, що при тестуванні він надійний не на 100%, якщо ви користуєтеся сенсорним пристроєм, як показано тут. Ми замінимо проведення мишею на дотик і додамо клас, який буде запускати ефекти при визначенні сенсора. Так, в доповнення до :hover ви завжди будете бачити ще одне правило. Нам потрібно запускати ефект проведення мишею тільки тоді, коли ми не визначили дотику.

ЕФЕКТ 1

Ефекти титрів при проведенні миші

Почнемо з дуже простого ефекту. Нам потрібно, щоб титр з’являвся і трохи зміщувався вправо вниз, створюючи враження 3D-шару, що виходить з-під зображення.

Для цього нам спочатку потрібно визначити ширину і висоту figcaption і встановити вихідну непрозорість на 0:

.cs-style-1 figcaption {
height: 100%;
width: 100%;
opacity: 0;
text-align: center;
backface-visibility: hidden;
transition: transform 0.3 s, opacity 0.3 s;
}

Крім того, ми додаємо перехід і встановлюємо backface-visibility на hidden для того, щоб уникнути «підстрибування» відображення тексту в кінці переходу. Якщо ви не проти невеликого збою, то можете цього і не робити.

При проведенні мишею (або торканні) ми встановимо непрозорість на 1 і трохи перетворимо figcaption:

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
opacity: 1;
transform: translate(15px, 15px);
}

До того ж позиціонуємо елементи тексту:

.cs-style-1 figcaption h3 {
margin-top: 70px;
}
.cs-style-1 figcaption span {
display: block;
}
.cs-style-1 figcaption a {
margin-top: 30px;
}

ЕФЕКТ 2

Ефекти титрів при проведенні миші

Цей ефект зрушує зображення догори і відкриває figcaption, як на сайті Minimamente, де ми його і взяли.

Отже, давайте додамо перехід перетворення зображення і змусимо його зміщуватися вгору при проведенні мишею:

.cs-style-2 figure img {
z-index: 10;
transition: transform 0.4 s;
}
.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
transform: translateY(-90px);
}

Ми встановили z-index на 10 для того, щоб зображення залишалося зверху титру. Для figcaption потрібно висота і ширина до 100%. Ми прикріпимо титр до низу малюнка:

.cs-style-2 figcaption {
height: 90px;
width: 100%;
top: auto;
bottom: 0;
}

А також позиціонуємо кнопку-посилання по правій стороні:

.cs-style-2 figcaption a {
position: absolute;
right: 20px;
top: 30px;
}

ЕФЕКТ 3

Ефекти титрів при проведенні миші

По-іншому створити ефект 2 можна приховати будь-переповнення при переміщенні зображення. Давайте спробуємо це зробити і змусимо його з’являтися так, як ніби титр злегка підштовхує зображення догори.

По-перше, нам потрібно встановити overflow figure на hidden. Зробивши це, ми не будемо бачити нічого, що виходить за рамки:

.cs-style-3 figure {
overflow: hidden;
}

Зображення для перетворення потрібно перехід і при проведенні мишею ми переведемо його на 50px вище:

.cs-style-3 figure img {
transition: transform 0.4 s;
}
.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
transform: translateY(-50px);
}

figcaption буде трохи вище, ніж у попередньому прикладі, а також ми перемістимо його з поля зору figure. Також додамо перехід для перетворення і непрозорості:

.cs-style-3 figcaption {
height: 100px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
transform: translateY(100%);
transition: transform 0.4 s, opacity 0.1 s 0.3 s;
}

При проведенні мишею встановимо непрозорість на 1 і перемістимо її вгору. Бачите, як ми додали два переходу? Один для звичайного стану, і другий для стану при проведенні мишею? Ось так можна контролювати, що відбувається при наведенні миші на елемент і відведення її в сторону. Тут перехід буде застосовуватися при проведенні мишею: нам потрібно, щоб елемент швидко ставав непрозорим і перетворення при цьому відбувалося за 0,4 секунди. При відведенні миші з елемента непрозорість знову стає рівною 0, але лише після затримки в 0,3 секунди. Таким чином, ефект буде виглядати послідовно і природно.

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
opacity: 1;
transform: translateY(0px);
transition: transform 0.4 s, opacity 0.1 s;
}

І не забудемо кнопку-посилання:

.cs-style-3 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

ЕФЕКТ 4

Ефекти титрів при проведенні миші

У четвертому ефекті застосовуються деякі 3D-властивості. Наша мета – титр – повинен з’являтися зліва і зміщувати зображення праворуч. Ми використовуємо пункт списку в якості контейнера для зображення з перспективою з тим, щоб можна було поекспериментувати з 3D-перетвореннями:

.cs-style-4 li {
perspective: 1700px;
perspective-origin: 0 50%;
}

Щоб 3D-перетворення працювали з іншими елементами, дочірньому елементу буде потрібно наступний transform-style:

.cs-style-4 figure {
transform-style: preserve-3d;
}

Як вже згадувалося вище, в цьому прикладі потрібен інший пакувальник зображення. Навіщо? Нам потрібно встановити батьківський елемент зображення на overflow:hidden, бо не можна, щоб зображення переливалося» за краю контейнера при його переміщенні. Можна було б встановити на overflow:hidden figure, але тоді ми не побачимо красивий 3D-ефект титру. Тому давайте додамо інший пакувальник і встановимо його на overflow hidden:

.cs-style-4 figure > div {
overflow: hidden;
}

При наведенні миші змістимо зображення:

.cs-style-4 figure img {
transition: transform 0.4 s;
}
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
transform: translateX(25%);
}

У figcaption буде половина ширини figure і ми встановимо його вихідну непрозорість на 0. Тепер перевернемо його на 90 градусів по осі Y, чого він стане з’являтися ближче до нас при вихідному титрі ліворуч. Ми в основному його таким бачити не будемо. Давайте встановимо перехід для стану прибраній миші, який буде працювати за таким же принципом, що й описаний в попередньому прикладі:

.cs-style-4 figcaption {
height: 100%;
width: 50%;
opacity: 0;
backface-visibility: hidden;
transform-origin: 0 0;
transform: rotateY(-90deg);
transition: transform 0.4 s, opacity 0.1 s 0.3 s;
}

При проведенні мишею покажемо його і перевернемо на 0 градусів, при цьому змусивши його з’явитися як книжкова сторінка – зліва:

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
opacity: 1;
transform: rotateY(0deg);
transition: transform 0.4 s, opacity 0.1 s;
}

І останнє, але не менш важливе – наша кнопка-посилання:

.cs-style-4 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

ЕФЕКТ 5

Ефекти титрів при проведенні миші

У цьому ефекті зображення зменшується, а титр з’являється з-за нього. Ми встановимо зображення поверх титру і додамо перехід для перетворення:

.cs-style-5 figure img {
z-index: 10;
transition: transform 0.4 s;
}

Нам потрібно, щоб при проведенні мишею зображення зменшувалася:

.no-touch .cs-style-5 figure:hover img,
.cs-style-5 figure.cs-hover img {
transform: scale(0.4);
}

Титр спочатку зменшений до 0,7 і прихований:

.cs-style-5 figcaption {
height: 100%;
width: 100%;
opacity: 0;
transform: scale(0.7);
backface-visibility: hidden;
transition: transform 0.4 s, opacity 0.4 s;
}

При наведенні миші ми збільшуємо і проявляємо його:

.no-touch .cs-style-5 figure:hover figcaption,
.cs-style-5 figure.cs-hover figcaption {
transform: scale(1);
opacity: 1;
}

Дуже легко. Так, і звичайно ж, кнопка-посилання у правому нижньому куті:

.cs-style-5 figure a {
position: absolute;
bottom: 20px;
right: 20px;
}

ЕФЕКТ 6

Ефекти титрів при проведенні миші

Це – різновид ефекту 5. У нього безліч варіацій; можна подумати про те, щоб розташувати зображення в іншому місці і показати трохи більше тексту. При цьому ефекті текст і зображення розташовуються не там, де раніше, і ми не будемо проявляти титр або масштабувати його, він вже знаходиться де потрібно, створюючи інше «оточення». Отже, давайте зробимо з зображенням те ж саме, а при проведенні мишею всього лише злегка перемістимо його:

.cs-style-6 figure img {
z-index: 10;
transition: transform 0.4 s;
}
.no-touch .cs-style-6 figure:hover img,
.cs-style-6 figure.cs-hover img {
transform: translateY(-50px) scale(0.5);
}

На цей раз перехід титру такий:

.cs-style-6 figcaption {
height: 100%;
width: 100%;
}

І розмістимо елементи тексту:

.cs-style-6 figcaption h3 {
margin-top: 60%;
}
.cs-style-6 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

ЕФЕКТ 7

Ефекти титрів при проведенні миші

В останньому ефекті, описаному в цьому підручнику, титр буде «виростати» з-за зображення, яке із-за цього стане виглядати як рамка. Так як рамка перших елементів буде перекривати інші елементи списку, нам потрібно переконатися, що z-індекси у нас правильні (реверсированные):

.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }

Як і в попередньому прикладі, потрібно, щоб зображення було поверх титру:

.cs-style-7 figure img {
z-index: 10;
}

Титр буде займати 100% фігури і ми встановимо перехід непрозорості, висоти і тіні блоку. Навіщо нам тінь блоку? Адже можна легко застосувати тінь блоку для створення рамки навколо титру:

.cs-style-7 figcaption {
height: 100%;
width: 100%;
opacity: 0;
backface-visibility: hidden;
box-shadow: 0 0 0 0px #2c3f52;
transition: opacity 0.3 s, height 0.3 s, box-shadow 0.3 s;
}

При проведенні мишею ми встановимо непрозорість на 1, збільшимо висоту і встановимо ширину тіні блоку на 10 пікселів:

.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
opacity: 1;
height: 130%;
box-shadow: 0 0 0 10px #2c3f52;
}

Тепер розмістимо елементи тексту. Нам потрібно, щоб елементи з’являлися відразу після анімації висоти титру, але при відведенні миші від них вимагається тут же зникнути. Тому ми встановимо тривалість переходу в звичайному стані на 0 секунд.

.cs-style-7 figcaption h3 {
margin-top: 86%;
}
.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
opacity: 0;
transition: opacity 0s;
}
.cs-style-7 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}

При проведенні мишею елементи будуть з’являтися з затримкою:

.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
transition: opacity 0.3 s 0.2 s;
opacity: 1;
}

От і все! Сподіваюся, що вам сподобався цей підручник і надихнув вас на створення безлічі класних титровых ефектів при проведенні мишею.