Мазмұны
- CSS ауысуларына кіріспе
- CSS түрлендірулеріне кіріспе
- JQuery флип-галереясын жасау
- HTML түзетуі
- Виджет жасаңыз
- Динамикалық түзетуді қосыңыз
- Жансыздандыру
Бұл мақала веб-дизайнерлер мен әзірлеушілерге арналған әлемдегі ең көп сатылатын журнал .net журналының 223 санында алғаш пайда болды.
CSS ауысулары мен түрлендірулері салыстырмалы түрде жаңа және синтаксис стандартқа айналғанға дейін өзгеруі мүмкін. Біз бұл қасиеттерді қазірден бастап қолдана бастауға болады: сатушының префикстелген нұсқаларын қолданғанымызға көз жеткізуіміз керек. Барлық браузерлердің қолданушыларына қолдау көрсету үшін барлық жеткізушілердің префикстелген нұсқаларын қосу маңызды. Алайда бұл өте қысқа кодты жасамайды, сондықтан анық болу үшін мен осы оқулықтың ішінде -webkit префиксін қолданамын.
CSS ауысуларына кіріспе
CSS ауысулары - бұл CSS3 қасиеттерінің өзгеруі арқылы элементтерді анимациялауға мүмкіндік беретін CSS3 жаңа мүмкіндігі. Өтпелі уақыттың көмегімен сіз қандай қасиеттерді анимациялау керек, қанша уақытты алу керек және қандай жеңілдету функциясын қолдану керек, шолушыға айтып бересіз. Тек элементті қосу арқылы элементті автоматты түрде өшірудің мысалы келтірілген:
div # test {-webkit-o'tish-қасиеті: мөлдірлік; -webkit-ауысу-ұзақтығы: 500 мс; -webkit-ауысу-уақыт-функциясы: жеңілдік; мөлдірлігі: 1,0;} div # test.hidden {мөлдірлігі: 0.0;}
CSS түрлендірулеріне кіріспе
CSS түрлендірулері CSS3 үшін жаңа болып табылады және масштабтау, аудару және айналдыру сияқты элементтерде 2D және 3D манипуляциялар жасауға мүмкіндік береді. Кейбір мәтінді айналдыру үшін түрлендіруді қолдануға болатын мысал:
p # test {-webkit-transform: rotate (45deg);}
CSS ауысулары мен түрлендірулерін бірге пайдалану - бұл сіздің веб-сайтыңызға немесе веб-қосымшаңыз үшін шынымен қызықты анимацияларды жасаудың қарапайым тәсілі. Ауыстыруды жеделдетуге болады, сондықтан мобильді құрылғыларда JavaScript анимацияларына негізделген дәстүрлі таймерге қарағанда әлдеқайда жақсы жұмыс істейді.
JQuery флип-галереясын жасау
CSS3 түрлендірулерін өтпелермен біріктірудің күшін көрсету үшін бетті бұру эффектісін имитациялайтын jQuery галереясы виджетін құрайық. Қазіргі заманғы браузерлердің көпшілігі қазір CSS-ті ауыстыруды қолдайды, бірақ бәрі де 3D түрлендіруді қолдай бермейді. Біз 3D эффектін жасай отырып, Safari, Chrome және iOS сияқты WebKit браузерлеріне бағытталамыз.
HTML түзетуі
Бастау үшін виджетте жұмыс істейтін нәрсе болатындай етіп өз белгілеуімізді орнату керек:
div> img src = «images / photo1.webp» alt = «Photo 1» /> img src = «images / photo2.webp» alt = «Photo 2» style = «display: none» /> img src = «images /photo3.webp «alt =» Photo 3 «style =» display: none «/> / div>
Мұны жасау үшін біз құрамында дивы бар кескін элементтерінің қатарымен қарапайым құрылым жасаймыз. Сондай-ақ, jQuery арқылы қатынасу оңайырақ болғандықтан, біз бұл элементті сыныпқа бөлеміз. Дисплейдің қасиетін бірінші кескіннен басқа ешкімге орнатпау маңызды: егер клиенттің шолушысы қандай да бір себептермен JavaScript-ті қолдамаса, көрсету нашарлайды.
Виджет жасаңыз
Енді бізде jQuery виджетін құру қажет (jQuery виджеттері jQuery UI кітапханасының бөлігі болып табылады). Жеке файлда келесі негізгі виджет үлгісін жасаңыз:
(function ($) {$ .widget («ui.flipGallery», {options: {}, _ create: function () {// Setup widget}}});
Біз DOM-ды флип эффектілеріне дайын болатындай етіп орнату үшін конструкторды (_create ()) қолданамыз. Галереяны жүктеу үшін негізгі HTML құжатына бірнеше код қосу керек. Ол үшін HTML парағыңызға мынаны қосыңыз:
скрипт түрі = «text / javascript» charset = «utf-8»> jQuery (құжат). дайын (function ($) {$ (’div.gallery’). flipGallery ();}); / script>
Сондықтан бізге бірінші кезекте жалпы орнату қажет. _Create () функциясына келесі нәрселерді қосыңыз:
var that = this; // gallerythat.images = that.element.find ('img') үшін барлық кескіндерді табыңыз; // Егер бізде бір ғана сурет болса, жалғастырмаңыз (that.images.length = 1) return; that.currentImageIndex = 0; // кескін өлшемін алыңыз, ол биіктігі = that.images.first (). height (); that.width = that.images.first (). width (); // галереяға көз жеткізіңіз элемент осы өлшем өлшемі болып қалады.element.width (that.width). height (that.height); // sub элементтерін галереяда абсолютті түрде орналастыруға рұқсат етіңіз.element.css ('позиция', 'қатысты'); // Реттеу perspectivethat.element.css қолдайтын элемент ({'- webkit-perspective': 1100, '- webkit-perspective-origin': '50% 50% '})
Жоғарыда келтірілген код біз белгілеген барлық кескіндердің тізімін алады және контейнер элементінің дұрыс өлшемін қамтамасыз етеді. Сондай-ақ, ол көрсетілетін кескіннің индекс нөмірін қадағалау үшін дананың айнымалысын жасайды. Біз мұны кейінірек кескіндер дәйектілігі бойынша өту үшін қолданамыз.
Осы кодтың соңғы бөлігі галерея элементіне перспектива орнатады. Біз 3D эффектін құрып жатқан кезде, элементке перспектива керек екенін айтуымыз керек, әйтпесе біз көшу кезінде бет экраннан шықпайды. -Webkit-перспективасы үшін қолданылатын сан неғұрлым аз болса, перспектива соғұрлым айқын болады. Бұл әсер үшін мен шамамен 1100 шамасының ең жақсы болатынын анықтадым.
Динамикалық түзетуді қосыңыз
Біз қазір виджетті бірдеңе жасауға дайынбыз. Алдымен біз қажетті эффект үшін қандай элементтер қажет болатынын анықтауымыз керек. Біз парақты құра отырып, кітапты параққа айналдырғанда не болатынын ойлауымыз керек.
- Біз бірінші кескінді толығымен көруден бастағымыз келеді.
- Содан кейін біз осы бірінші кескіннің оң жақ бөлігі екінші кескіннің оң жағын ашып, ортасына айналғанын көргіміз келеді.
- Айналдырылған элемент экранға перпендикуляр болғаннан кейін біз айналуды жалғастырғымыз келеді, бірақ оның орнына екінші кескіннің сол жағын көрсетіңіз.
Бұған жету үшін біз жоғарыдағы сызбаны көрсететін DOM элементінің құрылымын жасағымыз келеді.
Енді қажетті қабаттарға сәйкес келетін бірнеше DOM элементтерін құрайық. Біз img /> элементтерін көрсетудің орнына кескіндердің кейбір бөліктерін ғана көрсете білуіміз керек, кескіндерді элементтердің фонына қолданамыз. Бұл бізге суреттерді өз қалауымыз бойынша динамикалық түрде кесуге (немесе кесуге) мүмкіндік береді. Бір және екінші қабаттарды құру үшін келесі кодты қосу керек:
// Athat.imageLeftA = $ ('div />', {'class': 'imageLeftA'}) суреттің сол жағындағы слайдты көрсету үшін элемент жасаңыз. Css ({ені: '100%', биіктігі: '100 % ', позиция:' қатысты '}); // Bthat.imageRightB = $ (' div /> ', {' class ':' imageRightB '}) суреттің оң жағын көрсететін элемент жасаңыз. css ({ // Толық биіктігі, енінің жартылай ені: '50% ', биіктігі:' 100% ', // ImageLeftAposition:' абсолютті ', жоғарғы жағы:' 0px ', оң жағы:' 0px ', // оң жақ туралау backgroundbackbackPosition: 'оң жақ жоғарғы'}). appendTo (this.imageLeftA); // DOMthat.imageLeftA.appendTo (that.element) қосу;
Әрі қарай біз бұрылатын бетті бейнелейтін элементтерді қосамыз. Оған үш және төрт қабаттар кіреді:
// Енді overthat.page = $ ('div />', {'class': 'page'}) аударылатын 'бет' жасаңыз. Css ({// Толық биіктігі, енінің жартысы: '50% ', биіктігі: '100%', // кескіннің оң жақ бөлігін жабыңыз: 'абсолютті', жоғарғы жағы: '0px', оң жағы: '0px', // біз бұл элементке ішкі элементтердің бағдарларын сақтау үшін айтуымыз керек. transformed'-webkit-transform-style ':' preserve-3d '}); that.imageRightA = $ (' div /> ', {' class ':' imageRightA '}). css ({// Контейнерді толтыру (ол толық биіктік, жарты ен) ені: '100%', биіктігі: '100%', // фондық фонды оң жаққа туралаңыз Орын: 'оң жақта', // элемент беттің сол жақ жоғарғы бөлігінен басталатындығына көз жеткізіңіз : 'Absolute', top: '0px', сол жақта: '0px', // Біз кескінді бізге қарама-қарсы тұрған кезде көргіміз келмейді '-webkit-backface-visibility': 'hidden'}). appendTo (that.page); that.imageLeftB = $ ('div />', {'class': 'imageLeftB'}). css ({// Контейнерді толтырыңыз (ол толық биіктігі, ені жарты) ені: '100 % ', биіктігі:' 100% ', // Элементтің жоғарғы жағынан басталатындығына көз жеткізіңіз Беттің сол жағынан: 'абсолютті', жоғарғы жағы: '0px', сол жағы: '0px', // біз бұл панельді айналдыруымыз керек, өйткені экраннан '' webkit-transform ':' rotateY ( 180deg) ', // Біз кескінді бізге қараған кезде көргіміз келмейді'-webkit-backface-visibility ':' hidden '}). AppendTo (that.page); that.page.appendTo (that .элемент);
Жоғарыда келтірілген кодта ескеретін маңызды нәрсе - В кескінін бейнелейтін элементтің сол жағы экранға қарама-қарсы орналасқан етіп 180 ° бұрылады. Парақ элементінің ішіндегі екі қабатқа да тек алдыңғы бетін көрсету үшін айту маңызды. Бұл CSS3 қасиетін '-webkit-backface-visibility' қолдану арқылы жүзеге асырылады:
'Жасырын' және бұл экранға қарамаған элементтің кез-келген бөлігін пайдаланушы көре алмайтынын білдіреді. Көрсетілетін элементтердің артқы бетіне жол бермеу арқылы біз екі қосалқы элемент парақтың екі жағында болатындай әсер қалдырамыз.
Сонымен қатар, біз бет элементінде екі қабатты қамтитын тағы бір жаңа CSS3 қасиетін ’-webkit-transform-style’: ’preserve-3d’ қолдандық. Бұл қасиет ішкі элементтер бойынша түрлендірулерді осы элементке қатысты есептеуге мәжбүр етеді. Бұл сәл түсініксіз, бірақ мысал үшін бұл бет элементін айналдырған кезде екі еншілес элемент онымен бірге айналатындығын білдіреді. Онсыз сіз күтпеген мінез-құлық аласыз.
Жансыздандыру
Осы кезде біз барлық DOM элементтерін орнаттық, сондықтан контейнерден түпнұсқа кескіндерді алып тастап, әртүрлі қабаттарға дұрыс кескіндерді бояуымыз керек. _Create () функциясын аяқтау үшін келесі екі жол кодын қосыңыз:
// DOMthat.images.remove () ішінен кескіндерді алып тастаңыз; that._setupImages ();
Біз қазір жаңа функцияны шақырып жатқандықтан, _setupImages () функциясының не істейтінін анықтауымыз керек. Виджетке келесі кодты қосыңыз:
_setupImages: function () {var that = this; var nextImageIndex = that.currentImageIndex + 1; // Диапазон келесі кескін индексін тексеріңіз (nextImageIndex> = this.images.length) nextImageIndex = 0; // Толтырғыш элементтерін орнатыңыз дұрыс backgroundsthat.element.add (that.imageLeftA) .add (that.imageRightA) .css ('background-image', 'url (' + $ (that.images.get (that.currentImageIndex)) .attr ('src ') +') '); that.imageRightB.add (that.imageLeftB) .css (' background-image ',' url ('+ $ (that.images.get (nextImageIndex)) .attr (' src ') + ')');}
Бізде галереяны инициалдауға болатын барлық жағдай бар, бірақ осы кезде браузерден бірінші сурет қана көрінеді. Енді парақты шынымен орындау функциясын қосайық.
Алдымен бізге эффект тудыру әдісі керек. Мұны HTML файлына батырма қосу арқылы жасауға болады:
батырма түрі = «батырма»> Келесі суретті көрсету / батырма>
Түймені тыңдаушыны қосу үшін бізге jQuery.ready кодын өзгерту керек. Функцияны келесідей етіп өзгертіңіз:
jQuery (document) .ready (function ($) {$ ('div.gallery'). flipGallery (); $ ('button.next'). click (function (event) {event.preventDefault (); // Trigger $ flip $ парағы ('div.gallery'). flipGallery ('кезек');});});
Түйме басылған кезде, ол біздің виджетте бұралу функциясын іске қосады. Енді бұл функцияны бетті бұру эффектісін жасайтын етіп жүзеге асырайық. Келесі кодты қосыңыз:
turn: function () {var that = this; // set the switchthath.page.css ({'- webkit-o'tish-property': '-webkit-transform', '- webkit-o'tish-duration': '1000ms') , '- webkit-o'tish-уақыт-функция': 'жеңілдету', // Айналдырудың сол жақ жиектің айналасында тұрғанын тексеріңіз'-webkit-transform-origin ':' left '}); // setTimeout () қолданыңыз жоғарыдағы параметрлердің күшіне енгеніне көз жеткізіңіз beforeproceedingsetTimeout (function () {that.page.css ({// Y осі айналасында солдан оңға қарай айналдыру'-webkit-transform ':' rotateY (-180deg) '});}, 50);}
Сонымен, жоғарыдағы код не істейді? Алдымен, біз парағымызға қандай қасиетті жандандыру керектігін және анимацияның қалай пайда болуын қалайтын CSS береміз. Бұл жағдайда -webkit-түрлендіру сипатындағы кез-келген өзгеріс 1 000 м ұзындықта анимацияланғанын қалаймыз және уақытты жеңілдету функциясын қолданғымыз келеді. Сондай-ақ, біз элементтің сол жағына айналдыруды қалаймыз. Бұл бет элементін айналдырған кезде (суреттің оң жағын бейнелейді) оның кескіннің ортасына айналуын қамтамасыз етеді.
Содан кейін кодтың екінші бөлігі айналдыруға қолданылады, біз бет элементінің болуын қалайтын жаңа позицияны орнатамыз. Себебі біз барлық жаңа айналдыру позициясына ауысудың орнына -webkit-түрлендіру қасиетінің барлық өзгерістері анимациялануы керек дедік. , парақтың элементі біркелкі анимацияланып, қажетті бет бұру әсерін береді.
Біз аяқтаған сияқты көрінуі мүмкін, бірақ кез-келген кездейсоқ кескінді айналып өту үшін келесі кескінді қалай орнатамыз? Бақытымызға орай, көшу аяқталғаннан кейін браузер оқиғаны бастайды, біз оны нұқу немесе пернені басу сияқты тыңдай аламыз. Келесі ауысу үшін қалпына келтіру үшін оқиға тыңдаушысын қосу арқылы өз кезегімізді () функциясын өзгертейік. Turn () функциясының бірінші жолын келесі жаңа кодпен ауыстырыңыз:
var that = this; // ауысу аяқталғаннан кейін іске қосылатын функцияны орнатуvarEd = function (event) {// eventsthat.page.unbind ('webkitTransitionEnd', o'tishEnd) үшін тыңдауды тоқтату; that.currentImageIndex ++; // Range жаңа кескін индексін тексеріңіз (that.currentImageIndex> = that.images.length) that.currentImageIndex = 0; // галереяның өңін жаңа imagethat.element.css ('background-image', that.imageLeftB) етіп орнатыңыз. css ('background-image')); // галереяны ашу үшін құрылған DOM элементтерін жасыру backgroundvar elements = that.imageLeftA.add (that.page) .hide (); // беттегі өзгертулерді анимациялық күйінде тоқтату. page.css ({'- webkit-o'tish-property': 'none'}); setTimeout (function () {// келесі turnthat.page.css элементтерін қалпына келтіріңіз ('- webkit-transform' ',' none '' that._setupImages (); elements.show ();}, 50);} // ауысу аяқталған кезде тыңдаңызthat.page.bind ('webkitTransitionEnd', o'tishEnd);
Енді көшу аяқталғаннан кейін келесі бетті бұру үшін қалпына келтіру үшін келесі әрекеттерді орындаймыз:
- Ағымдағы кескін индексін көбейтіңіз.
- Галерея элементтерінің фонын жаңа кескін ретінде орнатыңыз.
- Біздің жеке қабаттарымызды жасырыңыз.
- Өтпелерді өшіріп, біздің бет элементіндегі айналуды қалпына келтіріңіз.
- Ағымдағы кескіндерді біздің қабатқа бояу үшін _setupImages () қоңырау шалыңыз, қатардағы ағымдағы және келесі суреттер үшін.
Біз қанша жұмыс істесек те, біздің дайын өнім - портфолио галереясы үшін керемет көрінетін парақтың флип-эффектілерін жасай алатын қайта пайдалануға болатын jQuery виджеті бар.
