Sticker-overlay op de pagina

Over deze pagina ligt een 'sticker' die een deel van de tekst onleesbaar maakt. Als je scrollt verdwijnt de sticker. Dit kan worden gebruikt om een belangrijke melding op het scherm te zetten.

Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.

Inspiratie voor dit verhaal is gekomen door een artikel in Webdesigner Magazine 95 (mei 2017), pag. 56 en 57.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Code wordt in het artikel niet getoond, daarom heb ik het voorbeeld van scratch af opnieuw gebouwd.
De code kun je downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML, CSS en JavaScript, alle drie staan die in het document.
   
• Het werkt ook met ook met aanraakschermen zoals een telefoon, mits die niet te oud is.
   
• HTML
• De HTML bestaat uit één <div>-tag met de klasse sticker. Die dient als container voor het plaatje.
• De <div>-tag bevat een <img>-tag voor het plaatje. Dat wordt met CSS opgemaakt.
   
• CSS
• De klasse sticker bedekt het hele document. De sticker is fixed gepositioneerd, op 100px van boven. Het plaatje zelf ligt 100px onder de bovenrand van de sticker.
• Tekst en figuren worden gecentreerd op de regel weergegeven.
• Om te kunnen scrollen in het document is de sticker op z-index:100 geplaatst.
• De afmetingen van het plaatje zijn vastgelegd in het blok .sticker img. Het is tevens met een factor 4 vergroot, zodat er wat is om later te laten krimpen. Het middelpunt van het plaatje is 50% naar beneden verschoven zodat in elk geval de eerste alinea van het document leesbaar is.
• De klasse shrunk stelt de schaal in op 1. Dat betekent dat de schaalfactor 4 uit de klasse sticker niet verandert. De opacity staat ingesteld op 1. Het plaatje is dus niet doorzichtig.
• De animatie shrink werkt op transform: scale(1); en opacity: 1;, via keyframes.
• De animatie duurt 1,5 seconden en verloopt lineair. De eindtoestand van de animatie (sticker helemaal weg) wordt bewaard omdat forwards is opgegeven.
• De schaal van het plaatje (staat op 4) wordt vermenigvuldigd met de schaal van de animatie. Die verloopt van 1 naar 0.
• De opacity van de sticker blijft onveranderd tot halverwege de animatie. Daarna neemt die af tot nul
• Nadat de animatie is afgelopen wordt in klasse shrunk de waarde van diplay op none gezet. Daardoor wordt de sticker voor de gebruiker volledig onzichtbaar en wordt navigatie met links onder de sticker niet gehinderd.
   
• JavaScript
• Er worden drie variabelen gedeclareerd:
  º  mItems  Dit is een array die de HTML-elementen met de klasse sticker bevat. Dit heeft te maken met het gebruik van getElementsByClassName(), die een array produceert..
  º  nitems  Dit is het aantal elementen in mItems. In het voorbeeld is dit 1.
  º  i  Dit is een loop-teller.
• Als de pagina is geladen wordt mItems gevuld, via getElementsByClassName(). Daarna wordt de function invokeScroll() aan het scroll-event gekoppeld via addEventListener().
• invokeScroll() voegt de klasse shrunk toe aan de elementen in mItems (die dus de klasse sticker hebben). Dit maakt dat CSS de animatie uitvoert waardoor de sticker verdwijnt.
• invokeScroll() roept ook resetScroll() aan, waardoor het scroll-event van invokeScroll() wordt losgemaakt. Dit gaat met removeEventListener().
• Opmerking: Om een event-handler te kunnen verwijderen met removeEventListener(), moet die handler een externe function zijn. Een event handler verwijderen die met een anonymus function is gemaakt, zoals in addEventListener("event",' function(){ mijn-script }), werkt niet!
   
• Het is mogelijk meerdere stickers in een document te zetten zonder dat het JavaScript hoeft te worden aangepast.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals op deze pagina wordt beschreven.
• Vervang het plaatje door je eigen plaatje. Zet er een aankondiging voor een speciale gebeurtenis op of promoot een product.
• Het script werkt alleen met plaatjes. Teksten zijn niet mogelijk.
   
• Het is mogelijk om meerdere stickers tegelijkertijd te tonen. Dat doe je door meerdere plaatjes in de <div class="sticker"> te zetten, of door meerdere <div class="sticker">-tags in te zetten. In dat laatste geval moet je de plaatsing per <div>-tag apart in cd CSS instellen.
  In beide gevallen geldt: maak de stickers niet te groot, anders wordt het erg rommeleg op het scherm.

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>
.sticker {
  width: 100%;
  height: 100px;
  position:fixed;
  top:100px;
  left:0;
  text-align:center;
  padding-top:100px;
  z-index:100;
  opacity:1;
}
.sticker img {
  height:98px;
  width:107px;
  border:0;
  transform: scale(4);
  transform-origin: 50% 0;
}
.shrunk {
  display:block;
  transform: scale(1);
  opacity: 1;
  animation: shrink 1.5s linear forwards;
}
.shrunk:after {
  display:none;
}
@keyframes shrink {
    0% { transform: scale(1);  opacity:1; }
  50% { transform: scale(.5); opacity:1; }
  100% { transform: scale(0);  opacity:0; }
}
</style>
<script>
var nItems, i;
var mItems = new Array();

window.addEventListener('load', function() {
  mItems = document.getElementsByClassName('sticker');
  nItems = mItems.length;
  window.addEventListener('scroll', invokeScroll);
})
function invokeScroll() {
  for (i=0; i<nItems; i++){
    mItems[i].classList.add('shrunk');
  }
  resetScroll();
}
function resetScroll() {
  // Als er 1 x is gescrolled moet de eventListener weg!
  window.removeEventListener('scroll', invokeScroll );
}
</script>

(Zet dit ergens in de <BODY>, bijvoorbeeld aan het begin).

<div class="sticker">
  <img src="webmas-2.gif" title="Sticker; scroll om te verwijderen"
    alt="Webmaster">
</div>

Downloaden:
 
Druk op de knop:  File: voorb572.zip, 5273 bytes.