Share
In deze tutorial, de tweede in een reeks van twee delen, nemen we de geweldige vectorgebaseerde illustratie die is geproduceerd in Yulia Sokolova's "Hoe maak je een lange scrollachtergrond voor een website" en codeer hem in een live-site.
We zullen dingen samenvoegen, zodat je naar beneden scrolt vanaf de bovenkant van de pagina, een "Alien Lander" die zijn weg naar beneden vindt. In het begin zullen we een UFO zien zweven in de ruimte.
Als we naar beneden scrollen, zal de UFO de atmosfeer bereiken en een "buitenaardse komeet" worden.
En ten slotte, wanneer het door de boomgrens gaat, zal het veranderen in een "kleine groene man" die zijn landing op de grond maakt.
Bekijk de live demo!
In dit project gebruiken we SVG-afbeeldingen, zodat we kunnen profiteren van hun vermogen om vloeiend in te schalen en hun kleine bestandsgrootte.
Voordat we beginnen met coderen, hebt u de afbeelding nodig die is gemaakt in deel een van deze zelfstudieserie, die is onderverdeeld in vier SVG-bestanden:
Je kunt deze SVG-afbeeldingen zelf exporteren vanuit je favoriete grafische app als je dat wilt, of je kunt alle vier afbeeldingen vinden voor gebruik in de bronbestanden op GitHub.
Maak een nieuwe map voor uw project en maak daarbinnen een submap met de naam "css" en een andere met de naam "images".
Kopieer en plak uw vier SVG-afbeeldingen in de nieuwe map "images".
Maak in de map "css" een bestand met de naam "style.css".
Maak in de hoofdmap een nieuw bestand met de naam "index.html".
Uw mappenstructuur zou er nu als volgt uit moeten zien:
Voeg in het bestand "index.html" de volgende eenvoudige HTML toe om de hoofdzaken op te halen en laad de stylesheet:
Scrollen door Alien Lander
Het lijkt misschien contra-intuïtief, maar we gaan onze achtergrondafbeelding eigenlijk gebruiken met een img element in plaats van als een CSS-achtergrondafbeelding. We doen dit omdat:
Nu je begrijpt waarom we deze aanpak volgen, laten we beginnen met coderen!
Voeg in je bestand "index.html" deze code toe:
Als u nu een voorbeeld van uw bestand in een browser bekijkt, ziet u de afbeelding die het kijkvenster vult. Er zal echter nog steeds wat witte ruimte rond de randen zijn.
Dit komt omdat browsers een kleine marge op de lichaam element standaard. Om dit te overschrijven, voegt u in het bestand "style.css" deze CSS toe:
body marge: 0;
Er is ook een andere standaardinstelling voor de browser die we moeten negeren, die van de tonen eigenschap op afbeeldingen die zijn ingesteld op in lijn. Als u naar de onderkant van uw pagina bladert, ziet u dat er momenteel een kleine witte ruimte onder de afbeelding is vanwege deze standaardinstelling. Wijzig dit door toe te voegen:
img weergave: blok;
Je zou nu moeten zien dat de "background.svg" afbeelding het venster gelijk met de randen vult, en als je de breedte van het venster aanpast, zie je de SVG-afbeelding zelf herschalen om het nieuwe formaat aan te passen. De hoogte van de sitelay-out wordt ook gewijzigd om de juiste beeldverhouding voor de afbeelding "background.svg" te behouden.
Om de afbeelding die we zojuist hebben geplaatst, als achtergrondafbeelding te laten werken, hebben we een manier nodig waarop de rest van onze inhoud er op de voorgrond op kan worden geplaatst. We kunnen dit bereiken door een div element dat als een container zal fungeren en dan de inhoud ervan zal aanpassen positie en z-index eigenschappen.
Voeg in je "index.html" -bestand na de afbeelding die je zojuist hebt toegevoegd deze nieuwe div in:
En voeg in "style.css" deze CSS toe:
.voorgrond positie: absoluut; boven: 0; links: 0; hoogte: 100%; breedte: 100%; z-index: 1;
Laten we doornemen wat we doen met de bovenstaande code.
Ten eerste door in te stellen positie naar absoluut we nemen het element uit de normale documentstroom (die het anders onder de achtergrondafbeelding zou plaatsen), waardoor we het overal kunnen plaatsen waar we maar willen.
Vervolgens hebben we de top en links eigenschappen voor 0 waarbij het element naar de bovenkant van het venster wordt verplaatst en horizontaal wordt uitgelijnd met onze achtergrondafbeelding.
Daarna geven we het element een hoogte en breedte van 100%. Dit zorgt ervoor dat het element niet in elkaar klapt en niets verbergt.
Ten slotte hebben we de z-index naar 1 die het element naar voren brengt, zodat het voor onze achtergrondafbeelding (die standaard is geplaatst) zit z-index van auto). Hiermee wordt voorkomen dat inhoud in het element wordt verdoezeld door de achtergrondafbeelding.
Onze voorgrondcontainer is nu klaar om inhoud te laten toevoegen.
De manier waarop we onze UFO "land" op de grond gaan maken, is door drie panelen te maken, één voor elke "landing" -fase. Vervolgens voegen we de bijbehorende SVG-afbeelding voor elk paneel, bijvoorbeeld het bestand "ufo.svg", toe als achtergrondafbeelding met vaste positie. Het beeld blijft dan op zijn plaats tijdens het scrollen terwijl de achtergrond erachter beweegt, waardoor de illusie van afdaling wordt gecreëerd.
In je "voorgrond" div, voeg dit nieuw toe div:
Voeg nu de volgende code toe aan uw CSS:
.ufo_section height: 100%; achtergrond: url (... /images/ufo.svg); achtergrondherhaling: geen herhaling; achtergrond-positie: midden; achtergrondformaat: 40% automatisch; achtergrond-bijlage: vast;
In de eerste regel van onze bovenstaande code geven we het element een hoogte van 100% om ervoor te zorgen dat de inhoud zichtbaar is. Vervolgens voegen we onze "ufo.svg" -afbeelding toe als achtergrond. We gaan zitten achtergrond herhaling naar no-repeat omdat we slechts één UFO willen laten verschijnen, en dat doen we dan background-position plaats het beeld in het midden, zowel horizontaal als verticaal.
Met onze background-size property, stellen we de breedte in op een percentage gebaseerde waarde en laten we de hoogte automatisch berekenen. Deze breedte wordt afgeleid van de originele vectorafbeelding waarin de breedte van de UFO ongeveer 40% van de breedte van de algehele afbeelding is.
Door de breedte van ons "ufo.svg" -afbeelding in te stellen als een percentage, zal het UFO-beeld ook de breedte aanpassen om de beoogde verhoudingen te behouden wanneer het formaat van het venster verandert en het "background.svg" -beeld hiermee verandert.
Op de laatste regel die we instellen background-attachment naar vast, wat betekent dat het beeld gefixeerd blijft terwijl we scrollen, en ons de illusie van afkomst geeft.
Probeer je pagina opnieuw op te frissen en te scrollen - je zou de UFO verticaal tussen de planeten moeten zien bewegen.
Terwijl je naar beneden scrolt op je site, zul je merken dat de UFO verdwijnt zodra je ver genoeg naar beneden gaat. Dit gebeurt omdat we voorbij de hoogte van de schuifbalk scrollen ufo_section paneel dus op dat moment kunnen we de achtergrond niet meer zien.
We gaan drie panelen zoals deze op elkaar stapelen, zodat wanneer we langs een en de achtergrond ervan scrollen, de achtergrond van het volgende paneel verdwijnt komt naar voren, het effect creëren van het ene beeld dat wordt vervangen door het andere.
Dus we zullen nu het proces herhalen dat we hierboven gebruikten om de "alien_comet.svg" en "alien_landing.svg" afbeeldingen in te voegen.
Voeg aan uw HTML het volgende toe net na uw ufo_section div en nog steeds in je voorgrond div:
Voeg vervolgens aan je CSS deze nieuwe klassen toe:
.comet_section height: 100%; achtergrond: url (... /images/alien_comet.svg); achtergrondherhaling: geen herhaling; achtergrond-positie: midden; achtergrondformaat: 15% automatisch; achtergrond-bijlage: vast; .landing_section height: 100%; achtergrond: url (... /images/alien_landing.svg); achtergrondherhaling: geen herhaling; achtergrond-positie: midden; achtergrondformaat: 15% automatisch; achtergrond-bijlage: vast; positie: relatief;
We gebruiken hier allemaal dezelfde code en technieken, met alleen de namen van afbeeldingsbestanden en de breedte op de background-size eigenschap ingesteld op 15% om te passen bij de smallere afbeeldingen die we zojuist hebben toegevoegd.
Uw "style.css" -bestand is nu klaar en zou de volgende code moeten bevatten:
body marge: 0; img display: block; .voorgrond positie: absoluut; boven: 0; links: 0; hoogte: 100%; breedte: 100%; z-index: 1; .ufo_section height: 100%; achtergrond: url (... /images/ufo.svg); achtergrondherhaling: geen herhaling; achtergrond-positie: midden; achtergrondformaat: 40% automatisch; achtergrond-bijlage: vast; .comet_section height: 100%; achtergrond: url (... /images/alien_comet.svg); achtergrondherhaling: geen herhaling; achtergrond-positie: midden; achtergrondformaat: 15% automatisch; achtergrond-bijlage: vast; .landing_section height: 100%; achtergrond: url (... /images/alien_landing.svg); achtergrondherhaling: geen herhaling; achtergrond-positie: midden; achtergrondformaat: 15% automatisch; achtergrond-bijlage: vast; positie: relatief;
Ga nu terug naar je site, scroll naar beneden en je zou de UFO in de komeet zien veranderen, dan een beetje verder naar beneden in de "kleine groene man".
Op dit moment zul je merken dat we een aantal problemen moeten oplossen bij het scrollen en ze zijn:
Omdat onze "background.svg" -afbeelding geen vaste grootte heeft, weten we niet de exacte pixelhoogte die elk paneel moet hebben voordat het wordt geladen. Wat we van tevoren kunnen beslissen, is echter de hoogte die elk paneel moet hebben als een percentage van de hoogte van "background.svg".
Met behulp van jQuery kunnen we dit proces implementeren:
Terwijl we bezig zijn, zullen we ook een paar extra lege div's toevoegen om op te treden als spacers tussen elk paneel en hun hoogte ook instellen met jQuery. Het toevoegen van ruimte tussen de panelen zorgt voor een vloeiendere overgang, waardoor het probleem van het zien van de "alien_comet.svg" afbeelding wordt opgelost voordat de "ufo.svg" afbeelding weg is.
Update je HTML zodat er een spacer-div is tussen elke bestaande div zoals:
En in het hoofdgedeelte laadt u in jQuery het volgende:
Voor het sluiten
Accentsconagua
We willen dat deze functie wordt geactiveerd wanneer de pagina voor het eerst wordt geladen en op elk moment wanneer de grootte wordt gewijzigd, dus om dit te bereiken, voegt u ook de volgende code toe na uw opening script label:
$ (document) .ready (function () set_section_heights ();); $ (venster) .resize (function () set_section_heights (););
Binnen in de set_section_heights () functie, het eerste wat we moeten doen is uitvinden welke hoogte onze achtergrondafbeelding momenteel is en deze opslaan als een variabele. Voeg hiervoor deze code toe:
var doc_height = $ (". background"). height ();Met het eerste deel van de code, $ ( "Background"), jQuery vindt het element met de klassenaam achtergrond. De bijgevoegde .hoogte() functie krijgt dan de pixelhoogte van dat element als een geheel getal. Dit vertelt ons hoe hoog onze "background.svg" -afbeelding is en slaat dat aantal op in de variabele doc_height.
Nu gaan we een object opzetten waarin we kunnen definiëren:
We gaan dit object doorlopen en gebruiken de waarden die het bevat om de secties op onze voorgrond te verkleinen.
Laten we beginnen met slechts één item in het object:
var section_heights = "ufo_section": 0.25
Hier hebben we de index (de waarde aan de linkerkant) ingesteld op ufo_section om de klassenaam van onze eerste sectie te evenaren.
Dan hebben we de waarde ingesteld op 0.25 wat een andere manier is om 25% uit te drukken. Binnenkort gaan we deze waarde vermenigvuldigen met het nummer dat is opgeslagen in de doc_height variabele, dat wil zeggen de hoogte van de achtergrondafbeelding. Door dit te doen zeggen we dat we het willen ufo_section deelvenster is 25% van de huidige hoogte van "background.svg".
Bijvoorbeeld, als de hoogte van "background.svg" was 1000px de hoogte van de ufo_section zou eruit komen als 250px:
1000 * 0,25 = 250
Nu we hebben doorgenomen hoe dit object zal werken, laten we wat ingangen toevoegen voor de andere elementen waarop we hoogten willen instellen. Werk uw object bij naar het volgende:
var section_heights = "ufo_section": 0.25, "spacer_one": 0.03, "comet_section": 0.36, "spacer_two": 0.06, "landing_section": 0.298
Notitie: Ik heb deze waarden op basis van vallen en opstaan geselecteerd, dus voel je vrij om met de cijfers te spelen na het voltooien van deze tutorial om de effecten te zien.
section_heights VoorwerpMet ons object compleet zijn we klaar om te beginnen met itereren en onze panelen te vergroten of verkleinen.
Eerst hebben we een $ .Each () functie om het te herhalen section_heights object en extraheer de index en waarde (die respectievelijk de klassenaam en hoogte vertegenwoordigen) uit elke vermelding die deze bevat.
Voeg deze code toe na uw section_heights voorwerp:
$ .each (section_heights, function (index, value) console.log ("Index:" + index, "| Value:" + value););Om u te laten zien hoe de bovenstaande iteratiefunctie de. Uitvoert inhoudsopgave en waarde variabelen die we gebruiken console.log () om een klein bericht naar de console te schrijven voor elk item in de section_heights voorwerp.
Laad uw site opnieuw, open Chrome Web Developer Tools (of het equivalent daarvan in de browser van uw voorkeur) en bekijk de console. Je zou dit moeten zien:
Aan de linkerkant van elk bericht na Inhoudsopgave: je kan de ... zien inhoudsopgave voor elke vermelding, dat wil zeggen de klassenamen van de elementen die we willen wijzigen.
Aan de rechterkant van elk bericht na Waarde: je kan de ... zien waarde voor elke invoer, d.w.z. de fractie van de totale hoogte die elk paneel zou moeten zijn.
In plaats van alleen deze gegevens naar de console te loggen, laten we deze gebruiken om de grootte van onze voorgrondsecties in te stellen. Verwijder de console.log () regel en vervang dit door:
$ ("." + index) .hoogte (Math.floor (waarde * doc_height));Laten we opsplitsen wat deze regel doet.
Eerst hebben we $ ("." + index). We gebruiken dit om het element te vinden waarvan we de grootte willen wijzigen. Met de eerste vermelding in ons object bijvoorbeeld inhoudsopgave is ingesteld op ufo_section. In dit geval zal het eerste deel van onze code evalueren om te worden $. (".ufo_section"). Met deze code wordt jQuery gevraagd om op de pagina naar het element met de klasse te zoeken ufo_section.
Vervolgens voegen we toe .hoogte(… ). Met deze code stelt jQuery de hoogte in van het element dat het heeft gevonden, en verandert het in de waarde die tussen de haakjes is doorgegeven.
Tussen de haakjes zul je zien waarde * doc_height. Hier doen we de vermenigvuldiging die we eerder noemden om de beoogde paneelhoogte te berekenen. De eerste invoer van ons object heeft bijvoorbeeld de waarde 0.25. Dit aantal wordt vermenigvuldigd met het aantal dat is opgeslagen in de doc_height veranderlijk.
Rond de vermenigvuldiging van die twee variabelen zul je zien Math.floor (). Dit rondt het resultaat van onze vermenigvuldiging af naar het dichtstbijzijnde hele getal.
Dus alles bij elkaar, als de waarde van doc_height is 5197, de eerste vermelding in ons object zou dat vermenigvuldigen met 0.25 ons een resultaat geven van 1299,25.
Math.floor () zal dat bedrag naar beneden afronden 1299. Dit betekent dat onze code nu zou evalueren om: $. (".ufo_section") .hoogte (1299);
Met deze regel vindt jQuery het element met de klasse ufo_section en stel de hoogte in op 1299px.
Dat omvat uw HTML en JavaScript. Het voltooide "index.html" -bestand zou nu deze code moeten bevatten:
Scrollen door Alien Lander 