Съдържание
- 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. Позиционирайте думата
The дума клас центрира думата в мрежата. Всеки текст, на който е дадено дума клас може да приложи това. The нагоре class ще се прилага към всяка друга буква и те ще се движат нагоре.
.word {размер на шрифта: 3em; марж: автоматично автоматично; } .word .up {дисплей: вграден блок; трансформиране: translate3d (0px, 0px, 0px) завъртане (0deg); преход: всички 0.5s лекота навлизане; }
04. Нагоре и отново
Сега надолу class споделя много подобни настройки на нагоре но курсорът на мишката показва движението нагоре за нагоре преобръщам се. Нагоре също се завърта леко, за да подобри външния вид.
.word .down {дисплей: вграден блок; трансформиране: translate3d (0px, 0px, 0px) завъртане (0deg); преход: всички 0.5s лекота навлизане; } .word: hover .up {преобразуване: translate3d (0px, -8px, 0px) завъртане (12deg); цвят: # 058b05}
05. Задържане на курсора надолу
Когато потребителят задържи курсора на мишката над текста, класът надолу премества текста надолу. По-късно в JavaScript текстът ще бъде разделен на отделни интервали, като класовете се добавят автоматично към алтернативни интервали.
.word: hover .down {transform: translate3d (0px, 8px, 0px) завъртане (-12deg); цвят: # 058b05; }
06. Автоматично за хората
Малко е трудно да се налага да поставяте всяка буква в редуващи се интервали с различни класове, така че ние ще автоматизираме процеса, като накараме JavaScript да запита селектора и да вземе всяка буква. Тук ул променливата хваща текущата буква, докато тя обикаля текста.
script> var elements = document.querySelectorAll (’.word’); за (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; елементи [i] .innerHTML = ’’;
07. Добавете редуващи се класове
Сега друг цикъл поставя всяка буква в свой собствен елемент span и добавя или нагоре или надолу клас към обхвата. Ако погледнете това в браузъра, ще видите текста, разделен на всяка буква нагоре и надолу, докато леко се въртите.
Можете да видите ефекта в действие на уебсайта на Middle Child.
за (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 или Абонирай се.
