Opplæring: Hvordan implementere parallax-rulleeffekten, del 1

For flere måneder siden gjennomgikk jeg historien til rulle av parallax og viste flere eksempler på nettsteder som bruker parallax-teknologien i innlegget, "Hvordan parallax-effekten brukes i webdesign". I dag vil jeg gjennomgå grunnlaget og trinnene som kreves for å lage din egen webside ved å bruke rulleteknologien for parallax, mens jeg innlemmer et retro vintage "Route 66" tema. Inspirasjon til denne opplæringen blir kreditert Richard Shepherd og hans GitHub-kode for parallax-rulling, Chris Coyiers parallaks bakgrunnsdemonstrasjon, Juan Pablo Sarmientos One Page Website, Vertical Parallax demonstrasjon og Nike Better World. Vær oppmerksom på at GitHub-koden leveres under en MIT-lisens, og leveres som uten implisitt garanti eller support. Imidlertid gis tillatelse til å bruke "programvaren" gratis, uten begrensninger eller begrensninger.

Selv om det er flere metoder som kan brukes til å implementere parallax-rulleeffekten,

Jeg vil bruke GitHub-koden for parallaksrulling av Shepherd som en mal i denne demonstrasjonen, og vil bruke den lagdelte metoden for det meste av funksjonaliteten, der flere bakgrunnsbilder vil bli satt til å bevege seg uavhengig på vertikal måte og vil være kompositter på hverandre.

Det jeg modifiserte

Ved å bruke GitHub-koden fra Richard Shepherd som en grunnmal, sammen med HTML5-kjeleplaten for HTML og CSS, er det jeg har gjort for denne opplæringen å lage et "Route 66" -tema som erstatter de originale bildene med min egen, inkludert en vintage road kart, flere vintage AAA-postkort med moteller langs den berømte ruten, flere bakgrunner og noen png-bildefiler for titler. Jeg har også endret CSS3 med innstillinger for tekstskygge, boksskygge, radius og kantradius.

Denne opplæringen vil bruke følgende teknologier, og grunnleggende brukerkunnskap om hver enkelt vil hjelpe deg med å forstå konseptene:

  • HTML5
  • CSS3
  • jQuery
  • Javascript

HTML5 og CSS3

Vårt første trinn er å sette opp HTML5-webdokumentkoden som består av seks seksjoner, og hver seksjon inneholder artikler, divisjoner, overskrifter og innhold inkludert tekst, bilder og en innebygd videohenvisning. Grunnlaget for vår index.html-fil som er brukt i denne demonstrasjonen er hentet fra HTML5-kjeleplaten for et bunnsolid standardsted.

En kodebit med HTML5-koden vises nedenfor:

 Parallax Scrolling Tutorial 

Legg merke til at jeg har inkludert Google Web-skrifter for "Lobster Two", "Jacques Francois", "Orienta" og "Oxygen + Mono". Disse vises som separate CSS-filer når de vises under panseret ved hjelp av Google Inspect Element, eller andre visningskildeverktøy. Det er også koblet to CSS-filer, og de er "style.css" og "reset.css" som er en del av HTML5 Boilerplate.

Alt innhold er lukket i en "hoved" div-container med en id som tilsvarer "main" og en rolle tilsvarer "main". Og innenfor hovedcontaineren har vi fem seksjoner, hver oppført uavhengig med sine egne stiler.

Avsnitt én

Avsnitt 1 starter introduksjonen med ID-en "en", en klasse "journal", bla datahastighet på "8" (sammenlignet med resten av siden), og datatypen er satt til "bakgrunn". Divisjonen i denne delen har en klasse "titleScroll", en datatype "sprite" med en datakompensasjonY på "100", en data-Xposisjon på "50%", og datahastigheten er satt til "-10 "sammenlignet med bakgrunnen på siden. Jeg har kopiert et forkortet kodebit av seksjon 1 her:

US Route 66 (US 66 eller Route 66), også ...

Motorveien, som ble en av de mest ...

 En skjermdumping av den første delen vises nedenfor i figur B som vist i Google Chrome versjon 23.0.1271.64 m: 

Figur B

Id = "en" ringer fra stilarket for bakgrunnsbildet "VintageMapWesternUS.jpg", og bakgrunnen er satt til 50% 0 ingen repetisjon fast. Dette bakgrunnsbildet er et øyeblikksbilde av et gammelt amerikansk oljekart over det vestlige USA fra 1960-tallet som starter "Route 66" -temaet jeg bruker i denne demonstrasjonen. Banneren "Route 66" er bildefilen "Route66.png" som kalles fra class = "titleScroll", og "Tutorial" -tittelen er bildefilen "tutorial-title.png" kalt fra HTML som vist i utdraget over. De tre tekstinnholdsboksene i den første delen får en klasse "contentBox" som er utformet med den lilla kornbakgrunnen, en kantlinje, kantradius og boksskyggeeffekter.

Avsnitt to

I seksjon # 2 skyver vi bakgrunnen med en datahastighet lik "5" sammenlignet med resten av siden. Når denne tekstboksen ruller med samme hastighet som siden, og raskere enn bakgrunnen, skaper den den sjarmerende parallakseffekten.

Bakgrunnsbilde

I denne delen er vi ...

Som denne tekstboksen er ...

 En skjermdumping av den andre delen vises nedenfor i figur C som vist i Google Chrome versjon 23.0.1271.64 m: 

Figur C

ID = "to" i seksjon nr. 2 setter bakgrunnsbildet "Route66California.jpg", som er et vintage AAA-postkort fra Clark Motel langs Route 66 i Pasadena, CA. Klassen = "journal" setter høyden til "1000px", polstring og margin til "0", bredde til "100%", maksbredde til "1920px", posisjon relativt, margin til "0" og "auto", og inkluderer stiler for en kantlinje, kantlinje og en boksskygge.

Det neste segmentet i denne opplæringen vil legge til i de påfølgende tre seksjonene og beskrive skriptene som ble brukt til å lage noen av parallax-rullefunksjonene. Og en nedlasting av nettfilene vil bli gitt på slutten av demonstrasjonen og opplæringen.

© Copyright 2021 | pepebotifarra.com