Idag ska vi ha lite roligare med CSS3-övergångar. Det finns ett populärt jQuery-trick som expanderar grödan av en bild när du svävar över den och jag ville kopiera den med endast CSS. För att ta saker vidare gör jag den här effekten till handling i ett miniatyrgalleri.
Fortsätt läsa för att se live-demo och följ efter steg för steg när vi förklarar hur det här fungerar och bygga hela grejen från början.
Vad vi bygger
Bara om du är den typ av person som gillar att hoppa över i slutet av en bok och smyga en topp på hur allting visar sig, här är en färdig demonstration av vad vi ska skapa.
Live Demo: Klicka här
Bevis på koncept
Innan vi lanserar till att designa en fullständig gallerysida, låt oss bygga en liten version bara för att få en känsla för vad vi vill uppnå. Grundsidan är att ha ett miniatyrgalleri där varje miniatyrbild är beskuren för att bara visa en del av en större bild. När du sveper över en bild växlar miniatyrbilden för att visa den fulla grejen.
html
För att starta, skapa en grundläggande HTML-sida och kasta i ett fåtal divs som visas nedan. Här har jag en grundläggande behållare och sedan tre bilder. För det vi gör kan vi inte bara ställa bilderna direkt utan några besvärliga sträckningar så vi är tvungna att sätta varje i sin egen div.
Nu med den här koden får vi de grundläggande layoutändringar som vi vill ha. Det här är viktigt eftersom det betyder att alla webbläsare som inte stöder det vi gör nästa kommer fortfarande att fungera bra på den här sidan, om än på ett förenklat sätt.
För att göra effekten mer intressant, men vi slänger in en grundläggande CSS-övergång. Först specificerar vi att bredden är vad vi vill rikta in, då genomför vi en varaktighet och hur vi vill att animationen ska utvecklas (lättnad). Slutligen, som alltid, ser vi till att täcka våra baser med webbläsarens prefix.
Om du någonsin är osäker på en CSS3-övergång eller någon annan syntax på det sättet, kolla CSS3Maker.com, vilket kommer att generera koden för dig från enkla kontroller.
Förhandsvisning
Det är allt det finns! Med det har vi en cool skjutdörrseffekt som liknar något du ofta ser i jQuery. Klicka här eller på bilden nedan för att se en levande förhandsvisning av vad vi just byggt.
Som du kan se, som du svävar över en bild, expanderar den långsamt. Layouten anpassas snyggt som de andra bilderna flyttar över. Det är super enkelt men ganska roligt att leka med.
Går vidare: En miniatyrbild Galleri
Nu när vi har vårt grundläggande koncept räknat ut och fungerar smidigt, är det dags att se hur du kan utforma en hel webbsida kring detta koncept. Istället för bara tre bilder kommer vi att expandera till ett större galleri med miniatyrbilder. Låt oss börja med lite HTML.
Bilder HTML
Det första vi vill göra är att lägga ut våra bilder precis som vi gjorde tidigare. Den här gången kommer vi dock att ha två rader av fyra. Observera att jag har separerat dem i två separata sektioner. Min ursprungliga idé var att återge galleriet så att en bild utvidgades och drev de andra framåt, de skulle automatiskt hoppa ner till nästa rad. Detta fungerade bra först, men jag märkte att svängning över den sista bilden i rad var problematisk eftersom den skulle hoppa ner medan du svävar. Det fungerade, men var helt enkelt för besvärligt. Jag tror att denna lösning är mycket elegantare och fortfarande lätt att expandera.
Med denna kod är vårt galleri komplett. Animationerna är flytande och har flera rader gör verkligen effekten mer imponerande. Om du vill lägga till en annan rad, bara kopiera och klistra in ett galleriRow div; inget mer CSS är nödvändigt.
Här ser galleriet ut nu. Lägg märke till hur den expanderade bilden är exakt samma bredd som de två mindre bilderna under den.
Avsluta sidan: HTML
Jag gillar aldrig att lämna ett exempel så vanligt så låt oss avsluta designen. För att göra detta lägger vi till en grundläggande rubrik och ett avsnitt som förklarar galleriet.
Jag ska också kasta det här koden i min rubrik så jag kan använda? Oswald? från Google Font Library.
Avsluta sidan: CSS
Vårt sista steg är att utforma dessa två delar av texten. Observera att jag använder stenografi för teckensnittet, vilket sparar mycket utrymme i vår CSS. Du kan se att jag förklarade fonten Oswald precis som jag skulle någon annan. Även om alternativen fortfarande är ganska begränsade, älskar jag verkligen hur enkelt och icke-begränsande Google Font Library ska implementera.
Färdig produkt
Vårt lilla projekt är nu färdigt. Ta en titt på live demo nedan för att se den i aktion. Är det inte bra hur mycket vi kan nå utan en enda linje med JavaScript?
Live Demo: Klicka här
Lämna en kommentar nedan och låt oss veta vad du tycker om denna effekt. Också vara säker på att nämna några idéer du har för att förbättra det!