Vad är bättre än en bildspel? en trippel bildspel!

Idag ska vi bygga en webbsida som inte använder en men tre separata bildspel som kommer att ligga som ett seriöst dynamiskt element. Denna effekt är perfekt för någon formgivare eller fotografportfölj.

Längs vägen använder vi en del extremt grundläggande HTML, CSS och jQuery. Öppna en textredigerare och följ med för att bygga din egen!

Inspiration

Jag besökte nyligen vårt fantastiska designgalleri och kom över Jessica Kripps fotoporteföljen, som visas nedan. Jag blev omedelbart imponerad av den typ av bildspelssida som tog upp hemsidan.

Här har vi inte bara en, men tre distinkta bildspel som körs oberoende, men är designade på ett synergistiskt sätt som en enhet. Det är en riktigt cool effekt som jag aldrig sett tidigare. Det kan vara lite processorintensivt, men det är fortfarande ganska roligt.

Idag ska vi hoppa in och bygga en av dessa för att se hur det är gjort. Vi använder HTML, CSS och jQuery, men låt inte något av det skrämmande dig, det är mycket enkelt och kommer att vara perfekt för alla nybörjare.

Steg 1: Grundläggande HTML

Det enklaste sättet att närma sig detta projekt är att få den grundläggande sidlayouten och designarbetet ur vägen innan vi börjar spela med JavaScript. Vad det betyder är att vi ska utforma sidan med statiska bilder och sedan gå tillbaka och lägga till i bildspelets funktionalitet.

Börja med att skapa en grundläggande behållare följt av tre div, var och en innehåller en bild. Jag vet att vi redan får en liten div tung, men det jQuery-plugin som vi ska använda senare för bildspelet kräver att var och en av dessa bilder har sin egen förälderbehållare.

<img src="//lesptitesaffairesdemayl.be/img/images_1/whats-better-than-a-slideshow-a-triple-slideshow_2.jpg"> <h2>Steg 2: Grundläggande CSS</h2> <p>Först upp, låt oss lägga till några grundläggande kroppsstilar. Här har jag kastat i den mest grundläggande reset, färgat bakgrunden och centrerad container div. För behållaren har jag gett den en bredd som motsvarar min största bild, motverkar den 50px från början av sidan och ställer in vänster och höger marginal till? Auto?, Som centrerar diven horisontellt.</p> <textarea wrap="soft" readonly=""> * {marginal: 0; vaddering: 0; } kropp {bakgrund: # 291616; } #container {width: 800px; marginal: 50px auto; }

Därefter stämmer vi fotodelarna. Det viktigaste här är att jag satte flottören på den lilla Photos1 till vänster och den från SmallPhoto2 till höger. Detta kommer att se till att de flyter korrekt och stöter upp mot varandra (om du fortfarande har layoutproblem, försök med en clearfix div). Jag har också lagt till i höjdvärden för varje. Långsiktiga dessa verkar inte vara nödvändiga men jag hade några layoutproblem på detta stadium utan dem.

#bigPhoto {höjd: 300px; } # smallPhoto1 {höjd: 200px; flyta till vänster; } # smallPhoto2 {höjd: 200px; float: right; }

Steg 2: Förhandsgranskning

Efter CSS ovan, ska din sida se bra och ren med en mörk bakgrund och ett tätt fotogalleri som visas i förhandsgranskningen nedan.

Steg 3: Verktyg från tredje part

Nu när vår sida är i grunden klar vad gäller layout är det dags att göra sig redo för att göra sidan mer dynamisk. För att göra detta måste vi ladda in två JavaScript-verktyg.

Det första är ett bibliotek som kräver ingen introduktion. jQuery är allas favorit JavaScript-förlängning som vanligtvis gör livet enklare om du skapar komplexa animationer eller helt enkelt vill ha ett bättre sätt att rikta in specifika element.

För att se till att jag har den senaste versionen av jQuery hoppar jag alltid över till ScriptSrc, där du helt enkelt klickar på en knapp för att kopiera länkens senaste länk till ditt urklipp.

Den verkliga motorn bakom våra bildspel idag kommer att vara jQuery Cycle ett plugin som gör det super enkelt att bygga jQuery bildspel på fluga.

Vi får se hur du implementerar detta i nästa steg. För tillfället kan du inkludera följande skript i din rubrik.

Modernizr

Om du gillar att använda HTML5 och CSS3, vill du också kasta i Modernizr för att se till att allt är så kompatibelt som möjligt med IE.

Steg 4: Ta bildspelet till livet

Implementering av jQuery Cycle är super lätt. Det finns många alternativ och effekter men för dagens ändamål kommer vi att använda ett minimalt minimum av tillgänglig funktionalitet.

För att komma igång, låt oss förfina vår HTML lite. jQuery Cycle letar efter någonting med klassen? bildspel? och skapa ett bildspel från sina barn. För att tillgodose detta lägger vi till bildspelet i våra tre bildsegment och lägger till ytterligare två bilder till var och en. Detta kommer att göra är så att varje bild cyklar genom tre iterationer.

<img src="//lesptitesaffairesdemayl.be/img/images_1/whats-better-than-a-slideshow-a-triple-slideshow_6.jpg"> <h2>Steg 5: Slutför sidan</h2> <p>Med det kunde vi vara färdiga, men vår sida ser lite slätt ut, så låt oss lägga till lite intresse ska vi? Det första jag vill göra är att lägga till en enkel rubrik. </p> <h3>Rubrik</h3> <p>För rubriken HTML, allt vi behöver göra är att kasta in en h1 precis ovanför vår bigPhoto div.</p> <textarea wrap="soft" readonly=""> <h1>Design Shack: Bildspel Exempel</h1> <img src="//lesptitesaffairesdemayl.be/img/images_1/whats-better-than-a-slideshow-a-triple-slideshow_7.jpg"> <h3>Foto Tagg</h3> <p>Nästa sak jag vill göra är att lägga till en etikett överst i bildspelet. Det här är en viktig övning, eftersom jQuery Cycle har några konstiga effekter på sidhierarkin som gör det lite svårt.</p> <p>Det första steget här är att skapa en ny div som kommer att fungera som vår lilla tagg. Detta kräver bara en enda rad HTML direkt under den h1 som vi just ställt in.</p> <textarea wrap="soft" readonly=""> <h1>Design Shack: Bildspel Exempel</h1> Fotografisk bildspel Vägg

Låt oss nu lägga till lite styling. Vi gör bakgrunden i samma färg som rubriken för konsistens och lägger till en del vadderar för att ge lite vikt. Jag ställde också ställningen till absolut och gav den lite negativ marginal så att den kommer att stickas ut från bildspelet lite till vänster.Slutligen lade jag till en grundläggande boxskugga för att hjälpa den att dyka upp i olika färger.

/ * Slideshow Tag * / #slideshowTag {bakgrund: # 00bdf2; färg: #fff; typsnitt: 20px Helvetica, sans-serif; marginal: 50px 0 0 -10px; vaddering: 15px; position: absolut; / * Shadow * / -webkit-box-skugga: 3px 3px 0px rgba (0, 0, 0, 0.2); -moz-box-skugga: 2px 2px 0px rgba (0, 0, 0, 0.2); boxskugga: 2px 2px 0px rgba (0, 0, 0, 0.2); }

Problemet här är att även om taggen är högre i HTML-hierarkin, hamnar den upp i bildspelet. Du kan bara få en snabb inblick i det mellan bilderna:

Det här är lätt att fixa med lite z-index magi. Ange bara z-indexet för taggen till? 1? och den av bigPhoto div till? -1 ?. Detta kommer att göra är så att taggen sitter ovanpå bildspelet.

/ * Bildtext * / #slideshowTag {bakgrund: # 00bdf2; färg: #fff; typsnitt: 20px Helvetica, sans-serif; marginal: 50px 0 0 -10px; vaddering: 15px; position: absolut; z-index: 1; / * Shadow * / -webkit-box-skugga: 3px 3px 0px rgba (0, 0, 0, 0.2); -moz-box-skugga: 2px 2px 0px rgba (0, 0, 0, 0.2); boxskugga: 2px 2px 0px rgba (0, 0, 0, 0.2); } / * Bildspel bilder * / #bigPhoto {höjd: 300px; z-index: -1; }

Slutprodukt: Live Demo

Med det är vi alla färdiga! Känn dig fri att titta på live demo för att se vår skapelse i åtgärd.

Slutsats

Mössa till designern bakom Jessicas webbplats för den coola idén om att kombinera flera bildspel. Duplicering av denna effekt gjordes för en bra handledning om att använda HTML, CSS och JavaScript för att skapa enkla men fantastiska bildspel.

Var noga med att trycka bort ovanstående exempel och experimentera med olika layouter och effekter. Självklart, när du lägger till fler bildspel, desto mer kommer din sida att bli boggad men annars begränsas du bara av din kreativitet!