Et lille kig på transition effekter

Endnu en ny feature ved CSS3 er transition. Med den er det muligt at synlig gøre overgangen i ændringerne på sine elementer, f.eks. hvis man flytter et element fra X til Y, så vil man se elementet bevæge sig istedet for blot at hoppe i et ryk.

Det giver mulighed for at lave interessante effekter, og her er to, en rullende film og en scrollende baggrund vha. af flere baggrunde.

Bemærk: eksemplet virker muligvis ikke i internet explorer < 10, så der vil det blot være en hover kedelig hover effekt som alle andre. Det første eksempel forestiller et lille TV med en rullende film. Ikke noget fancy, men som link til sine youtube videoer eller sine p0rn film, er det da en fed lille gimmic. Det nederste eksempel er noget mere interessant, den scroller nemlig 2 baggrunde med forskellig fart, også kendet som parallax scrolling. Det er faktisk meget nemt at lave, men lad os først se på hvordan filmen laves.

Transition effects go!

CSS til det lille TV, den tager brug af box-shadow for at lave lidt dybde så det ligner et TV, men ellers er det ganske standard:

.tv {
   width: 40px;
   height: 28px;
   line-height: 28px;
   background: #acacac url(images/film-clip.png) left top no-repeat;
   border: 2px solid #999;
   border-radius: 5px;
   -webkit-box-shadow: 2px -2px 0px #535353;
   box-shadow: 2px -2px 0px #535353;
}

Det er først hover, dvs. når musen køres hen over knappen, at magien kommer i spil:

.tv:hover {
   background-position: left bottom;
   -webkit-transition: background 1s; 
   -moz-transition: background 1s;
   transition: background 1s;
}

Ok, så først ændres background-position til left bottom. Hvad det gør er at den tager baggrundsbilledet og ændrer dens position på elementet, så den er viser fra bunden og op i stedet for fra toppen og op som er standard.
Derefter sættes transition til background 1s, og det fortæller browseren at for alle ændringer ved background skal transitionen af ændringen vises, og det tager 1 sekund at vise. Og voila, baggrunden vil nu rulle fra top til bund på 1 sekund.

Og nu til det blærede!

Parallax scrolling

Parallax scrolling kendes fra foreksempel 2d platforms spil hvor baggrunden ser ud til at være delt i flere del hvor foreksempel baggrunden med bjergene og de flyvende drager bevæger sig langsommere end de træer der er i forgrunden hvor ens figur (super helten Pnuperman) bevæger sig. I det her eksempel er der ingen drager, men der er træer. Lad os se på det.

Effekten er egentlig simpel nok, det eneste der skal til er 2 eller flere billeder, som har forskellig længde. Jeg har lavet en baggrund her og nogle træer her hvor billedet med træerne hvor baggrunden er transparent og længden dobbelt så bred som det andet.

De to billeder bruges så som baggrund på et div element:

.landscape {
   width: 400px;
   height: 300px;
   border: 4px solid #666;
   border-radius: 10px;
   background-image: url(images/trees.png), url(images/landscape-background.jpg);
   background-position: bottom left, top left;
   background-repeat: no-repeat;
}

Den opmærksomme CSS haj vil straks bemærke at der er angivet to urls til background attributten, og det er da ikke standard?! Jo med CSS3 bliver det standard, og det er med til at gøre netop parallax scrolling easy as pie!

Lad os se hvad der sker ved hover:


.landscape:hover {
   background-position: bottom right, bottom right;
   -webkit-transition: background 10s; 
   -moz-transition: background 10s;
   transition: background 10s;
}

Næsten det samme som ved TV eksemplet, her sættes baggrundene bare til right i stedet for left og det gør at billederne flyttes til højre i løbet af 10 sekunder, og det det ene billede er længere end det andet, så vil billederne blive flyttet med forskellig hastighed. Og voila parallax scrolling!

Eksempel på paralax scrolling - træerne bevæger sig langsommere end baggrunden.

Browser support

Der skal bruges -moz- prefiks til firefox, -webkit- prefiks til Chrome og Safari. Internet explorer, aner det ikke, jeg tror ikke IE9 understøtter det, men har ikke kunne teste det.

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.