Verticaal fade-effect

Hier onder zie je een blok lipsum-tekst. De tekst vervaagt naar beneden toe. Als je er op klikt/tikt verschijnt de hele tekst en verdwijnt het fade-effect. Na nog een klik/tik komt het fade-effect weer terug.

Je ziet dit vaak bij sites die veel informatie op één pagina willen proppen, maar niet alles tegelijkertijd willen laten zien. Denk bijvoorbeeld aan een lijst met technische specificaties bij webwinkels, maar ook aan een site als CVandaag, waar op deze manier hele artikelen worden verborgen.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Inbouwen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML, CSS en JavaScript. De code van het voorbeeld staat in het document zelf.
   
• HTML
• De HTML bestaat uit een <div>-tag met id="container". Daarbinnen zijn een tweede, lege <div>-tag met id="fader" en de tekst.
• Zet de HTML in het document op de plaats waar het effect moet verschijnen. Regel de opmaak via CSS.
   
  
• CSS
• De container wordt als eerste gepositioneerd in het midden van de regel. De tekstkleur wordt ingesteld op steenrood (maroon).
• De afmetingen van het tekstblok zijn 400px breed × 200px hoog. De positionering is expliciet opgegeven als relative. Dat is nodig omdat fader absoluut binnen de container geplaatst moet worden.
• Om scrollbars te voorkomen is overflow ingesteld op hidden. Eventueel kan hier auto of scroll worden ingezet. Als je dat doet zul je wel aanpassingen moeten doen om te voorkomen dat het effect verloren gaat.
   
• De fader is absoluut gepositioneerd tegen de onderkant van de container. De hoogte is de afstand waar het fade-effect zichtbaar is. De breedte is gelijk aan de breedte van de container.
• De fader heet ook de eigenschap visibility: visible. Als er op het tekstblok wordt geklikt, wordt visibility door JavaScript gewijzigd in hidden, of, bij een tweede klik, weer teruggezet op visible. Op deze manier wordt het fade-effect verborgen of zichtbaar gemaakt.
• Voor het maken van het fade-effect zijn er twee mogelijkheden:
   
  • background: linear-gradient(to bottom, rgba(rrr,ggg,bbb) 0%,
    rgba(rrr,ggg,bbb,1) 100%);. Hierin staat rrr,ggg,bbb voor de drie kleurcomponenten Rood, Groen en Blauw. Deze methode is op deze bladzijde gebruikt.
    De function hsla() kun je hier ook gebruiken. Zie ook de items Kleurcodes voor tekst, links en achtergrond en Kleuren is CSS.
  • De CSS-code op deze pagina luidt:
    background: linear-gradient(to bottom,rgba(228,233,246,0) 0%,
rgba(228,233,246,1) 100%);
     
  • background: url(data:image/svg+xml;base64,.........);. er wordt hierbij een plaatje gebruikt in .SVG-formaat, dat wordt gecodeerd met Base64. Op een van mijn andere websites, www.webmasterij.nl, kun je eenvoudig tooltje downloaden om zelf bestanden mee te coderen of te decoderen.
  • De code van het .SVG-plaatje luidt:
    <?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%"
    height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated"
    gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%"
    y2="100%">
    <stop offset="0%" stop-color="#e4e9f6" stop-opacity="0"/>
    <stop offset="100%" stop-color="#e4e9f6" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1"
    fill="url(#grad-ucgg-generated)" />
</svg>
     
  • Opmerking: In de downloadfile wordt wit gebruikt als achtergrondkleur (rgb = 255,255,255, resp. #ffffff).
   
• JavaScript
• Het JavaScript bestaat uit één function, toggleText(). Deze zet het effect aan of uit.
• De function kijkt eerst of het effect aan of uit staat. Dat gebeurt aan de hand van de hoogte van de container. Als de hoogte 200px is staat het effect aan.
• Als het effect aan staat wordt het uit gezet:
  •   De hoogte wordt ingesteld op 300px. •   Het verloop-effect wordt uitgeschakeld door visibility op hidden te zetten.
• Als het effect uit staat wordt het aan gezet:
  •   De hoogte wordt ingesteld op 200px. •   Het verloop-effect wordt ingeschakeld door visibility op visible te zetten.
• toggleText() wordt aangeroepen via onclick op container.

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>
#container {
  margin: 0 auto;
  color: maroon;
  width: 400px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
#fader {
  height: 100px;
  position: absolute;
  width: 400px;
  bottom:0;
  visibility: visible;
  /* Gradient transparant naar achtergrondkleur deze Site*/
  background: linear-gradient(to bottom,rgba(228,233,246,0) 0%,rgba(228,233,246,1) 100%);
  /* Gradient transparant naar achtergrondkleur deze Site*/
  /*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZTlmNiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNGU5ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);*/
</style>
 
<script>
function toggleText() {
  var aa = document.getElementById('container');
  var bb = document.getElementById('fader');
  if (aa.style.height == "200px") {
    aa.style.height = "300px";
    bb.style.visibility = "hidden";
  } else {
    aa.style.height = "200px";
    bb.style.visibility = "visible";
  }
}
</script>

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).

<div id="container" onclick="toggleText()"><div id="fader"></div>
  Lorem ipsum dolor sit amet....
</div>

Downloaden:
 
Druk op de knop:  File: voorb669.zip, 2015 bytes.