Overalt på internettet springer websteder op, der bruger det såkaldte parallaxrulle. En parallaxrulle er i det væsentlige, når indholdet ruller ved forskellige hastigheder, hvilket skaber en følelse af perspektiv og dermed dybde.

Det er en tiltalende effekt, og kan anvendes til så mange lag som du vil. I denne artikel vil jeg introducere de grundlæggende principper ved at vise dig, hvordan man opbygger en simpel tolags parallax effekt.

HTML'en

For at starte med har vi brug for nogle HTML, vi vil inkludere nogle fyldtekst, der skal placeres i et afsnit og derefter en anden

det vil holde vores baggrund:

Home page

We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.

We offer the following services:

  • Branding
  • Logos
  • Websites
  • Web applications
  • Web development – HTML5, CSS, jQuery
  • Content Management Systems
  • Responsive Web Design
  • Illustration
  • Business cards
  • Letterheads and compliment slips
  • Flyers
  • Mailers
  • Appointment cards

Sub page

Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:

Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.

Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.

Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.

Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

Dette er al den HTML, vi skal bruge. Al teksten er kun for at sikre, at vi dækker hele siden, så der skal scrolles. Lad os gå videre til CSS:

CSS

CSS kræves for at skabe en parallax effekt er faktisk ret simpelt, hvis du forstår, hvorfor det er skrevet, som det er. Vi skal først indstille baggrundsbilledet for .bg div og så skal vi stoppe div fra at rulle, fordi rullehandlingen vil blive anvendt af jQuery; så vi skal sætte sin position fast. Næste sætter vi bredden til 100% og højden til 300% for at sikre, at div'en er større end den egentlige skærm. Vi placerer det øverst til venstre og endelig giver det et z-indeks på -1 for at sikre, at det gengives under teksten.

.bg {background: url('bg.jpg') repeat;position: fixed;width: 100%;height: 300%;top:0;left:0;z-index: -1;}

Dette er alt CSS vi har brug for til bg div, nu skal vi bare style resten af ​​vores side (selv om dette er helt valgfrit, har det ingen indflydelse på parallaxrullen):

section {color: #fff;font-family: arial;width: 500px;margin: auto;line-height: 20px;font-size: 16px;}

Prøv at rulle siden nu, og du vil se, at teksten ruller, men baggrunden forbliver løst, vi vil ændre det med vores jQuery:

JQuery

Hvad vi vil have jQuery at gøre, er at kontrollere, hvor langt brugeren har rullet og flytte baggrunden med en langsommere hastighed. Vi skal oprette en funktion kaldet parallax og oprette en variabel, der vil holde værdien af ​​de pixels, brugeren har rullet:

function parallax(){var scrolled = $(window).scrollTop();

For at få baggrunden til at rulle med samme hastighed som teksten, sætter vi topværdien af ​​div til den negative værdi af rullen, og lukker derefter funktionen. Ligesom:

    $('.bg').css('top', -(scrolled) + 'px');}

Parallax-rullepunktet skal imidlertid bevæge sig i en anden hastighed, så vi justerer hastigheden, vi multiplicerer værdien med en brøkdel, for eksempel 0,2 for 20%:

function parallax(){var scrolled = $(window).scrollTop();$('.bg').css('top', -(scrolled * 0.2) + 'px');}

Der er kun en ting mere at gøre for at få effekten kørende, og det kalder funktionen hver gang rullehændelsen udløses:

$(window).scroll(function(e){parallax();});

Efter at have gjort dette er vores kode færdig. Hvis du tester filen, ser du den fungerer. For at ændre hastigheden skal vi ændre brøkdelen i funktionen; mindre fraktioner reducerer hastigheden og højere fraktioner øger det. Du kan se det endelige resultat af denne kode i denne pen, jeg lavede.

Konklusion

Som du kan se at skabe en parallax effekt er ikke så hård som du måske har forventet. Selvfølgelig er dette bare et simpelt eksempel, men du kan bygge videre på dette for at skabe enhver form for kompleks parallax effekt, som du kan lide.

Har du brugt en parallax effekt i et projekt? Har du en bedre metode? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, glidende perspektivbillede via Shutterstock.