Share
Een week geleden, op onze zustersite, Webdesigntuts +, hebben we je laten zien hoe je een "Juicy Tabbed Slider" in Photoshop ontwerpt. Vandaag gaan we u laten zien hoe u het in enkele snelle stappen kunt coderen. Geen zware CSS- of JavaScript-kennis vereist - beloof het! We zullen de populaire Nivo Slider gebruiken om de animatie te verwerken, dus laten we ingaan!
Oké, dus aangenomen dat je de ontwerpfase van deze tutorial hebt doorlopen, zou je nu een vrij standaard schuifelement in Photoshop (of Fireworks) formaat moeten hebben. Ik ga deze tutorial schrijven als een "stand-alone" schuifregelaar - wat betekent dat het in feite het enige element op de pagina is dat we maken? maar met slechts een paar extra stappen achteraf, zou je dit aan je eigen ontwerpen moeten kunnen toevoegen en het op elke gewenste manier kunnen positioneren / verkleinen!
Wat beter is, is dat dit volledig skinnable en aanpasbaar is - dus als je zware aanpassingen hebt gemaakt in de gratis PSD die we hebben uitgedeeld, kun je hier ook je franken-aanpassingen opnemen.!
Ga je gang en download de nieuwste versie van de Nivo Slider vanaf hun pagina. De versie die we zullen gebruiken is versie 2.4, maar tenzij ze hun volledige codebase volledig vernieuwen, is de kans groot dat de stappen in deze tutorial nog steeds werken in versie 2.5, 2.6 en verder..
Het is belangrijk om dat op te merken we vinden het wiel hier niet opnieuw uit. We gaan vrijwel gewoon hun "demo.html" -bestand gebruiken als onze eigen uitvalsbasis. We zullen ook niet ver afwijken van de officiële gebruikshandleiding.
Als webdesigner doe ik veel werk waarbij ik simpelweg de open source code van anderen wijzig en kaping - u doet waarschijnlijk hetzelfde. Het is een belangrijke vaardigheid om te hebben, tenzij je van plan bent om elke belangrijke coderingstaal te leren kennen en je bent bereid om je kennis constant up-to-date te houden. Eerlijk gezegd vind ik dat nogal raar - dus het uitzoeken hoe je de code van anderen kunt gebruiken, is een van de belangrijkste vaardigheden die je kunt hebben.
In de meeste gevallen (zoals in deze) is alles wat echt nodig is een ruwe kennis van HTML en CSS en de mogelijkheid om documentatie te lezen.
We beginnen de volgende stap door de "demo" -map te openen - dus ga je gang en doe dat voordat we verder gaan.
In deze stap proberen we eenvoudig een idee te krijgen van hoe de Nivo Slider werkt. Elke slider die daar is, gaat een beetje anders werken, dus het is de moeite waard om een paar minuten de tijd te nemen om vertrouwd te raken met het script dat je in een project wilt gebruiken..
Als je snel de code voor de Nivo Slider bekijkt (in het bestand demo.html), zul je merken dat alle belangrijke stijlen en structuren worden afgehandeld vanuit het bestand "style.css". In feite is de eigenlijke HTML-code vrij eenvoudig als je hebt verwezen naar de juiste scripts in de HEAD-sectie van demo.html.
Laten we beginnen met onze walkthrough door te kijken naar de regels uit de header. We hoeven deze niet te wijzigen, maar ze moeten aanwezig zijn in elk bestand waarvoor we de schuifregelaar willen gebruiken:
Accentsconagua