CSS-drevet parallax
Skrevet av Pål Strøm -
Vi har ikke masse parallax på nettsiden vår, men vi har nok til at vi følte for å ta en runde og se hvilke metoder som finnes. Vi fant en skikkelig god en.
Den metoden vi endte opp med er så nært ren CSS parallax vi kommer i denne omgang. Om du har vært borti 3D i CSS tidligere, kan du nok hoppe noen paragrafer ned, da jeg tenkte å starte med å forklare hvordan det settes opp helt i starten her.
Når vi skal jobbe med 3D i CSS, må vi starte med å definere en scene.
Om du vil bruke <body> som scene, eller om du setter opp en <div id="scene"> gjør du akkurat som du vil. Bare husk at scenen påvirker alt som er inni,
så kan være dumt å bruke body om du har annet innhold på nettsiden som ikke skal være deltaker i den fantastiske 3D-verdenen du er i ferd med å sette opp.
#scene {
perspective: 1000px;
}
Dette er det eneste vi trenger for å opprette scenen vår. perspective kan settes til én av tre verdier: none, px, em.
Jeg liker å sette tallet til et rundt og fint tall, jeg skal komme tilbake til grunnen senere.
Jo høyere verdi man setter som perspektiv, jo lengre unna scenen står man. Så lave verdier gir stor effekt, og høye verdier gir liten effekt.
Se for deg en boks som er 1m3, jo nærmere du står, jo mer forvrengning får sidene.
Når scenen er på plass, kan vi begynne å legge inn litt elementer som skal leve i denne fantastiske 3D-verdenen vår. I dette tilfellet er man jo tilbøyelig til å tenke at vi vil ha noen barter flyvende rundt. Hva ellers?
<div class="mustasj1"></div>
<div class="mustasj2"></div>
<div class="mustasj3"></div>
[class^="mustasj"] {
position: absolute;
background: url(..) no-repeat;
/* osv osv osv */
}
.mustasj1 { transform: translateZ(-50px); }
.mustasj2 { transform: translateZ(100px); }
.mustasj3 { transform: translateZ(40px); }
/* osv osv osv */
Om man bruker høye verdier for å overdrive effektene, kan man også slenge på en scale. Og det er her grunnen til å bruke runde og fine tall på perspective
kommer inn. Når man skal bruke scale for å rette opp for distansen må man regne ut hvor mye man trenger å skalere.
Om scenen er 1000px dyp, og man flytter et element 1000px inn i scenen, så må man doble størrelsen, altså transform: scale(2).
Og motsatt vei må man halvere: transform: scale(.5). Så om man flytter noe noe 250px inn i scenen, blir det scale(1.25), osv.
Se, så lett å regne ut skaleringen, da, gitt!
Fortsatt litt usikker på hvordan denne effekten faktisk fungerer? Vel, da kanskje det hjelper med en visuell fremstilling. Roter scenen (klikk for å rotere tilbake), så kan det hende du har litt lettere for å se det.
Så kommer siste biten, som håndteres av javascript, for å endre perspektiv-punktet. Det er dette som gir 3D-effekten når man flytter på musepekeren.
var stage = document.querySelector('.stage');
function render() {
var scrollTop = window.pageYOffset;
stage.style.perspectiveOrigin = '0 ' + scrollTop + 'px';
window.requestAnimationFrame(render);
}
render();
document.addEventListener('click', function() {
document.querySelector('body').classList.toggle('rotate');
});
Det eneste vi gjør er å tracke musepekeren, og hvor langt man har scrollet ned på siden. Så kombinerer vi disse to til å flytte på forsvinningspunktet, som det kalles. Om du er litt usikker på hvordan perspektiv funker med forsvinningspunkter, så kan du gjøre et enkelt google-søk på perspective point, så finner du mange gode forklaringer.
Ferdig å se på imponerende arkitekttegninger med både ett-, to- og trepunkts perspektiv? Jeg også. Crazy opplegg. Men jeg har egentlig ikke så mye mer å tilføye. Er no' rendering bugs i Firefox (JEG HATER DEG, FIREFOX!), ellers ikke noe mer å tenke på. Så nå kan du gå tilbake til å browse tegninger på google.