Зміст
- 01. Ефект перекидання тексту
- 02. Створіть CSS
- 03. Розмістіть слово
- 04. Вгору і вгору
- 05. Наведення курсору вниз
- 06. Автомат для людей
- 07. Додайте чергування класів
Посилання для перекидання - чудовий спосіб привернути увагу користувача, особливо якщо вони роблять щось незвичне чи оригінальне. Середня дитина має чудовий ефект, який рідко зустрічається в інших місцях, який фіксує кожну букву та розділяє їх анімацією, яка починається, коли відвідувач наводить курсор на слово. Анімація допомагає передати грайливий характер марки «сендвіч».
У цій статті ми покажемо вам, як відтворити ефект на вашому сайті. Щоб отримати більше натхнення, загляньте в наш посібник із найкращих прикладів анімації CSS (з інструкціями щодо їх кодування). Щось дещо інше, спробуйте найкращий конструктор веб-сайтів або наш вибір найкращого хмарного сховища. І якщо ви ускладнюєте свій веб-сайт, переконайтеся, що ваш веб-хостинг працює точно.
01. Ефект перекидання тексту
Одним з чудових текстових ефектів на веб-сайті Middle Child є ефект перекидання меню, де літери розділяються на тексті і злегка обертаються. Почніть це з кількох простих тегів HTML.
div> div> Сніданок / div> / div>
02. Створіть CSS
Використовуйте окремий файл CSS або теги стилів, щоб додати наступні правила CSS і зробити сторінку повною за розміром браузера, переконавшись, що тіло та обгортка займають всю доступну висоту.
тіло {ширина: 100%; висота: 100%; запас: 0; заповнення: 0; } .wrapper {дисплей: сітка; висота: 100%; }
03. Розмістіть слово
слово клас центрує слово в сітці. Будь-який текст, якому надано слово клас може застосувати це. вгору class буде застосовано до кожної іншої літери, і вони рухатимуться вгору.
.word {розмір шрифту: 3em; маржа: авто авто; } .word .up {display: inline-block; перетворення: translate3d (0px, 0px, 0px) обертати (0deg); перехід: усі 0,5-секундні зручності; }
04. Вгору і вгору
Тепер вниз клас має дуже схожі налаштування з вгору але наведення показує рух вгору для вгору перекидання. Також трохи повертається вгору, щоб покращити зовнішній вигляд.
.word .down {display: inline-block; перетворення: translate3d (0px, 0px, 0px) повернути (0deg); перехід: усі 0,5-секундні зручності; } .word: hover .up {перетворення: translate3d (0px, -8px, 0px) повернути (12deg); колір: # 058b05}
05. Наведення курсору вниз
Коли користувач наводить курсор на текст, клас вниз переміщує текст вниз. Пізніше в JavaScript текст буде розділений на окремі інтервали, а класи автоматично додаватимуться до альтернативних інтервалів.
.word: hover .down {перетворення: translate3d (0px, 8px, 0px) обертати (-12deg); колір: # 058b05; }
06. Автомат для людей
Це трохи клопіт, коли доводиться розміщувати кожну букву в змінних інтервалах з різними класами, тому ми автоматизуємо процес, отримавши JavaScript для запиту в селектор та отримання кожної літери. Ось вул змінна захоплює поточну букву, коли вона перебирає текст.
script> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; елементи [i] .innerHTML = ’’;
07. Додайте чергування класів
Тепер інший цикл розміщує кожну букву у власному елементі span і додає або вгору або вниз клас до прольотів. Якщо ви подивитесь на це в браузері, ви побачите текст, розділений на кожну букву вгору і вниз, при цьому злегка обертаючи.
Ви можете побачити ефект у дії на веб-сайті Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); елементи [i] .appendChild (spn); spn.textContent = str [j]; нехай pos = (j% 2)? 'вверх вниз'; spn.classList.add (pos); }} / script>
Ця стаття спочатку була опублікована в журналі творчого веб-дизайну Веб-дизайнер.Придбати випуск 286 або передплатити.
