Achtergrond fade in
22 Juni 2009 | Door Thijs Visser | RSS feedIn mijn vorige artikel schreef ik over iemand die geprobeerd heeft om mijn achtergrond-fade-in effect te stelen, zonder daarbij om toestemming te vragen. In dit artikel zal ik uitleggen hoe dit javascriptje werkt.
Het idee achter het effect
De achtergrond van deze site is dusdanig groot dat weinig mensen het snel kunnen inladen. Om de achtergrond toch mooi weer te kunnen geven heb ik het idee van een fade in achtergrond geïntroduceerd. Waarbij de achtergrond langzaam naar voren komt als deze geladen is.
Het idee is gebaseerd op overlappende achtergronden. De eerste achtergrond heeft een grijze gradiënt die nog geen kilobyte groot is. Deze achtergrond is dus snel geladen en deze koppel ik aan de body tag. De tweede achtergrond is eigenlijk de rechter strook van de grote achtergrond die uit wordt gestrekt over de gehele breedte van het scherm. Ik koppel deze achtergrond aan een div met een ID van “one”. De derde achtergrond is die je nu ziet op de site. Deze wordt pas weergegeven als de afbeelding volledig is geladen, waarbij de transparantie in een paar seconde wordt vergroot van 0 naar 1.
Visueel zien de lagen er als volgt uit:
De verschillende lagen, zoals ze zich in de website boven elkaar bevinden.
De HTML
De drie achtergronden moeten worden gekoppeld aan de html elementen. Ik doe dit met de body tag en twee div elementen. Beide geef ik een eigen ID mee.
<body><div id="one"></div><div id="two"></div><div id="content">...</div></body>
Nu hebben we de elementen op z’n plaats. We kunnen nu met behulp van CSS de achtergronden koppelen aan de elementen.
De CSS
De CSS ziet er als volgt uit:
html, body{width: 100%;height: 100%;}body{background: #1d1d1d url('http://www.thijsvisser.nl/images/website_images/background_x_basic.jpg’) left top repeat-x;}#one{width:100%;height: 100%;position:fixed;background: url('http://www.thijsvisser.nl/images/website_images/background_x2.jpg’) left top repeat-x;}#two{width:100%;height: 100%;background: url('http://www.thijsvisser.nl/images/website_images/background_big.jpg’) left top no-repeat;position:fixed;left:0;top:0;}#content{position:absolute;}
Allereerst zetten we de html en body tag op volledige breedte en hoogte, zodat alle elementen, binnen de body en html ook de maximale breedte en hoogte kunnen gebruiken.
We voegen de eerste achtergrond toe aan de body tag. Dit is de onderste grijze achtergrond die iets minder weegt dan een kilobyte. De grijze achtergrond strekken we uit over de gehele breedte van de pagina, met behulp van het attribuut “repeat-x”.
Aan het div element met het ID van “one” voegen we het tweede achtergrond toe. Deze achtergrond is eigenlijk een verticale gestripte versie van de grote achtergrond. Dit element laten ook weer de volledige breedte en hoogte benutten. En we strekken net zoals bij het body element, de achtergrond over de gehele breedte van de pagina. Als de grote achtergrond nog niet geladen is krijgen we deze achtergrond te zien.
Ook zetten we de positie op fixed. Hierdoor beweegt deze achtergrond niet met pagina mee als we naar beneden scrollen. Positie fixed werkt net zoals positie absolute. Het element wordt uit de normale flow gehaald en boven alle andere artikelen geplaatst. Dit is belangrijk, omdat we de grote achtergrond boven deze achtergrond willen plaatsen, in plaats van eronder.
De div met het ID van “two” is het element waaraan we de grote achtergrond toevoegen. Net zoals bij de body en het div element met ID van “one” zorgen we ervoor dat dit element zich spreidt over de gehele breedte en hoogte van de pagina. De achtergrond zelf laten we niet herhalen. We willen dat de achtergrond over de vorige achtergrond heen komt te liggen en ook dat hij niet van zijn plaats komt als we naar beneden scrollen. Hiervoor voegen we weer de positie fixed toe. Nu komen we drie achtergronden over elkaar heen te liggen.
Om de inhoud over de achtergrond heen te leggen in plaats van eronder, moeten we hier die positie eigenschap veranderen naar absolute. Hierdoor komt de inhoud over de achtergrond te liggen.
Faden met jQuery
We hebben nu nog steeds geen achtergrond die langzaam naar voren treedt als het geladen is. Om dit te bereiken hebben we javascript nodig. Omdat ik geen programmeertalent ben, maar wel het een en ander af weet van CSS, maak ik gebruik van het javascrip framework jQuery. We implementeren deze code in de header en verder linken we naar een apart javascript bestand dat loopt op dit framework. Dit schattige javascriptje ziet er als volgt uit en is verantwoordelijk voor het uiteindelijke fade-in effect:
$(function() {$(’#two’).css(‘opacity’,0);var img = new Image();$(img).load(function(){$(’#two’).fadeTo(1250,1).css(‘visibility’,‘visible’);}).attr(‘src’,’http://www.thijsvisser.nl/images/website_images/background_big.jpg’);});
Allereerst zetten we de “opacity” op nul. Dit zorgt er voor dat de achtergrond niet weergegeven wordt als de achtergrond geladen is. Met de volgende regel maken we een nieuwe afbeelding aan, die we nodig hebben om de achtergrond in te kunnen laden. De regel daaronder beschrijft hoe we deze afbeelding laden. Met “.attr” laten we zien welke afbeelding we bedoelen en weet jQuery welke afbeelding hij moet inladen.
Met fadeTo laten we de afbeelding animeren in 1250 milliseconde naar een opacity van 1. Tevens zetten we de visibilty op visable. Wat we eigenlijk beschrijven is: Laad de afbeelding met deze url. Als deze geladen is animeer dan de opacity naar 1. Daarom moesten we eerst ook de opacity op nul zetten.
Geen vrijbrief
Deze uitleg is geen vrijbrief voor iedereen om zomaar een javascriptje over te nemen. Graag ontvang ik een email van je, met daarin de vraag of je dit scriptje mag gebruiken op jouw site. Vraag je dan wel af of het wel echt nodig is om een oversized achtergrond te gebruiken.
Geplaatst in Proces, Tutorial0 reacties