Мазмұны
- 01. HTML құжатын бастаңыз
- 02. Көрінетін HTML мазмұны
- 03. CSS бастамасы
- 04. Анимациялық контейнер
- 05. Анимацияны бастау
- 06. Көзге көрінетіндей етіп жасаңыз
- 07. Анимацияны аяқтау
Канаданың Jam3-тен жоғалған махаббаты - бұл қараңғы, жоғалған махаббат төңірегіндегі тұрақты сезімдер туралы шынайы жүрегі бар интерактивті өлең. Веб-сайттың макеті HTML5 көмегімен GSAP кітапханасымен анимацияны қолдана отырып жасалған, оның ең көрнекті ерекшеліктерінің бірі - анимациялық 3D мәтіні, бұл Lost поэзиясын шынымен өмірге әкеледі.
- Интерактивті 3D типографиялық эффекттер жасаңыз
Бұл тозақ сияқты әсерлі көрінеді және қызықты қолданушы тәжірибесін құру үшін өз жұмысыңызға енгізу қиын емес; осылай жасалады.
Жеке тартымды сайт жасағыңыз келе ме? Веб-сайт жасаушы құралды қолданып көріңіз және дұрыс веб-хостинг қызметін таңдап, жұмысыңыздың дұрыс жүруін қамтамасыз етіңіз.
01. HTML құжатын бастаңыз
Бірінші қадам - HTML құжатының құрылымын анықтау. Оған құжат бастайтын HTML контейнері кіреді, онда бас және дене бөлімдері бар. Бөлім бірінші кезекте сыртқы CSS файлын жүктеуге арналған болса, негізгі бөлім 2-қадамда жасалған көрінетін бет мазмұнын сақтайды.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = «stylesheet» type = «text / css» href = «styles.css» /> / head> body> * * * STEP 2 МЫНА / дене> / html>
02. Көрінетін HTML мазмұны
Көрінетін HTML мазмұны көрінетін мәтінді қамтитын мақала контейнерінен тұрады. Мақала контейнерінің маңызды бөлігі - визуалды эффектілерді қолдану үшін CSS сілтеме жасайтын ‘data-animate’ атрибуты. Мақала ішіндегі мәтін h1 тегінен жасалған, бұл мазмұн парақтың басты тақырыбы болып табылады.
Article data-animate = «жылжу»> h1> Сәлем! / h1> / article>
03. CSS бастамасы
’Styles.css’ деп аталатын жаңа файл жасаңыз. Бірінші нұсқаулық парақтың HTML контейнері мен корпусын қара фонмен, сонымен қатар көрінетін шекара аралықтары жоқ етіп орнатады. Ақ ақ парақтың барлық еншілес элементтері үшін мәтіннің әдепкі түсі ретінде орнатылады; мәтіннің әдепкі қара түсіне жол бермеу, көрінбейтін болып көрінеді.
html, негізгі мәтін {өң: # 000; төсеме: 0; маржа: 0; түс: #fff; }
04. Анимациялық контейнер
'Data-animate' атрибутымен сілтеме жасалған мазмұн контейнерінде белгілі бір стильдер қолданылады. Оның өлшемі vw және vh өлшем бірліктерін қолдана отырып, сонымен қатар сәл айналдырылып, экранның толық өлшеміне сәйкес келеді. 20 секундқа созылатын және шексіз қайталанатын ‘moveIn’ анимациясы қолданылады.
[data-animate = «жылжу»] {позиция: салыстырмалы; ені: 100vw; биіктігі: 100 сағ; мөлдірлік: 1; анимация: moveIn 20s шексіз; мәтінмен туралау: орталық; түрлендіру: айналдыру (20deg); }
05. Анимацияны бастау
Алдыңғы қадамда сілтеме жасалған 'moveIn' анимациясы @keyframes көмегімен анықтаманы қажет етеді. Анимацияның 0% -тен басталатын бірінші кадр қаріптің әдепкі өлшемін, мәтіннің орналасуын және көрінетін көлеңкені орнатады. Сонымен қатар, элемент бастапқыда көрінбейтін етіп нөлдік мөлдірлікпен орнатылады - яғни. көрінбейтін жерде көрсетіледі.
@keyframes moveIn {0% {қаріп өлшемі: 1em; сол жақта: 0; бұлыңғырлық: 0; мәтін көлеңкесі: жоқ; } * * * МЫНА 6 ҚАДАМ}
06. Көзге көрінетіндей етіп жасаңыз
Келесі кадр 10% анимация арқылы орналастырылады. Бұл кадр мөлдірлікті толығымен көрінетін етіп орнатады, нәтижесінде мәтін біртіндеп көрініске айналады.Сонымен қатар, мәтінге 3D тереңдігі туралы иллюзия беру үшін бірнеше көлеңкелер көк және азаятын түс мәндерімен қосылады.
10% {мөлдірлігі: 1; мәтін көлеңкесі: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * МЫНА 7 ҚАДАМ
07. Анимацияны аяқтау
Соңғы кадрлар 80% -да және анимацияның соңында пайда болады. Олар қаріп өлшемін ұлғайтуға және элементті солға қарай жылжытуға жауапты. Мәтін көлеңкесі үшін анимациялау үшін жаңа параметрлер қолданылады, сонымен қатар мәтіннің көрінісі 80% -дан 100% -ке дейін жоғалады.
80% {қаріп өлшемі: 8em; сол жақта: -8em; мөлдірлік: 1; } 100% {қаріп өлшемі: 10em; сол жақта: -10эм; бұлыңғырлық: 0; мәтін көлеңкесі: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Ескерту: қандай жобаны бастағыңыз келсе де, бұлтты сақтау орны болуы мүмкін (біздің нұсқаулық көмектеседі).
Бұл мақала бастапқыда Web Designer веб-дизайн журналының 273-санында жарияланған. 273 шығарылымын мына жерден сатып алыңыз немесе веб-дизайнерге жазылыңыз.
