Inhoud
- Inleiding tot CSS-overgangen
- Inleiding tot CSS-transformaties
- Een jQuery-widget van een flip-galerij maken
- HTML-opmaak
- Maak de widget
- Voeg dynamische markeringen toe
- Animeren
Dit artikel verscheen voor het eerst in nummer 223 van .net magazine - 's werelds best verkochte tijdschrift voor webdesigners en -ontwikkelaars.
CSS-overgangen en -transformaties zijn nog relatief nieuw en de syntaxis kan veranderen voordat deze een standaard wordt. We kunnen deze eigenschappen nu echter nog steeds gaan gebruiken: we moeten er alleen voor zorgen dat we de door de leverancier vooraf ingestelde versies gebruiken. Om gebruikers van alle browsers ondersteuning te bieden, is het belangrijk om alle vooraf ingestelde versies van de leverancier op te nemen. Dit zorgt echter niet voor bijzonder beknopte code, dus voor de duidelijkheid zal ik in deze tutorial gewoon het voorvoegsel -webkit gebruiken.
Inleiding tot CSS-overgangen
CSS-overgangen zijn een nieuwe functie van CSS3 waarmee u elementen kunt animeren door simpelweg CSS-eigenschappen te wijzigen. Met behulp van overgangen vertel je de browser welke eigenschappen geanimeerd moeten worden, hoe lang ze zouden moeten duren en welke versoepelingsfunctie er moet worden gebruikt. Hier is een voorbeeld van hoe een element automatisch kan worden vervaagd door gewoon een klasse toe te voegen:
div # test {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -webkit-transition-timing-function: gemak; opacity: 1.0;} div # test.hidden {onacity: 0.0;}
Inleiding tot CSS-transformaties
CSS-transformaties zijn ook nieuw in CSS3 en laten u 2D- en 3D-manipulatie uitvoeren op elementen zoals schalen, vertalen en roteren. Hier is een voorbeeld van hoe u een transformatie kunt gebruiken om tekst te roteren:
p # test {-webkit-transform: rotate (45deg);}
Het samen gebruiken van CSS-overgangen en -transformaties is een gemakkelijke manier om echt boeiende animaties voor uw website of webapp te maken. Overgangen kunnen ook hardware-versneld worden, zodat ze veel beter werken op mobiele apparaten dan de traditionele op timer gebaseerde JavaScript-animaties.
Een jQuery-widget van een flip-galerij maken
Om de kracht van het combineren van CSS3-transformaties met overgangen te demonstreren, laten we een galerijwidget voor jQuery maken die een pagina-omslageffect nabootst. De meeste moderne browsers ondersteunen nu CSS-overgangen, maar nog niet alle ondersteunen 3D-transformaties. Omdat we een 3D-effect creëren, richten we ons alleen op WebKit-browsers zoals Safari, Chrome en iOS.
HTML-opmaak
Om te beginnen moeten we onze opmaak zo instellen dat de widget iets heeft om mee te werken:
div> img src = "images / photo1.webp" alt = "Foto 1" /> img src = "images / photo2.webp" alt = "Foto 2" style = "display: none" /> img src = "afbeeldingen /photo3.webp "alt =" Foto 3 "style =" display: none "/> / div>
Om dit te doen, maken we een eenvoudige structuur met een reeks afbeeldingselementen in een bevattende div. We zullen dit element ook een klasse geven zodat toegang via jQuery gemakkelijker is. Het is belangrijk om de eigenschap display in te stellen op geen voor iedereen behalve de eerste afbeelding: op deze manier zal de weergave beter verslechteren als, om de een of andere reden, de browser van de client geen JavaScript ondersteunt.
Maak de widget
Nu we onze opmaak hebben, moeten we de jQuery-widget maken (jQuery-widgets maken deel uit van de jQuery UI-bibliotheek). Maak in een apart bestand de volgende basiswidgetsjabloon:
(function ($) {$ .widget ("ui.flipGallery", {options: {}, _ create: function () {// Setup widget}}});
We zullen de widgets-constructor (_create ()) gebruiken om de DOM zo in te stellen dat deze klaar is voor de flip-effecten. We moeten ook wat code aan het HTML-hoofddocument toevoegen om de galerij bij het laden te maken. Voeg hiervoor het volgende toe aan uw HTML-pagina:
script type = "text / javascript" charset = "utf-8"> jQuery (document) .ready (functie ($) {$ (’div.gallery’). flipGallery ();}); / script>
Dus het eerste dat we moeten doen, is een algemene configuratie. Voeg het volgende toe aan uw widgets _create () -functie:
var that = this; // Vind alle afbeeldingen voor de gallerythat.images = that.element.find ('img'); // Als we maar één afbeelding hebben, ga dan niet verder als (that.images.length = 1) return; that.currentImageIndex = 0; // Get image dimensionsthat.height = that.images.first (). height (); that.width = that.images.first (). width (); // Zorg ervoor dat de galerij element blijft deze sizethat.element.width (that.width) .height (that.height); // Sta subelementen toe om absoluut gepositioneerd te worden binnen de gallerythat.element.css ('positie', 'relatief'); // Setup het element om perspectivethat.element.css te ondersteunen ({'- webkit-perspectief': 1100, '- webkit-perspectief-oorsprong': '50% 50% '})
De bovenstaande code haalt een lijst op van alle afbeeldingen die we in markup hebben gespecificeerd en zorgt ervoor dat het containerelement de juiste grootte heeft. Het maakt ook een instantievariabele om het indexnummer van de weergegeven afbeelding bij te houden. We zullen dit wat later gebruiken om door de reeks afbeeldingen te gaan.
Het laatste deel van deze code biedt perspectief op het galerij-element. Omdat we een 3D-effect creëren, moeten we het element vertellen om perspectief te hebben, anders lijkt de pagina niet uit het scherm te komen wanneer we de overgang uitvoeren. Hoe kleiner het nummer dat wordt gebruikt voor -webkit-perspectief, hoe duidelijker het perspectief is. Voor dit effect ontdekte ik dat waarden rond de 1100 er het beste uitzien.
Voeg dynamische markeringen toe
We zijn nu klaar om de widget iets te laten doen. Eerst moeten we uitzoeken welke elementen we nodig hebben voor het gewenste effect. Terwijl we een pagina omslaan, moeten we nadenken over wat er gebeurt als u een pagina in een boek omslaat.
- We willen beginnen met het eerste beeld in zijn geheel te zien.
- We willen dan de rechterkant van deze eerste afbeelding rond het midden zien draaien, waardoor de rechterkant van de tweede afbeelding zichtbaar wordt.
- Nadat het geroteerde element loodrecht op het scherm staat, willen we doorgaan met roteren, maar in plaats daarvan de linkerkant van de tweede afbeelding weergeven.
Om dit te bereiken, willen we een DOM-elementstructuur maken die het bovenstaande diagram weerspiegelt.
Laten we nu enkele DOM-elementen maken die passen bij de gewenste gelaagdheid. Omdat we alleen bepaalde delen van de afbeeldingen moeten kunnen weergeven, gaan we de afbeeldingen toepassen op de achtergrond van elementen in plaats van img /> -elementen weer te geven. Dit zal ons in wezen in staat stellen om de afbeeldingen naar believen dynamisch bij te snijden (of te knippen). Om laag één en twee te maken, moeten we de volgende code toevoegen:
// Maak een element om de linker dia van afbeelding Athat.imageLeftA = $ ('div />', {'class': 'imageLeftA'}) te tonen. Css ({width: '100%', height: '100 % ', position:' relatieve '}); // Maak een element om de rechterkant van afbeelding Bthat.imageRightB = $ (' div /> ', {' class ':' imageRightB '}). css ({ // Volledige hoogte, halve breedte: '50% ', hoogte:' 100% ', // Bedek het rechterdeel van imageLeftAposition:' absoluut ', boven:' 0px ', rechts:' 0px ', // Rechts uitlijnen de achtergrond imagebackgroundPosition: 'right top'}). appendTo (this.imageLeftA); // Toevoegen aan de DOMthat.imageLeftA.appendTo (that.element);
Vervolgens voegen we de elementen toe die de pagina vertegenwoordigen die wordt omgeslagen. Dit bevat lagen drie en vier:
// Maak nu de 'pagina' die omdraait dat. Pagina = $ ('div />', {'class': 'pagina'}). Css ({// Volledige hoogte, halve breedte: '50% ', hoogte: '100%', // Bedek het rechtergedeelte van de afbeeldingen positie: 'absoluut', boven: '0px', rechts: '0px', // We moeten dit element vertellen om de oriëntatie van de subelementen te behouden is transformed'-webkit-transform-style ':' preserve-3d '}); that.imageRightA = $ (' div /> ', {' class ':' imageRightA '}). css ({// Vul de container (dat is volledige hoogte, halve breedte) breedte: '100%', hoogte: '100%', // Lijn de achtergrondafbeelding rechts uitbackgroundPosition: 'right top', // Zorg ervoor dat het element links bovenaan de paginapositie begint : 'absolute', top: '0px', left: '0px', // We willen de afbeelding niet zien wanneer deze van ons af gericht is'-webkit-backface-visibility ':' hidden '}). appendTo (that.page); that.imageLeftB = $ ('div />', {'class': 'imageLeftB'}). css ({// Vul de container (die is volledige hoogte, halve breedte) breedte: '100 % ', hoogte:' 100% ', // Zorg ervoor dat het element bovenaan begint links van de pagina position: 'absolute', top: '0px', left: '0px', // We moeten dit paneel roteren zoals het zou moeten beginnen met de achterkant naar buiten gericht '-webkit-transform': 'rotateY ( 180deg) ', // We willen de afbeelding niet zien wanneer deze van ons af is gericht'-webkit-backface-visibility': 'hidden'}). AppendTo (that.page); that.page.appendTo (that.page.appendTo (that.page) .element);
Het belangrijkste om op te merken in de bovenstaande code is dat de linkerkant van het element dat afbeelding B vertegenwoordigt, 180 ° wordt gedraaid, zodat wanneer het begint, het van het scherm af is gericht. Het is ook belangrijk dat we beide lagen binnen het pagina-element vertellen dat ze alleen hun voorkant moeten laten zien. Dit wordt bereikt door de CSS3-eigenschap ’-webkit-backface-Visibility’ te gebruiken:
‘Verborgen’ en betekent dat elk deel van het element dat niet naar het scherm is gericht, niet kan worden gezien door de gebruiker. Door te voorkomen dat de achterkant van de elementen zichtbaar is, wekken we de indruk dat de twee subelementen zich aan weerszijden van de pagina bevinden.
We hebben ook een andere nieuwe CSS3-eigenschap ’-webkit-transform-style’: ’behouden-3d’ gebruikt op het pagina-element dat de twee lagen bevat. Deze eigenschap dwingt de transformaties op subelementen te berekenen ten opzichte van dit element. Dit is een beetje verwarrend, maar voor dit voorbeeld betekent het dat wanneer het pagina-element wordt geroteerd, de twee onderliggende elementen ermee zullen roteren. Zonder dit zul je onverwacht gedrag krijgen.
Animeren
Op dit punt hebben we al onze DOM-elementen ingesteld, dus we moeten de originele afbeeldingen uit de container verwijderen en de juiste afbeeldingen op onze verschillende lagen schilderen. Om de functie _create () te voltooien, voegt u de volgende twee regels code toe:
// Verwijder de afbeeldingen uit de DOMthat.images.remove (); that._setupImages ();
Omdat we nu een nieuwe functie aanroepen, moeten we definiëren wat de functie _setupImages () doet. Voeg de volgende code toe aan uw widget:
_setupImages: function () {var that = this; var nextImageIndex = that.currentImageIndex + 1; // Range check the next image indexif (nextImageIndex> = this.images.length) nextImageIndex = 0; // Stel de placeholder-elementen in met de corrigeer 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 ') + ')');}
We hebben nu alles op zijn plaats om de galerij te kunnen initialiseren, maar op dit punt zien we alleen de eerste afbeelding in de browser. Laten we nu een functie toevoegen om de pagina daadwerkelijk om te draaien.
Eerst hebben we een manier nodig om het effect te activeren. U kunt dit doen door een knop aan uw HTML-bestand toe te voegen:
button type = "button"> Toon volgende afbeelding / button>
We moeten ook onze jQuery.ready-code wijzigen om een luisteraar aan de knop te koppelen. Verander de functie om er als volgt uit te zien:
jQuery (document) .ready (function ($) {$ ('div.gallery'). flipGallery (); $ ('button.next'). click (function (event) {event.preventDefault (); // Trigger een pagina flip $ ('div.gallery'). flipGallery ('turn');});});
Wanneer de knop wordt ingedrukt, wordt nu de draaifunctie op onze widget geactiveerd. Laten we nu deze functie implementeren, zodat deze het effect voor het omslaan van pagina's creëert. Voeg de volgende code toe:
turn: function () {var that = this; // Stel de transitionthat.page.css in ({'- webkit-transition-property': '-webkit-transform', '- webkit-transition-duration': '1000ms' , '- webkit-transition-timing-function': 'gemak', // Zorg ervoor dat de rotatie rond de linkerrand draait'-webkit-transform-origin ':' left '}); // Gebruik setTimeout () om zorg ervoor dat de bovenstaande instellingen van kracht zijn voordat u doorgaat met instellenTimeout (function () {that.page.css ({// Flip van links naar rechts rond de Y-as'-webkit-transform ':' rotateY (-180deg) '});}, 50);}
Dus wat doet de bovenstaande code? Eerst geven we ons pagina-element wat CSS om het te vertellen welke eigenschap moet worden geanimeerd en hoe we willen dat de animatie wordt weergegeven. In dit geval willen we dat alle wijzigingen in de eigenschap -webkit-transform worden geanimeerd over een duur van 1.000 ms, en we willen de functie voor het versnellen van timing gebruiken. We specificeren ook dat we transformaties willen uitvoeren rond de linkerkant van het element. Dit zorgt ervoor dat wanneer we het pagina-element (dat de rechterkant van de afbeelding vertegenwoordigt) roteren, het om het midden van de afbeelding draait.
Het tweede deel van de code is dan van toepassing op de rotatie, waarbij de nieuwe positie wordt ingesteld waarin we willen dat het pagina-element zich bevindt. Omdat we hebben gezegd dat alle wijzigingen in de eigenschap -webkit-transformatie moeten worden geanimeerd, in plaats van onmiddellijk over te schakelen naar de nieuwe rotatiepositie , zal het pagina-element vloeiend animeren, wat het gewenste pagina-omslageffect geeft.
Het lijkt misschien alsof we klaar zijn, maar hoe stellen we de volgende afbeelding in, zodat we door een willekeurig aantal afbeeldingen kunnen bladeren? Gelukkig, wanneer een overgang is voltooid, activeert de browser een gebeurtenis, waarnaar we kunnen luisteren op dezelfde manier als een klik of een toetsaanslag. Laten we onze functie turn () aanpassen door een gebeurtenislistener toe te voegen om te resetten voor de volgende overgang. Vervang de eerste regel van de functie turn () door de volgende nieuwe code:
var that = this; // Stel een functie in om te activeren wanneer de overgang is voltooid var transitionEnd = function (event) {// Stop met luisteren naar transition eventsthat.page.unbind ('webkitTransitionEnd', transitionEnd); that.currentImageIndex ++; // Bereik controleer de nieuwe afbeeldingsindexif (that.currentImageIndex> = that.images.length) that.currentImageIndex = 0; // Stel de achtergrond van de galerij in op de nieuwe imagethat.element.css ('background-image', that.imageLeftB. css ('background-image')); // Verberg de gemaakte DOM-elementen om de galerij backgroundvar-elementen = that.imageLeftA.add (that.page) .hide (); // Stop dat wijzigingen in de pagina worden geanimeerd dat. page.css ({'- webkit-transition-property': 'none'}); setTimeout (function () {// Reset de elementen voor de volgende beurtthat.page.css ('- webkit-transform', 'none' ); that._setupImages (); elements.show ();}, 50);} // Luister wanneer de overgang is voltooidthat.page.bind ('webkitTransitionEnd', transitionEnd);
Wanneer een overgang is voltooid, voeren we de volgende stappen uit om te resetten voor de volgende paginaomslag:
- Verhoog de huidige afbeeldingsindex.
- Stel de achtergrond van de galerijelementen in als de nieuwe afbeelding.
- Verberg onze aangepaste lagen.
- Schakel overgangen uit en reset de rotatie op ons pagina-element.
- Roep _setupImages () aan om de huidige afbeeldingen op onze lagen te schilderen voor de huidige en volgende afbeeldingen in de reeks.
En na al dat harde werk hebben we ons eindproduct - een herbruikbare jQuery-widget die verbluffende pagina-flip-effecten kan produceren die er geweldig uitzien voor een portfoliogalerij.
