Schaduw met parallax-effect

Als de zon schijnt, ontstaat er een schaduw. Met het draaien van de zon (van oost naar west) verplaatst ook de schaduw zich. Als je in de zon loopt, verplaatst je schaduw zich ook, maar dan veel sneller. Dat geldt voor alles wat beweegt.

Schaduwen bij plaatjes of andere dingen in een webdocument bewegen niet omdat het statische elementen zijn. Eigenlijk is dat vreemd, want we zijn gewend aan bewegende schaduwen.

Zoals niet ongebruikelijk is op internet, is er altijd wel iemand die een oplossing verzint voor zoiets. In dit geval was het de Amerikaan Jimmy Lo, die een jQuery-Plug-in maakte die schaduwen laat bewegen als een soort parallax-effect. Jimmy Lo heeft ook een demo-pagina met deze plug-in.
Deze pagina is een bewerking van deze plug-in. Hier rechts zie je een voorbeeld. Let op de schaduw bij de witte rechthoek als je de pagina scrollt.

• Besproken worden:
  1. Een algemene beschrijving.
  2. Inbouwen in je eigen site.
   
• Algemene beschrijving
• Het script is een jQuery-plug-in, die staat in de file lilt.js. Aanpassing daarvan is niet nodig om het te laten werken. Er is ook een geminimaliseerde versie beschik­baar, die laadt wat sneller.
   
• Het script heeft ook nog wat CSS nodig. Natuurlijk is er ook een $(document).ready()-function om het effect te starten.
• Het script kijkt naar de 'stand' van de schaduw. Als er wordt gescrolled, wordt de verticale offset veranderd, waardoor de schaduw zich verplaatst.
   
• Deze plug-in is toepasbaar met elk element waar je een schaduw bij kunt maken.
• Je hoeft de schaduw niet zelf te programmeren in CSS. Dat doet het script voor je. Wel moet je zorgen dat er voldoende ruimte is voor de schaduw.
• Als je dit wilt toepassen geef het element (<div>, <p>, <img>, enz.) de class lilt. Dat is al voldoende om het basis-effect te krijgen.
• Om de schaduw om een element verder op te maken zijn er meerdere mogelijkheden:
   
  • Defaults overschrijven in de start van de plug-in (zie verder).
  • data-attributen meegeven aan het element dat de klasse lilt heeft
  • Natuurlijk kun je ook in de plug-in zelf dingen gaan veranderen, maar dat raad ik niet aan.
   
• Zaken die je kunt aanpassen staan in onderstaande tabel:
   
  

  Naam		Betekenis
  horizontal-offset		CSS-eigenschap voor box-shadow. Stelt de horizontale verschuiving van de schaduw naar rechts in. Een negatief getal is naar links. default: -20px; hier: -20px.
  blur-radius		CSS-eigenschap voor box-shadow. Stelt de breedte van de vervaging van de schaduw in. default: 40px; hier: 20px.
  spread-radius		CSS-eigenschap voor box-shadow. Stelt de breedte van de schaduw in. default: 0; hier: 0.
  shadow-color		CSS-eigenschap voor box-shadow. Stelt de kleur van de schaduw in. default: #999999; hier: #987.
  subtleness		Stelt de gevoeligheid van de beweging in. Getal ≥ 1. Hoe hoger dit getal, hoe minder beweging. Een waarde > 50 wordt niet aanbevolen, want dan zie je het effect niet of nauwelijks meer. default: 7; hier: 10.

  
   
• Inbouwen in je eigen site
• Code die je in je pagina moet opnemen om het werkend te krijgen staat hieronder genoemd.
   
• Omdat dit een plugin-in is heb je jQuery zelf ook nodig. Op de site van Jimmy Lo wordt versie 1.11.1 gebruikt, maar versie 1.7.1 volstaat. Het beste betrek je die van een CDN. In dit voorbeeld is Google Apis gebruikt.
• In de download vind je twee versies van de plug-in, een gewone en een geminimaliseerde. De geminimaliseerde versie heeft de voorkeur want die laadt het snelste.
• De download-link op de site van Jimmy Lo werkt niet. Om de originele code te krijgen moet je op de Github-repository van dit project zijn.
• Voor de overige oorspronkelijke CSS en HTML-code moet je op de website zijn, want die zit niet in de downloadfile.
  De downloadfile van deze site bevat een complete set code.
   
• Defaults veranderen in de $(document).ready()-function.
  Dit doe je door aan $().lilt() een JSON-object mee te geven. De code hieronder verandert de kleur en de horizontale offset van de schaduw:
  <script>
$( document ).ready(function() { $().lilt({
  'shadow-color': 'red',
  'horizontal-offset': '15px'
}); });
</script>
   
• Defaults veranderen met data-attributen.
  Zoals hiervoor al is genoemd, werkt het effect op elementen met class="lilt". Door aan dat element data-attributen mee te geven. Daar zijn er vier van, waarvan de naam voor zichzelf spreekt: data-horizontal-offset, data-blur-radius, data-spread-radius, data-shadow-color en data-subtleness. Zie ook de code verder op deze bladzijde.
• Aanpassingen die je doet met data-attributen hebben prioriteit boven aanpassingen die je doet via de $(document).ready()-function.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<style>
.lilt {
  width:100px;   height:150px;   background-color:#fafafa;
  border:1px solid #000; }
</style>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="lilt.min.js"></script>

(Zet dit in de <BODY>, op de plaats waar het element met het schaduw-effect moet komen).

<div class="lilt"
  style="float:right; padding:10px; margin:0 0 20px 40px; text-align:left; background:#ffd"
  data-horizontal-offset="-20px"
  data-blur-radius="20px"
  data-spread-radius="5px"
  data-shadow-color="#987"
  data-subtleness="10">
    Scroll deze pagina en let op de schaduw!
</div>

(Zet dit helemaal aan het eind van de <BODY>).

<script>
$( document ).ready(function() {
  $().lilt();
});
</script>

Downloaden:
 
Druk op de knop:  File: voorb430.zip, 2085 bytes.