Idag kommer vi att ha alla slags roliga med CSS flera bakgrunder funktionen. Du lär dig hur du använder flera bakgrunder på ett enkelt sätt och hur du går mycket längre genom att kombinera tekniken med svängåtgärder och CSS-övergångar för att skapa några riktigt coola effekter.
Följ med när vi kodar fem olika tillämpningar av den här idén att du kan kopiera och klistra in för att skapa dina egna fantastiska hovers.
Vad vi bygger
Här är en snygg topp av vad vi ska skapa idag. Håll över cirklarna och fundera på hur du skulle uppnå dessa effekter med ren CSS.
demo: Klicka här för att starta demo.
Flera bakgrunder
Fram till nyligen hade jag aldrig spelat med att använda flera bakgrundsbilder i min CSS. Jag visste att funktionen existerade men jag hade inte riktigt kommit fram till ett unikt sätt att använda det. Parallax molniga himlen är fantastiska, men alla gör dem och jag ville inte helt enkelt följa publiken.
Lösningen som jag kom fram var att räkna ut några bra svängverkningar som skulle utnyttja flera bakgrunder för att skapa en slags öppningsanimation. Det är ett super lätt trick men jag har inte sett det gjort förut så jag trodde att jag skulle visa dig hur det fungerar.
Det finns en miljon olika sätt att springa med, idag bygger vi fem olika versioner så att du verkligen får en känsla för vad som är möjligt.
Konceptet
Din typiska CSS-hoveranimering är ganska grundläggande: en bild glider bort för att avslöja en annan, något roterar eller studsar, färgerna blekna och plus; du får tanken.
När vi slänger flera bakgrunder i scenariot men vi har plötsligt en hel del variabler att arbeta med. Med väldigt liten inställning kan vi skapa några till synes komplexa animationer med endast CSS-övergångar, som för närvarande fortfarande har bättre webbläsare än keyframe-animationer.
Låt oss säga att vi vill ha en öppningsdörrseffekt. Vi kan animera två bakgrundsbilder i olika riktningar och uppnå denna illusion med lätthet:
Nu när vi har förklaringen ur vägen. Låt oss komma till den roliga delen och börja bygga våra svängareffekter.
Skjutdörrar: Horisontell
Låt oss ta det hypotetiska exemplet ovanifrån och se om vi kan bygga något som använder denna effekt. För att starta behöver vi två bakgrundsbilder.
Eftersom vi bara visar upp en idé spelar det ingen roll vilka bilder du använder, bara se till att en av dem är en textur som kommer att kakel. Jag använder Dark Wood-strukturen från Subtle Patterns och ett piktogram från den fria WC-utdelningen A Bta.
Base CSS
Skapa en tom div i HTML och använd en klass som använder en del grundläggande styling. Vi tillämpar den här klassen på alla de exempel vi bygger idag.
Jag kastar en massa dessa i ett dokument så jag har några layoutstilar, men viktigast här är gränsenradiusen inställd till halva höjden / bredden, vilket ger oss en fin cirkel.
Våra bakgrundsbilder kommer att staplas, men här spridas de ut med gränserna som appliceras.
Använda flera bakgrundsbilder
Det första vi ska göra är att applicera båda bakgrundsbilderna, men som en kurvboll kommer vi att använda trätexturen två gånger för totalt tre bakgrundsbildsapplikationer.
Att tillämpa flera bakgrundsbilder i CSS är lika enkelt som det blir, bara tillämpa ett som normalt, släng sedan in ett kommatecken och använd ett annat.
Dessa bilder kommer att ha en naturlig stapelordning som korrelerar med den ordning i vilken du listar dem: den första är toppbilden och den sista är botten.
Du kan placera bakgrunden med stenografi, men för det här exemplet tycker jag att det är bäst att hålla sakerna åtskilda för att göra det lätt för läsarna. Med detta i åtanke, vi kasta i bakgrund-positionen egendom så att vi kan flytta våra bilder på plats.
Självklart korrelerar varje uppsättning positioneringsvärden till en av de bilder som vi har tillämpat. Det första värdet i varje set flyttar bilden till höger (positivt värde) och vänster (negativt värde) och det andra värdet flyttar upp det (positivt värde) och nedåt (negativt värde).
Som du kan se har jag delat cirkeln helt ner i mitten så att en version av träbilden är till vänster och en är till höger med bilbilden sitter mitt i mitten.
Det verkar galet att placera träbilden så här eftersom du bara kan använda en, men det här låter oss göra en trevlig animering.
Animera bilderna
Nu, eftersom vi kan flytta var och en av dessa bakgrundsbilder oberoende, kan vi komma med några ganska coola resultat om vi tillämpar övergångar.
För att ställa in detta slänger vi in alla de olika webbläsarprefixen och skapar en enkel övergång som varar i en sekund eller mindre. Sedan sätter vi upp en svängväljare som flyttar den vänstra träbakgrunden längre åt vänster och den högra träbakgrunden längre fram till höger.
Med det är vi färdiga med det första exemplet. Nu när du svävar över träkretsen glider dörrarna upp för att avslöja bilden nedanför.
Skjutdörrar: Vertikal
Nu när vi har kommit igenom ett exempel är det en vind att ändra denna effekt. Här använder vi samma CSS-övergångar och bakgrundsbilder, det enda som ändras är placeringen av de två trästrukturbilderna. Den här gången staplar vi dem på toppen av varandra och flyttar dem upp och ner när användaren svävar.
Break Apart: Squared
Låt oss stega upp lite och använda totalt fem bilder för övergången. I grund och botten, när du svävar över cirkeln, kommer bilden att delas upp i fyra bitar och flyga ur sikte.
Vi anpassar de fyra bästa bilderna så att de möts vertikalt och horisontellt mitt i cirkelns mitt. Sedan rör vi sig upp och ut på svävaren.
Break Apart: Avrundad
Upprepa dessa effekter med en rundad bild är lite svårare eftersom man måste använda genomskinliga PNG och två, eftersom du måste göra bilderna överlappar varandra i standardläget. Den senare orsakar komplicerade problem med att skapa texturer, men om du använder något som en enkel brusstruktur är det ganska enkelt.
Twist och Shout
Det här är svårt att få kärnan från bilden ovan. I grund och botten är det samma som övergången övergången ovan, bara jag har lagt till det extra elementet av en rotation som uppträder innan bilderna bryts och avslöjar vad som ligger nedanför.
Det handlar om en del quirks. Problemet med rotationen är att det roterar alla bakgrundsbilder, inklusive bilen nedanför. För att ta reda på detta, roterade jag bilen på förhand så att övergångsrotationen verkligen sätter den rätt på plats. Du fångar glimt av bilen under rotationen, men det bidrar bara till effekten.
En annan intressant sak är tidpunkten för övergångarna. Observera att jag faktiskt sätter olika varaktigheter på rotations- och rörelsestransitionerna. Detta visar hur otroligt komplicerat du kan få med denna idé.
Ta en annan titt
Nu när du har sett koden, ta en titt på demoen för att se dessa tekniker i aktion.
demo: Klicka här för att starta demo.
Slutsats
Poängen med denna artikel var att få dig att tänka bortom parallaxeffekter för hur man applicerar flera bakgrunder på ett intressant sätt.
Lämna en kommentar och låt oss veta vad du tycker om exemplen ovan. Har du gjort något med flera bakgrundsbilder? Vi vill se det!