Thumbnail gallerier är en konstant källa till fascination för mig. Det är så mycket roligare att ha än att helt enkelt skapa ett rutnät och ringa det en dag. Särskilt eftersom CSS3 ger oss så många kraftfulla nya verktyg att arbeta med.
Idag ska vi blanda upp det tråkiga gammala standardbildgalleriet genom att göra det till en serie animerade cirklar. Längs vägen lär vi oss en hel del användbar CSS-kunskap som hjälper dig i alla framtida projekt.
Sneak Peek
Om du är den typ av person som gillar att hoppa över till slutet så att du kan se var du ska, kolla in live-demoen för den färdiga produkten nedan. Jag inkluderade tre olika versioner av animationen för att ge dig några idéer för hur du kan ändra effekten.
demo: Klicka här för att starta.
Konceptet
Innan vi börjar bygga miniatyrgalleriet, låt oss prata lite om vad vi försöker uppnå. Målet är att ha ett rutnät med cirkulära bilder som animerar på svävaren. När musen kommer in i cirkeln ska bakgrundsbilden flyttas och en tidigare dold bildtext ska glida in i vyn. Låter ganska enkelt rätt? Det finns dock en stor curveball.
När jag planerade ut hur man åstadkom denna prestation, kom jag över en bit av en snag. Det enklaste och mest enkla sättet att genomföra glidande bildseffekt är att använda CSS-bakgrundsbilder. Att ha den här vägen har många praktiska fördelar för oss.
Bakgrundsbildproffs
- Bilden läggs automatiskt bakom texten
- Det är lätt att klippa bilden till sin förälder
- Att animera bilden är lätt, bara skift bakgrundsställningen
Som du kan se finns det ett starkt argument för att du tar denna rutt. Den starkaste fördelen är förmodligen den första. Om vi lägger hela innehållet i HTML så kommer texten faktiskt att trycka på bilden i stället för att flyta överst på den, så vi måste utföra några CSS voodoo.
Om jag bara arbetade med en enda bild skulle det definitivt vara den väg jag skulle ta. Men eftersom vi arbetar med ett bildgalleri verkar det vara fel på något sätt att ta bilderna ur HTML-koden. De är verkligen fokus för sidans innehåll, så jag tycker att de borde vara med innehållet. Jag kan vara över att tänka på det, men jag känner mig som miniatyrbilder gallerier ska infogas via HTML när det är möjligt. Oavsett att den här vägen verkligen gör uppgiften mer utmanande, vilket är bra för pedagogiska ändamål! Låt oss titta på några komplikationer som vi kommer att möta med hjälp av denna metod.
HTML-bildkonsekvenser
- Det är lite svårare att få bilden att klippa till en cirkel
- Att flytta bilden blir inte så enkel
- Vår stapelförlängning kommer alla att vara inkopplade
- Att använda relativ positionering med rundade hörn är en röra
Som du kan se har vi vårt arbete skurit ut för oss. Lyckligtvis är det inte så svårt som det låter och med en liten uppfinningsrikedom får vi vårt galleri igång på nolltid. Låt oss börja!
HTML
Markeringen för det här galleriet kommer att bli väldigt kort. Allt vi verkligen behöver är en orörd lista. Inne i varje listobjekt, placera en bit text följt av en bild (du kan eventuellt länka bilden till någonstans, jag lämnade det för enkelhet).
Observera att behållarens bredd inte är godtycklig. Det kommer att möjliggöra fyra bilder över 200px en bit med 50px margin på varje (250 * 4 = 1.000).
Progress Update
Vid denna tidpunkt bör din bakgrund vara mörk och kulpunkten på dina listobjekt ska vara borta. Annars kommer det i stor utsträckning att se ut som förra gången. Klicka här för att starta live Dabblet.
Line 'Em Up, Round' Em Off
Nästa måste vi rikta oss på listobjekten. Var noga med att använda en mer specifik väljare än? Li? eftersom du utan tvivel aldrig vill att alla dina listartiklar ska ha denna stil. Galleriet? klassen ger en bekväm krok för att göra dessa stilar specifika för alla gallerier som du ställer in.
Trots att våra bilder är 400px fyrkantiga vill vi faktiskt att cirklarna på sidan är 200px fyrkantiga. För att uppnå detta, sätt bara 200px som höjd och bredd för listobjekten. För att avrunda listobjekten, sätt gränsvärdet till 50%. Du kommer inte se detta få verkan tills du tillämpar? Överflödet: gömt? kommando. Också se till att flyta dem till vänster så att de syns i en rak linje.
Det är viktigt att notera att vi gör allt detta till listobjektet, inte bilderna. Detta innebär att bilderna fortfarande kommer att behålla sin större originalstorlek, de kommer helt enkelt att klippas till storleken på listobjektet, vilket gör det möjligt för dem att glida senare.
Progress Update
Därefter ska ditt galleri ta form. Du bör ha fyra cirkulära bilder per rad med förälderbehållaren centrerad. Den udda delen är att våra cirklar är platta överst! Det här beror helt enkelt på att våra bilder måste skötas på plats, vilket vi ska hantera nästa. Klicka här för att starta live Dabblet.
Scoot och sätt animationen
Som vi såg i sista steget är våra bilder faktiskt för långt ner.Vi kan åtgärda detta genom att rikta in några bilder i våra gallerilista och tillämpa en viss negativ marginal till toppen.
Medan vi är här, ska vi också fortsätta och skapa animationen. Vi lärde oss bara att vi kan scoot bilden runt med hjälp av marginaler, så det här är den egendom vi ska rikta in i övergången.
Progress Update
Den enda visuella skillnaden som du kommer att märka denna gång är att den platta toppen på cirklarna har korrigerats. Klicka här för att starta live Dabblet.
Stil paragraferna
Du har antagligen märkt att fram till den här tiden har våra stycken blivit helt dolda. Detta beror på att de staplas ovanför bilderna och utanför gränserna för det klippta listobjektet. Att fixa detta är inte så enkelt som du kanske tror.
Den första tanke som kom till mig var helt enkelt att använda det gamla absoluta / relativa positioneringsverktyget. Det här innebär att ställa in punktelementets position till absolut och listobjektet till relativ. Detta skulle göra det möjligt för oss att scoot stycket på plats i förhållande till startpunkten för listobjektet. Tyvärr finns det en bugg med det sätt som de flesta webbläsare gör gränsradien som illustreras i bilden nedan.
Som vi kan se, den andra vi går och tillämpar relativ positionering till vårt moderelement, kommer det att förlora sina rundade hörn. Det här är definitivt en irritation, men det är inte världens ände. Istället använder vi bara relativ positionering i vår paragraf och scootar den på plats med topp och vänster.
Detta kommer att föra vår paragraf i sikte och låta oss tillämpa lite grundläggande text styling. Vi lägger också upp animeringen för texten, men istället för att använda marginal som tidigare använder vi den översta egenskapen.
Lägg märke till att jag ställde toppen? fastighet till 75% i detta steg. Det här är bara att hitta en söt plats för sista punkten i punkterna. I själva verket vill vi att dom ska vara gömt, så sätt det högsta värdet till 110%.
Progress Update
Efter det här steget bör dina textutdrag nu vara synliga nära botten av dina cirklar. Klicka här för att starta live Dabblet.
Ställ in dina Hover Styles
Nu när allt är upprättat och placerat som vi behöver det är allt vi behöver göra är att flytta allt när användaren svänger över listobjekten. För att göra detta använder vi ett snyggt trick där vi riktar in listobjekten på svävaren, men välj sedan ett barn av det här elementet för att ändra. För att börja rikta vi in listobjekten på svävaren, och mer indikerar att bilderna är vad vi ändrar. Vi upprepar då detta trick med punkterna.
För bilderna, använd ett vertikalt och horisontellt skift i marginalen och för stycket, hämta toppvärdet tillbaka till 75% som vi bestämde oss för tidigare.
Progress Update
Därmed arbetar vår demo äntligen som vi vill att den ska! Håll över varje bild för att se effekten i åtgärd. Klicka här för att starta live Dabblet.
Färdig produkt
Vi är alla färdiga! Som jag nämnde i introet innehåller demo-sidan faktiskt några alternativa versioner av effekten också. Det finns tre totalt: panorera, zooma in och zooma ut. Klicka på länken nedan för att kolla in den.
demo: Klicka här för att starta.
Slutsats
Detta projekt sträckte vår komfortzon genom att ta en annan inställning till en animerad bakgrund. I stället för att använda CSS för att placera bilden kunde vi dra av effekten med både texten och bilden i vår markering. Det är typ av motsatsen till det typiska, mindre uppslaget? strategi, men det är en bra lärande erfarenhet. Att kunna arbeta med ettdera scenariot kommer att göra dig till en bättre kodare, som kan hantera många olika hinder.
På en sidotal är en av de saker som alltid buggar mig med CSS det faktum att de ofta utlöser några oavsiktliga visuella effekter på sidladdning. Såsom sidan ritar, gör övergångarna den normala omedelbara processen lång och besvärlig. Jag vet att detta kan hanteras med JavaScript, men om du har en ren CSS-lösning, skulle jag gärna höra det. För demo tillämpade jag helt enkelt animationerna till svängningsväljarna, men det här dödar sväva ut animeringen. Känner du till ett bättre sätt? Låt mig veta i kommentarerna nedan.