CSS kan dra av mycket riktigt bra bildtriker: storleksmanipulation, desaturering, jämn oskärpa. En begränsning som vi stöter på är att du inte kan skära en bild i flera delar. Till exempel, om du ville klippa ett foto i halv och animera separationen, kunde du inte göra det med ren CSS. Kan du?
Idag kommer vi att koda upp ett arbete där vi kan uppnå det här tricket utan en ounce av JavaScript eller extra filer. Låt oss se hur det fungerar.
Tjuvtitt: Starta Demo
Hat Tips till Kyle Foster
Nyligen skapade utvecklaren Kyle Foster ett trevligt litet jQuery-plugin med en effekt som jag verkligen gillar (visas här). När användaren svänger över en bild splittras den i halv horisontal och separerar för att avslöja ett dolt meddelande. Här är en skärmdump av hans demo:
Som du kan se är det en bra liten bit av användargränssnitt. Som jag alltid gör när jag stöter på någonting så här, började jag tänka på hur man uppnå något liknande med endast CSS. Problemet är att CSS verkligen inte låter dig dela upp en sådan bild. Jag visste att flera bakgrundsbilder höll lösningen, men jag ville inte behöva lägga in två separata bilder för varje foto som använde denna effekt. Lyckligtvis, med en liten uppfinningsrikedom kan vi dra av det med en enda bild. Läs vidare för att se hur.
Steg 1: Formatera din bild
CSS tillåter oss att tillämpa flera bakgrundsbilder till ett enda element. Intressant nog kan vi använda denna funktionalitet för att tillämpa samma bakgrundsbild flera gånger och placera varje instans på ett unikt sätt. Med denna information i åtanke presenterar vi en lösning på vårt problem.
Tricket att dra av det här är att dela upp bilden i halv i Photoshop innan du lägger in den. Kolla in exemplet nedan för att se vad jag menar. Det ser lite konstigt ut, men det ger oss möjlighet att göra exakt vad vi behöver.
Arbetsflödet för att göra detta går så här (gärna tweak dimensionerna):
- Skapa en bild som är 300px bred med 300px lång
- Klipp bilden mitt över mitten och placera de två halvorna på olika lager.
- Gå till Canvas Storlek i Photoshop och öka duken till 300px med 375px.
- Placera den nedre halvan av fotot längst upp på duken.
- Placera den övre halvan av fotot längst ner på duken.
Det låter som en smärta, men när du förstår ditt sinne om hur det fungerar går det väldigt snabbt. Du kan även spela in en åtgärd som gör det för dig om några sekunder. I grund och botten har det vi gjort gjort det möjligt för en fil att fungera som både topp och botten av vår bild. Det kan utföra den här funktionen eftersom den plattlar snyggt: när två stöts upp mot varandra, flyter bilden sömlöst från den ena till den andra. Oroa dig inte om den jätte vita randen i mitten, som helt enkelt kommer att döljas.
Steg 2. Markup
Nu när vi har en bra idé för hur det här ska fungera, låt oss markera det. Kom ihåg att vi vill få en bildtexning att avslöjas, så vi lägger en stycke-tagg inuti en div.
Denna div har två klasser: avslöja och plugga. The? Avslöja? klassen är där vi lägger mycket av den repeterbara koden som vi kommer att vilja utföra över alla liknande element. Pluggen? klassen kommer att innehålla den specifika koden som gäller pluggen bilden som visas ovan.
Steg 3. Starter CSS
För att träffa marken, här är den grundläggande CSS som jag ska använda i demo. Den del som verkligen betyder är att avslöja? kod, som anger storleken på vår behållare.
Steg 4. Flera bakgrunds CSS
Kom nu ihåg att vår startbild var 300px med 300px, vilket är den storlek som vi gjorde vår behållare. Det innebär att vi kan fylla den behållaren med bildområdet utan att låta någon av de vita staplarna på vår jpg-show.
För att göra detta ställer vi tre bakgrunder på vårt element, som är separerade av ett komma. De två första är samma plugga bild och den tredje är en solid färg. Å ena sidan är vi ungefär använder flera bilder, men webbläsaren behöver bara ladda in en fil så att vi behåller våra http-förfrågningar lägre än om vi hade använt två distinkta bilder (det är i grunden precis som att använda bildsprites).
Numren efter var och en av bakgrunden representerar positioneringsvärden. Det första numret är horisontellt offset och den andra är vertikal offset. Vi kompenserar vår första bild en positiv 150px och den andra en negativ 225px. Observera att 150 + 225 är lika med 375, vilket är hela jpg-höjden.
Observera också att det är mycket viktigt att du ställer in bakgrunden till no-repeat, annars fungerar det inte alls.
Steg 5. Övergång
När vi svävar över elementet kommer vi att glida de två instanserna av vårt foto bort från varandra för att avslöja en bildtext. Vi vill se till att detta händer smidigt, så var noga med att lägga till i en övergång.
Steg 5. Hover Styles
Vid den här tiden är alla de hårda grejerna färdiga.Allt vi behöver göra är att flytta varje instans av bilden utåt från mitten när användaren svänger över elementet. Vi gör detta genom att justera dessa positioneringsvärden som så:
Nu när en svängningshändelse inträffar, kommer bildens första instans att glida ner med 60px och andra instansen kommer att glida upp med 60px. Så här ser det här ut:
Steg 6. Bildtexten
Därmed blir vår till synes omöjliga effekt faktiskt ganska enkel! Glöm inte, men vi har den pesky bildtexten att jobba med nu. Med tanke på att vi bäddar in vårt foto med CSS-bakgrundsbilder, kommer texten faktiskt att visas ovanpå bakgrunden, vilket vi inte vill ha alls. Med lite extra markup kunde vi skapa en extra div och behålla texten någon annanstans, vilket fungerar bra.
Vi kan dock behålla vår markering till ett minimum och helt enkelt förfalska det om vi manipulerar textens opacitet. Med hjälp av den här metoden kommer vi helt enkelt att göra bildtexten osynlig tills användaren svävar över bilden och sedan bleknar den till bild. Här är en del av CSS som vi behöver göra allt detta.
Steg 7. Skölj, Skölj, Repetera
Det är ganska mycket allting där. Vi har skapat ett system som enkelt kan utvidgas över olika delar. Här tillämpas vi snabbt på tre saker.
Nu kan vi använda liknande CSS över varje version och tillämpa samma positioneringsvärden över hela linjen när du blandar bakgrundsbilderna.
Ta en titt!
Vårt arbete är klart, nu är det dags att luta sig tillbaka och beundra det vi byggt. Kolla in det genom att följa länken nedan. När du väl har tittat på det, lämna en kommentar nedan och låt mig veta vad du tycker.
demo: klicka här för att starta
