Dagens projekt är en annan undersökning av de typer av praktiska tillämpningar som du kan uppnå med lite uppfinningsrikedom och lite ganska grundläggande CSS. Du kommer att bli blåst bort med hur mycket du kan uppnå med bara några rader av kod.
Slutresultatet med ett bra sätt att visa en remsa av små bildminnebilder som användaren kan sväva för att se större bilder. Låt oss dyka in och se hur det fungerar.
Konceptet
Den grundläggande layouten här är ganska enkel. Vi vill ha en remsa av miniatyrbilder och en stor bild. Den knepiga delen blir att den presenterade bilden ska ändras när användaren svänger över en av miniatyrerna.
Sneak Peek: Klicka här för att starta den färdiga produkten.
Med CSS kan du inte skapa två separata divs och sedan har innehållet i en tjäna som en åtgärdspunkt för den andra. Det är lätt nog i JavaScript, men CSS ger dig mindre frihet på det sättet att du staplar dina väljare.
Men om vi är kloka på hur vi strukturerar vår HTML, är det här projektet faktiskt ganska enkelt att dra av. Låt oss se hur det här ser ut.
HTML
För att göra detta arbete behöver vi fyra miniatyrbilder och fyra bilder i full storlek. Nyckeln till att ha den tidigare verkan på sistnämnda är att pakka upp dem tillsammans som så:
Anledningen till att vi ställer in en specifik höjd och bredd är så att vi kan skjuta en bild ut ur behållarens gräns och få den dold. För detta ändamål tillämpar vi också ett överflödesvärde av dolda och avslutas genom att centrera allt med auto marginaler.
Avstämning
Vi ser ganska grov vid denna tidpunkt, men oroa dig inte, allt är rätt på rätt spår!
Placera allt
Som du såg just i skärmdumpen kommer dina bilder att vara överallt på den här tiden så nu är det dags att tvinga allt i sin riktiga position.
Återigen tar det lite hårt tänkande. Vi vill att alla våra miniatyrbilder ska gruppera och alla våra stora bilder samlas, men det är inte hur HTML-strukturen är strukturerad.
Med tanke på att varje typ av bild (små och stora) har sin egen klass kan vi flyta alla våra ankare till vänster och separera sedan de stora bilderna genom att tillämpa absolut positionering.
Det är väldigt viktigt att förstå hur det fungerar så låt oss springa igenom det. Floating våra länkar till vänster gjord Allt av bilderna visas inline, en direkt efter varandra. Den absoluta positioneringen på de stora bilderna drar dem emellertid ut ur detta flöde och placerar dem specifikt i den plats som vi har utsetts med hjälp av de övre och vänstra egenskaperna. Detta lämnar bara miniatyrbilderna att bli flytande.
Avstämning
Med mycket liten kod kunde vi bara förvandla vår röra av bilder till en snyggt ordnad layout. Observera att du bara ser en stor bild vid den här tiden eftersom de andra är staplade under den.
Ta det till livet
Nu när allt är på plats, är det dags att få det att fungera. Det första som vi vill göra är att flytta alla de stora bilderna utom vårt täckta täcke ut ur behållarens gränser. Det innebär att vi tar ett steg tillbaka och reviderar en del av vår tidigare kod.
Gå tillbaka och sätt alla de stora bilderna att vara 900px från toppen. Detta kommer att trycka dem utanför botten av behållaren. Medan du är där borde du också skapa en övergång. Target den översta egenskapen och ställ in övergångsperioden till en sekund och tidsfunktionen för att underlätta.
Denna kod trycker på Allt av de stora bilderna utanför gränserna, inklusive vår omslagsbild. Använd koden nedan för att ta tillbaka det här.
Här använde vi de övre och vänstra värdena som vi tidigare hade fastställt för att fixa omslaget till en plats. Z-indexvärdet säkerställer att denna bild kommer att ligga kvar på bottnen av stapeln. Om vi inte gör det, kan vi inte ens se de andra bilderna när de glider in!
Hover Styles
Nu när vi har placerat alla de stora bilderna utanför behållaren behöver vi ta tillbaka dem när användaren svänger. Detta uppnås genom att rikta in de stora bilderna och returnera toppegenskapen till 260px. Jag har också lagt till en skuggningseffekt på miniatyrerna så att du kan se svävaren som träder i kraft.
På grund av hur vi ställer in vår HTML, motsvarar varje miniatyrbild automatiskt den medföljande stora bilden.Så även om vi svävar över miniatyrbilden ser webbläsaren det som ett ankare och har inget emot att manipulera endast den delen med den stora klassen som tillämpas. Ganska snyggt rätt?
Se den i aktion
Med det är vi alla färdiga med vår fantastiska skjutreglage. Ta en titt på levande demo nedan och sväng över miniatyrerna för att ge den en provkörning. För att visa upp mångsidigheten i detta projekt inkluderade jag två alternativa versioner i demo som implementerar lite olika animeringar. Var noga med att kolla in dem också.
demo: Klicka här för att starta.
Slutsats
Om du var uppmärksam, lärde du dig mycket saker i den här handledningen. Först övervålade vi utmaningen att använda en bit av ett HTML-dokument för att agera på en annan med bara CSS, vilket inte är en liten prestation. Utöver detta lärde vi oss några coola positioneringstekniker och till och med dabbled lite med att manipulera bildstapningsordningen via z-index.
Om du gillade den här handledningen, lämna en kommentar och meddela oss. Har du några andra användningsområden för fjärrflyttare som vi använde här? Jag vill höra dem!