Мазмұны
- 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 жоғары сынып әр әріпке қолданылатын болады және олар жоғары қарай жылжиды.
.word {қаріп өлшемі: 3em; маржа: auto auto; } .word .up {дисплей: кірістірілген блок; түрлендіру: translate3d (0px, 0px, 0px) айналдыру (0deg); ауысу: барлық 0,5 с жеңілдету; }
04. Қайта-қайта
Енді төмен класс параметрлері өте ұқсас параметрлермен бөліседі жоғары бірақ меңзер жоғары қарай қозғалысты көрсетеді жоғары аунату. Көріністі жақсарту үшін жоғары қарай да аздап бұрылады.
.word .down {дисплей: кірістірілген-блок; түрлендіру: translate3d (0px, 0px, 0px) айналдыру (0deg); ауысу: барлық 0,5 с жеңілдету; } .word: hover .up {transform: translate3d (0px, -8px, 0px) айналдыру (12deg); түс: # 058b05}
05. Төмен жылжу
Қолданушы мәтінді жылжытқанда, төмен класс мәтінді төмен қарай жылжытады. Кейіннен JavaScript-те мәтін бөлек аралықтарға бөлініп, класстар автоматты түрде қосымша баламаға қосылады.
.word: hover .down {transform: translate3d (0px, 8px, 0px) айналдыру (-12deg); түс: # 058b05; }
06. Халыққа арналған автоматты
Әрбір әріпті әр түрлі қатарға ауысатын аралыққа қоюдың қажеті шамалы, сондықтан біз JavaScript-ті таңдап, әр әріпті алу үшін автоматтандырамыз. Мұнда str айнымалы мәтін мәтінді айналдырғанда ағымдағы әріпті алады.
сценарий> var elements = document.querySelectorAll (’.word’); үшін (var i = 0, l = элементтер.ұзындық; i l; i ++) {var str = элементтер [i] .textContent; элементтер [i] .innerHTML = ’’;
07. Ауыспалы сабақтарды қосыңыз
Енді басқа цикл әр әріпті өзінің жеке элементіне орналастырады және оны қосады жоғары немесе төмен аралықтарға сынып. Егер сіз бұны шолғыштан қарасаңыз, онда сіз мәтінді әр әріпке жоғары және төмен бөлінген кезде, сәл айналдыра аласыз.
Сіз бұл әрекеттің нәтижесін 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); }} / сценарий>
Бұл мақала бастапқыда веб-дизайн журналында жарияланған Веб-дизайнер.286. шығарылым немесе жазылу.
