Share
Het is al een tijdje een van de grootste webdesign-buzz-woorden, dus vandaag gaan we een beetje Parallax proberen. We gaan een eenvoudige responsieve lay-out samenstellen, en dan gaan we met behulp van skrollr.js een subtiel parallax-effect toepassen op de header.
Deze tutorial behandelt enkele opvallende aspecten, dus let op:
Oke dan! Laten we ons project beginnen met een aantal onbeschermde bestanden. Dit is wat je nodig hebt om mee te beginnen:
Onze index.html is momenteel leeg, dan hebben we een img-directory met daarin ons koffiebeeld, een css-directory met een resetbestand plus ons vloeistofrooster en een lege styles.css, geduldig wachtend op onze input. Ten slotte hebben we een js-directory met het bestand skrollr.js gedownload van GitHub.
Onze index.html zal beginnen met enkele zeer vertrouwde elementen:
Betekenisloos Pap
Ik zal je niet vervelen met al deze stukjes en beetjes, maar het is de moeite waard om op te merken dat de viewport metatag aanwezig is, we hebben het document een (onzinnige) titel gegeven, gekoppeld aan enkele favicons - en dat we hebben gewezen slechts één CSS-bestand: styles.css.
Een klein stylesheet om ze allemaal te regeren.
Toen ik het voor het eerst had over de bestanden en mappen, noemde ik drie stylesheets; normalize.css (om op een verantwoorde manier onze stijlen opnieuw in te stellen), fluid_skeleton.css (die ik zelf heb aangepast van de boilerplate) en de werkelijke styles.css. Dus waarom hebben we er maar een gekoppeld in ons HTML-bestand??
Nou, we gaan dit gebruiken als een inleiding tot Sass - zonder daadwerkelijk Sass te gebruiken.
Door de .scss-bestandsextensie te gebruiken in plaats van .css, kunnen we ze allemaal samenvoegen in één bestand en het hele perceel verkleinen. Begin met het hernoemen van de CSS-bestanden zoals:
Dat was makkelijk, toch? Let op de underscores op de eerste twee, die voorkomen dat die bestanden worden gecompileerd in hun eigen CSS-equivalenten. In plaats daarvan gaan we ze in onze styles.scss importeren, net zoals we een normale CSS @import-regel zouden gebruiken:
/ * invoer * / @ import "normaliseren"; @import "fluid_skeleton";
Wanneer we nu compileren, krijgen we een styles.css-bestand dat is opgebouwd uit alle regels in onze .scss-bestanden. We hoeven dit ene bestand alleen op onze webserver in te zetten en onze site twee verzoeken en verschillende Kbs te bewaren. Goed gedaan :)
Om de bestanden daadwerkelijk te compileren zoals hierboven beschreven, hebben we een compilatie-applicatie nodig (tenzij je de commandoregel wilt gebruiken?). Er zijn een paar applicaties die het werk voor je doen, ik gebruik CodeKit (omdat het geweldig is) maar CompassApp zal je net zo goed van dienst zijn, plus het is beschikbaar op Windows.
Het opzetten van ons project is net zo eenvoudig als het slepen van de projectmap naar de compiler. CodeKit bekijkt nu alle bestanden in die map. Telkens wanneer ik op "opslaan" klik, ongeacht welk SCS-bestand ik aan het bewerken ben, zal CodeKit alle stukken opnieuw compileren, onze bijgewerkte CSS uitwerken en, als onze pagina open is in een browser, dat ook voor ons verfrissen.
Zelfs als u niet klaar bent om verder te kijken in Sass, is dit een ideale workflow.
Laten we nu het index.html-bestand aanvullen, waarna we echt kunnen beginnen met de styling. Zoals vermeld, gebruik ik fluid_skeleton.css als basis voor het responsive grid. Het is een geweldige, ongecompliceerde basis voor het starten van een eenvoudige lay-out. Het enige dat nodig is, is dat we de rasterstructuur gebruiken om onze lay-out te bouwen.
Wij hebben nodig:
Accentsconagua
.acht bijvoorbeeld in totaal zestien bij elkaar.We kunnen bijvoorbeeld een snelle lay-out met vier kolommen maken, zoals:
Het stylesheet dicteert dat deze div's allemaal 100% breed zijn, gestapeld netjes boven elkaar, totdat de viewport 767px breed raakt. Op dat punt verschuift alles en deze vier kolommen zullen zich over het scherm verspreiden zoals de natuur het bedoeld heeft.
Dit snelle draadframe zou je een idee moeten geven van hoe we onze structurele opmaak gaan opmaken.
En als u snel wilt kopiëren en plakken, helpt dit u:
Voor meer informatie over hoe Skelet samen is, kijk eens naar Een responsieve lay-out bouwen met skeleton: beginnen.
Het is altijd makkelijker om te zien wat je doet als je een beetje dummy-tekst hebt om mee te werken, dus gooi een kop en een link naar de kopregio bovenaan:
Betekenisloos Pap
door Ian Yates
Wijs vervolgens uw aandacht op de kolommen en de voettekst. Ik heb een lading filler-tekst van T'Lipsum "A Yorkshire Lorem Ipsum Generator for Yorkshire Folks" (omdat ik een trotse Yorkshireman ben) verslagen!
Om je een idee te geven, begint het hoofdgedeelte (ons twaalfkolomsgebied) als volgt:
Mek is een bierbrouwer
Een halve liter mild. Zeg thi summat voor nu over de nesh thee chuffin 'nora eeh appens als misschien. Ey up is dat het eigen graafschap van je god is. Wees reet worden reet nah dan michael palin bloomin "eck gerritetten. Ik zal het zachte zuidelijke viooltje leren. Elke zachte zachte zuidelijke viooltje nobbut een knul mardy bum shu 'thi gob gezicht als een geslagen ezel. Ee door kauwgom mardy bum michael palin. Gods eigen graafschap. Th'art nesh thee. Appens als misschien de eigen provincie van God waar het is.
Steek wat links in het voettekstje en we zijn hier klaar!
Voordat we verder gaan, wil ik wat lettertypen pakken. Ga naar Google Web Fonts en bekijk PT Sans en PT Serif. Ze zijn een geweldig duo, dus voeg ze allebei toe aan je verzameling en verzamel de stylesheet-link.
Om tijd te besparen, is dit de link die ik heb gekregen, nadat ik de 400 en 700 gewichtsversies van elk heb gekozen:
@import url (http://fonts.googleapis.com/css?family=PT+Sans:400.700|PT+Serif:400.700);
Je kunt dit onder onze andere imports plakken in styles.scss. Bij het compileren wordt de inhoud van dit CSS-bestand niet daadwerkelijk naar onze verkleinde CSS gesleept, maar blijft de regel @import behouden en wordt het lettertype allemaal gebruikt.
Nu zal ik PT Sans als ons basislettertype instellen, waarbij de lettergrootte wordt ingesteld op 100% van de standaardwaarde van de browser, met zijn lijnhoogte op 1,5em:
html font: 100% / 1.5em 'PT Sans', sans-serif;
Veel van de styling die we toepassen op deze pagina is vrij algemeen. Kleuren en formaten voor de typografie, vulling op de banden, enzovoort. Trek de bronbestanden uit elkaar en je zult de inhoud van styles.scss zelfverklarend vinden.
Laten we ons echter even concentreren op het kopgedeelte. In zijn mobiel-eerste staat willen we het een bruine achtergrond geven. Pas als de viewport groter is, brengen we het koffiebeeld binnen (om mobiele gebruikers de bandbreedte te besparen). Zo zien de stijlen voor de header-band er nu uit:
header.band background: # 4b371f; kleur wit; text-align: center; opvulling: 10% 0 15% 0;
De opvulling boven en onder is toegepast als een percentage van de breedte van de browser. Dit betekent dat het kopgebied in hoogte toeneemt naarmate het browservenster groter wordt. Het is een aardig effect en houdt de vouw (waar dat ook is) evenredig aan de grootte van het browservenster.
Laten we nu de kop vormen die we erin hebben.
h1, h2, h3 font-family: 'PT Serif', serif; font-gewicht: 700; text-align: center; header.band h1 font-size: 3em; regelhoogte: 1em; margin-bottom: 1em;
We gebruiken de serif-variant van PT voor onze koppen, wat goed samengaat met de body-kopie die in sans zit.
Ten slotte zullen we ons anker stijlen om het op te laten vallen:
a.button background: # e33f0c; text-align: center; opvulling: .5em 1em; kleur wit; lettertype: vet; tekstdecoratie: geen; vakschaduw: 0 0,2 em 0 # ab3009; text-transform: hoofdletters; letter-spacing: 0,1em; / * overgang cross-browser dingen * / -webkit-overgang: achtergrond 0.2s gemak; / * Safari 3.2+, Chrome * / -moz-transition: achtergrond 0.2s ease-out; / * Firefox 4-15 * / -o-transition: achtergrond 0.2s gemak; / * Opera 10.5-12.00 * / transition: background 0.2s ease-out; / * Firefox 16+, Opera 12.50+ * / a.button: hover background: # ab3009;
Simpele dingen, allemaal op basis van ems om ervoor te zorgen dat het kan groeien en krimpen als dat nodig is - en als je Sass echt gaat omarmen, zou je alles stil kunnen stylen! Maar nu is dit wat je zou moeten hebben:
Nadat we onze standaard mobiele ervaring hebben opgebouwd, kunnen we nu dingen verfraaien voor grotere schermen. Hoe je ervoor kiest om je mediaquery's in te delen, is aan jou, maar omdat dit een redelijk ongecompliceerde stylesheet is, ga ik al mijn extra regels stapelen in een mediaquery aan het einde van styles.scss.
Laten we een aantal regels toevoegen die op schermen groter dan 767px zullen starten. Dit breekpunt is vrij willekeurig en het is toevallig gebeurd dat het bij het ontwerp paste toen ik het voor het eerst bouwde. Welke betere manier om een breekpunt te kiezen?!
@media only-scherm en (min-breedte: 767px)
Er zijn hier niet veel stijlen om toe te voegen, we willen gewoon de lettertypegrootte die in het hele document wordt gebruikt, verbeteren, onze knop een stuk prominenter maken en een achtergrondafbeelding aan het kopgedeelte toevoegen:
@media alleen scherm en (min-breedte: 767px) body font-size: 1.125em; / * 18px / 16px * / regelhoogte: 1.7em; header.band background-image: url (... /img/background.jpg); achtergrondgrootte: 100%; header.band h1 font-size: 3.25em; / * 52/16 * / a.button opvulling: .75em 1.5em;
Op grotere schermen zouden we nu iets moeten hebben als ...
Momenteel verdwijnt onze koptekst op het moment dat u naar beneden scrolt, zoals u zou verwachten. Laten we nu naar de basis van deze hele oefening gaan; parallax. Je had skrollr.js al moeten downloaden van GitHub en in de map js geplaatst.
Vervolgens moeten we ernaar verwijzen in onze html, dus plaats deze link onderaan, voor het sluiten
Dit is een JavaScript-spel met vanille, dus we hebben het niet nodig om jQuery vooraf in te trekken. Vervolgens moeten we skrollr bellen, wat we wel leuk vinden:
Er zijn een aantal opties waar we mee kunnen spelen, die allemaal instellingen hebben die we tussen die accolades kunnen gooien, maar voor nu laten we de dingen precies zoals ze zijn.
In zijn huidige ontwikkelingsstadium vereist skrollr dat we onze markeringen een beetje afbreken, waarbij regels worden toegevoegd die in lijn zijn met onze elementen. Skrollr's maker Alexander Prinzhorn is bezig met een project dat stijlen van markup scheidt, maar het is nog steeds aan de gang.
Hoe dan ook, ik laat het slechter klinken dan het is, we hoeven alleen maar onze keyframe-styling toe te voegen aan gegevenskenmerken op de elementen die we targeten. Laten we bijvoorbeeld de achtergrondafbeelding van onze kop verplaatsen, afhankelijk van de positie van de schuifbalk.
We voegen onze eerste keyframe-styling toe zoals:
Skrollr gebruikt gegevens- en dan een waarde die de pixelpositie van de schuifbalk vertegenwoordigt. Vervolgens voegen we wat styling toe, net als bij CSS. We hebben letterlijk aangegeven dat wanneer de schuifbalk staat 0px (de top van de pagina) we willen de background-position van dit element te zijn 0px 0px.
We kunnen vervolgens net zoveel andere keyframes toevoegen als we willen, dus laten we een ander data-attribuut erin gooien, direct na onze eerste.
data-500 = "achtergrond-positie: 0px -250px;"
Dit zegt dan; wanneer de schuifbalk is verplaatst 500px naar beneden, we willen de background-position zijn 0px -250px (dat wil zeggen: 250px naar boven). Skrollr zal het proces tussen deze twee keyframes animeren, zodat we een soepele overgang krijgen.
Bingo! Ons eerste parallax-effect.
We hebben een zeer eenvoudig parallax-effect verkregen dat een element van dynamiek toevoegt wanneer de gebruiker naar beneden scrolt. We kunnen aanvragen welke CSS-regels we ook willen met skrollr, dus laten we onze kopregio nog één keer laten bloeien.
Onthoud dit element, dat de kop en de link bevat?
We gaan twee keyframes toevoegen; één voor de initiële status (0px) en een andere voor wanneer de schuifbalk 180 px bereikt.
Deze, zoals u kunt zien, dicteren de dekking, een andere vertrouwde CSS-eigenschap. Terwijl onze schuifbalk omlaag gaat, voordat de kop vrij de pagina is verlaten, zal de inhoud binnen deze div geleidelijk vervagen. Een eenvoudig effect, maar een effect dat op subtiele wijze de gebruikerservaring van deze pagina beïnvloedt. Dingen zoals deze moeten op een verantwoorde manier worden gebruikt!
13. Extra instellingen
Skrollr wordt geleverd met verschillende extra opties, afhankelijk van hoe zeker je je voelt. Al deze instellingen kunnen aan skrollr worden doorgegeven door middel van sleutelwaardeparen zoals:
Deze instructie vertelt bijvoorbeeld aan skrollr om de hoogte van het document niet te forceren. Standaard zorgt skrollr ervoor dat het document minstens zo hoog is als het hoogste hoofdframe dat u hebt gedefinieerd. In ons geval is onze verste schuifbalkpositie gespecificeerd als 500px, terwijl onze pagina groter is dan dat. We hoefden daarom niet na te denken over het opheffen van de hoogtefactor.
Een ander ding dat u misschien wilt doen, is het soepele scrollen verwijderen. Probeer nogmaals ons parallax-effect; zie je hoe de achtergrondpositie versnelt en vertraagt? Dat voorkomt schokken, maar misschien wilt u niet dat het effect op die manier verschijnt. Om jouw te maken tweening meer lineair, voeg dit toe:
Je zou dit ook kunnen toevoegen per element door wederom te leunen op de (zeer elegante) data-attributen:
Relatieve modus
Het is ook de moeite waard om de relatieve modus te noemen, waarmee we keyframes kunnen instellen ten opzichte van het element, niet het document zoals we het hebben gedaan. Op deze manier kunnen we de hoogte, marges etc. van onze header wijzigen (bijvoorbeeld) zonder onze keyframe-instellingen opnieuw te hoeven beoordelen.
Het gebruik van de relatieve modus wijzigt de benodigde syntax binnen de gegevensattributen, waar ik hier niet op in ga, maar het is de moeite waard om eens naar te kijken.
Zie de voorbeelden en documentatie voor meer informatie over wat mogelijk is met behulp van de opties van skrollr.
14. Mobiele ondersteuning
Dit is iets wat ik niet wist tot ik de skrollr documentatie las:
Mobiele browsers proberen de batterij waar mogelijk te sparen. Dat is de reden waarom mobiele browsers de uitvoering van JavaScript tijdens het scrollen vertragen. Vooral iOS doet dit zeer agressief en stopt JavaScript volledig.
Om ervoor te zorgen dat skrollr op mobiele platforms kon werken, moest Alexander daarom een specifiek beetje extra magie opbouwen dat na een beetje browsen-sniffen naar binnen werd getrokken. Zoals je hebt gezien, degradeert ons effect heel gracieus, dus ik heb er geen moeite mee dat smartphonegebruikers een beetje parallax missen. Als u er echter zeker van wilt zijn dat uw project mobiel ondersteunt, heeft u iets extra nodig.
- Nadat u het skrollr-script hebt toegevoegd, moet u een kleine browsercontrole uitvoeren, die er als volgt uitziet:
Je zult merken dat dit dan toevoegt
skrollr.mobile.min.jsals aan de voorwaarden is voldaan (dat wil zeggen: een mobiel apparaat wordt gebruikt), zorg er dan voor dat het pad correct is volgens uw project. Je vindt dit extra script in de brondownload op GitHub.- Ten slotte, zorg ervoor dat de eerste element na de opening
tag heeft .Dat is het! U hoeft het niet te begrijpen waarom dat werkt, het doet het gewoon. Als je nieuwsgierig bent naar meer informatie over mobiele ondersteuning, bekijk dan de documentatie.
Conclusie
Skrollr is niet alleen een parallax ... ding, het doet veel meer dan dat wat we hebben laten zien. Met een beetje geluk heb je nu een beetje razzmatazz (wat dat dan ook is) kunnen implementeren op je eigen statische webpagina's. Aarzel niet om eventuele vragen in de opmerkingen te stellen!
Verdere bronnen
- skrollr.js op GitHub
- @Prinzhorn op Twitter
- Maak een Parallax-scrollwebsite met Stellar.js op Webdesigntuts+
- Vrolijk scrollen met skrollr.js
- T'Lipsum A Yorkshire Lorem Ipsum Generator voor Yorkshire Folks
- fluid_skeleton.css
- CodeKit
- Trent Walton's gedachten over Parallax scrollen op het web
