Мундариҷа
- 01. Таъсири матни ролловер
- 02. CSS созед
- 03. Калимаро ҷойгир кунед
- 04. Боло ва боло
- 05. Ба поён ҳаракат карда
- 06. Худкор барои мардум
- 07. Синфҳои ивазшударо илова кунед
Истинодҳои Rollover як роҳи хуби ҷалб кардани диққати корбар мебошанд, хусусан агар онҳо ягон кори ғайриоддӣ ё аслӣ кунанд. Миёнаи кӯдакон таъсири бузурге дорад, ки кам дар ҷойҳои дигар дида мешавад, ки ҳар як ҳарфро гирифта, онҳоро бо аниматсия ҷудо мекунад, вақте ки меҳмон калимаро чаппа мекунад. Аниматсия ба интиқоли хислати бозигарии бренди сэндвич кӯмак мекунад.
Дар ин мақола, мо ба шумо нишон медиҳем, ки чӣ гуна эффектро дар сайти худ барқарор кардан мумкин аст. Барои илҳоми бештар, ба дастури мо оид ба намунаҳои беҳтарини аниматсияи CSS назар кунед (бо дастур оид ба рамзгузории онҳо). Барои чизи каме фарқ, як вебсайти беҳтарин ё интихоби беҳтарин нигоҳдории абрро санҷед. Ва агар шумо сайти худро мураккабтар кунед, боварӣ ҳосил кунед, ки хостинги вебии шумо дар ҳоли ҳозир аст.
01. Таъсири матни ролловер
Яке аз эффектҳои бузурги матнӣ дар вебсайти Middle Child ин эффектҳои рололовер дар меню мебошад, ки дар он ҳарфҳо дар матн ҷудо мешаванд ва каме чарх мезананд. Инро бо баъзе барчаспҳои оддии HTML оғоз кунед.
div> div> наҳорӣ / div> / div>
02. CSS созед
Барои илова кардани қоидаҳои зерини CSS файли аломатҳои алоҳидаи CSS ё сабкҳоро истифода баред ва саҳифаро бо пуррагии дастрасии бадан ва парпеч таъмин карда, андозаи пурраи браузерро пур кунед.
бадан {паҳнои: 100%; баландӣ: 100%; маржа: 0; андова: 0; } .wrapper {намоиш: шабака; баландӣ: 100%; }
03. Калимаро ҷойгир кунед
Дар калима синф калимаро дар шабака марказ мекунад. Ҳар матне, ки дода мешавад калима синф метавонад инро татбиқ кунад. Дар боло синф ба ҳар як ҳарфи дигар татбиқ мешавад ва инҳо ба боло ҳаракат мекунанд.
.word {font-size: 3em; маржа: auto auto; } .word .up {display: inline-block; табдил додан: translate3d (0px, 0px, 0px) гардиш (0deg); гузариш: ҳама 0.5s осонӣ-дар-берун; }
04. Боло ва боло
Ҳоло поён class мубодилаи хеле монанд ба боло аммо hover ҳаракатро ба боло нишон медиҳад барои боло чарх зан. Ба боло низ каме тоб дода, намуди зоҳириро беҳтар мекунад.
.word .down {display: inline-block; табдил додан: translate3d (0px, 0px, 0px) гардиш (0deg); гузариш: ҳама 0.5s осонӣ-дар-берун; } .word: hover .up {transform: translate3d (0px, -8px, 0px) битобед (12deg); ранг: # 058b05}
05. Ба поён ҳаракат карда
Вақте ки корбар дар болои матн ҳаракат мекунад, синфи поён матнро ба поён ҳаракат медиҳад. Баъдтар дар JavaScript матн ба фосилаи алоҳида тақсим карда мешавад ва синфҳо ба таври автоматикӣ ба ҷойҳои иловагӣ илова карда мешаванд.
.word: hover .down {transform: translate3d (0px, 8px, 0px) битобед (-12deg); ранг: # 058b05; }
06. Худкор барои мардум
Барои гузоштани ҳар як ҳарф дар давраҳои ивазшаванда бо синфҳои мухталиф каме душворӣ аст, бинобар ин мо равандро тавассути гирифтани JavaScript барои интихоби селектор ва гирифтани ҳар як ҳарф автоматӣ мекунем. Дар ин ҷо кӯча ҳангоме ки матнро давр мезанад, тағирёбанда ҳарфи ҷориро мегирад.
скрипт> 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]; бигзор пос = (j% 2)? 'боло поён'; spn.classList.add (пос); }} / скрипт>
Ин мақола аслан дар маҷаллаи тарроҳии эҷодӣ нашр шудааст Веб-дизайнер.Хариди 286 ё обуна шавед.
