Dagens projekt är en rolig. Vi ska bygga en vanlig CSS-bildreglage med en vridning: det synliga bildområdet delas in i fyra distinkta sektioner, var och en med ett dolt meddelande som avslöjas när användaren svänger över den.
Den ultimata effekten är ganska fantastisk och jag tror att du kommer att gilla det mycket. Längs vägen spelar vi med några animeringar, övergångar, positioneringskontext och mycket mer. Låt oss dyka in och komma igång!
Sneak Peek
Om du vill smyga en titt på den färdiga produkten innan vi bygger den, kolla länken nedan.
demo: Klicka här för att starta live demo.
Rekvisita till? Hur rullar du?
Min inspiration för dagens handledning kommer från sushi-stället där jag planerar att äta middag ikväll. Jag stannade på deras hemsida för vägbeskrivning och ville omedelbart se om jag kunde replikera effekten på hemsidan. Restaurangen heter How Do You Roll, var god att kolla in deras fantastiska sajt.
html
Låt oss få igång projektet! Som alltid är det första vi vill göra beskriva vår grundläggande HTML-struktur. Denna skjutreglage består av ett stort bildområde som är uppdelad i fyra vertikala kolumner. Följaktligen behöver vi en wrapper div med en? Glider? klass och fyra inre divs, var och en med en? panel? klass.
Det här är vår grundläggande struktur, men vi behöver koka ut det lite med lite innehåll. Jag vill att varje panel ska fungera som både en källa till information och en länk. Så användaren ska kunna sväva, se vad panelen handlar om och klicka för att gå vidare till en annan sida. För att uppnå detta ska vi kasta i en h2 och ett stycke och linda hela dang-saken i ett ankare. Det verkar som ett konstigt sätt att använda ett ankare, men det är helt giltigt i HTML5.
Nu när vi har en övergripande struktur och den individuella paneldannelsen uppskattat sätter vi allt ihop och vi har all den HTML som vi behöver för det här projektet.
Starter Styles
För att sparka av vår CSS, låt oss få några av de generiska sakerna ur vägen. Först kastade jag in en liten universell återställning för att få oss alla på samma sida. Byt ut detta med en bättre återställning eller normaliseringsteknik om du använder det här i ett verkligt projekt.
Jag har också lagt till en bakgrundsstruktur och återställ länkformat för reglaget, bara för bra mått.
Slider CSS
Nu är det dags att utforma skjutreglaget div. I grund och botten vill vi ange en viss storlek för den, och ge den en bakgrundsbild som är lika stor. Sedan lägger vi till några marginaler för att centrera den, en gränsradio för att runda hörnen och en boxskugga för att skilja den från bakgrunden lite.
Den stora sak som du kan missa i denna bit är överflödet: auto line. Det här är viktigt eftersom vi vill att våra paneler ska ta den avrundade hörnseffekten som vi tillämpar på parent slider div.
Avstämning
Vid denna tidpunkt borde du ha en stor bild med rundade hörn och en droppskugga tillsammans med en massa stygg, rörig text som vi fixar i nästa steg!
Panel CSS
Vår gliderbehållare ser skarp ut, nu är det dags att sätta panelerna i ordning. Med tanke på att vår behållare är 800px vid 400px måste varje panel ställas in på 200px vid 400px vilket innebär att varje panel upptar hela höjden och en fjärdedel av bredden. Därifrån behöver vi bara flyta dem till vänster och de kommer att ställa upp precis som vi vill.
Den intressanta delen här är att jag har satt färg och bakgrund till transparent, vilket gör panelerna osynliga. Det beror på att vi bara vill att de ska dyka upp på svävaren. Standardstaten borde verkligen vara gömd.
Det sista steget här är att lägga till CSS för en övergång så att panelerna bleknade på plats när användaren svävar. Observera att jag faktiskt förklarat två separata övergångar åtskilda av ett kommatecken (en för färgen och en för bakgrundsfärgen).
Panel typografi
Därefter är det dags att få typografi i ordning. Visserligen gjorde jag inte det här med panelerna inställda på osynliga men istället gav elementen en färg, styled dem och sedan återställde dem tillbaka till dolda.
Se till att du stämmer både stycket och h2. Jag gjorde huvudet stort, djärvt och flyttat ner från toppen ganska lite. Både rubriken och stycket får också en uppsättning bredd på 150px, vilket gör det enkelt att centrera dem i utrymmet trots vänsterjusteringen.
Panelhake
När användaren svänger över en av våra paneler vill jag att den ska synas igen. Det gör jag genom att ge bakgrunden och texten en färg. Jag ställer bakgrunden till svart med lite transparens för att låta den underliggande bilden visa sig och stycket till vitt.
Avstämning
Du borde nu ha fullt fungerande paneler! Om det här är allt du letade för att uppnå, kan du stanna här, inget ytterligare arbete är nödvändigt. Även utan nästa steg är det fortfarande en bra effekt.
Animera bakgrunden
Det här sista steget är helt frivilligt, och kom ihåg att det inte kommer att fungera på äldre webbläsare, men den ursprungliga inspirationen för den här delen hade en bildreglage i bakgrunden. Vi har en statisk bild tillbaka där och vi ska nu gå tillbaka och animera den.
För att göra detta måste vi gå tillbaka till glidregistreringsblocket och lägga till några saker. För att börja med, vänd din enda bakgrund till fyra bakgrundsbilder, varav den sista är densamma som den första så allt slingrar snyggt.
Se sedan till att du ställer in bakgrundsbilderna så att de inte upprepas och kopiera de lägesvärden som visas nedan, vilket kommer att ställa in bilderna i en lång horisontell rad.
Som du kan se, kastade jag också i animations CSS. Först namnger vi vår animering (reglaget) och anger sedan varaktigheten och antalet iterationer. För att avsluta hela projektet måste vi definiera hur den animationen ska fungera med nyckelbilder. Koden för detta är förvirrande så låt oss beskriva varje steg.
- Steg 1: Första bakgrundsbilden är synlig
- Steg två: Flytta allt till vänster 800px, andra bakgrundsbild synlig
- Steg tre: Flytta allt till vänster 800px, tredje bakgrundsbild synlig
- Steg fyra: Flytta allt till vänster 800px, fjärde bakgrundsbilden synlig (vilken är densamma som den första bilden)
För att dela upp det måste vi börja med 0% och sluta med 100%, vilket lämnar två steg i mellan. Den enkla lösningen är att göra steg två och tre vid 33% och 66%. Matematiken är inte perfekt, men den är nära nog. Lägg märke till hur bilderna rör sig över varje gång, vilket leder till nästa bakgrund.
- 0%: Bakgrundsposition: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 33% bakgrundsposition: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 66%: Bakgrundsposition: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 100%: Bakgrundsposition: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
Nu kommer det här ensamt att göra bildspelet ständigt rörligt, vilket vi inte vill ha. Vad vi vill istället är för varje bild att stanna stilla i några sekunder innan vi går vidare. Detta uppnås genom att lägga till några få redundanta steg så att objektglasen inte går fram till 10% före nästa steg.
- 0%: Bakgrundsposition: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 23%: Bakgrundsposition: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 33% bakgrundsposition: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 56% bakgrundsposition: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 66%: Bakgrundsposition: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 90%: Bakgrundsposition: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 100%: Bakgrundsposition: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
Nu när vi har behandlat skisserat kan vi få det att hända med CSS. Detta kräver en massa kod för de olika webbläsarna, men det är det enda sättet att vi kan dra av det så vi behöver bara leva med det.
Se det i aktion!
Vi är alla färdiga! Nu är det dags att ha en sista titt på demo.
demo: Klicka här för att starta live demo.
Slutsats
Jag hoppas att du tyckte om att bygga den här roliga lilla reglaget så mycket som jag gjorde. Jag älskar hur det representerar en liten tweak på en gammal idé. Det är ganska praktiskt och låter dig verkligen ta dina reglage ett steg längre.
Lämna en kommentar nedan och låt oss veta vad du tycker. Har du sett en skjutreglage delad så här innan? Hur skulle du göra det bättre?