Ben's Hobbyhoekje -- Foto's verschuiven met mouseover

Foto's verschuiven met mouseover

Het voorblad van een website is bedoeld om de aandacht van de bezoekers te trekken. Een leuke animatie helpt daarbij.

Als voorbeeld gebruiken we iets wat het voorblad van een foto-website zou kunnen zijn.
Er is een stapeltje foto's. Het lijkt er een beetje slordig bij te liggen. Als je er met de muis overheen gaat, schuiven de foto's opzij en zie je wat er onder ligt. Daar kun je op klikken om de foto-website binnen te gaan.
Als je klikt verandert de blauwe koptekst, verder verandert er niets.

Toon het voorbeeld

Op deze pagina wordt uitgelegd hoe je dit maakt. De code kun je downloaden om zelf mee aan de slag te gaan, behalve de foto's.

Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 87 (juni 2016), pag. 46 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het voorbeeld is niet bij het betreffende artikel genoemd.

Voor deze site is een bugje gerepareerd, is de vormgeving van het voorbeeld verfraaid en is het aanklikbare blok toegevoegd.

Er worden twee items besproken:
1. De werking van het script, in algemene termen.
2. Gebruiken in je eigen site.
De werking van het script
De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de HTML-file en in de file schuivende-fotos.js)
HTML
De HTML5-structuur is hier van belang:
- De <body> bestaat uit één <div>-tag, met id="container". Daarnaast is er nog een <footer>-tag voor de voettekst en een klein<script>-je voor het initialiseren van de bewegingen.
- De container bevat een <h1> voor de titel kop en een <p> voor de tekst. Bij het laden van de pagina zitten die onder het stapeltje foto's en zijn dus niet zichtbaar.
- Voorts is er voor elke afbeelding een <div>-tag met class="expander". Binnen deze tags staan de <img>-tags voor de foto's.
  Je kunt net zo veel foto's op deze manier opgeven als je zelf wilt.
- Tenslotte is een <div> met id="over". Deze is leeg en moet leeg blijven. Het wordt gebruikt om de mouseover actie te starten.
- over is precies boven op de container geplaatst. Doordat de z-index groter is dan die van de container met inhoud, kan de mouseover er in worden gebouwd, zonder dat het de overige content hindert.
- Als je de (donkerblauwe) sub-kop niet wilt gebruiken, verwijder dan de regel met <p id="Tekst"> uit de HTML-code.
- De footer is een op zichzelf staand geheel. Je kunt dat zonder bezwaar aanpassen voor de eigen doeleinden of gewoon verwijderen.
JavaScript
Dit is een jQuery-toepassing, dus heb je jQuery nodig. Die betrek je het beste van een CDN. In het oorspronkelijke voorbeeld is jQuery versie 2.2.0 gebruikt. Bij de implementatie op deze site bleek versie 1.7.1 te volstaan. Helaas is deze stap terug nog niet voldoende om het te laten werken met Internet Explorer.
De beweging wordt gestuurd door het JavaScript in de file schuivende-fotos.js. Die file moet je soms veranderen om het te gebruiken.
In de HTML staan vier regels JavaScript, waarmee de begin- en eindstand van het effect wordt ingesteld.
Als je de variabele kliktekst (dat is de onder-kop die verandert na een muisklik) niet wilt gebruiken kun je de betreffende regel weghalen uit het HTML-bestand. Daarbij moet je deze twee regels verwijderen uit schuivende-fotos.js (regel 33 en 34):
}).click(function () { document.getElementById('Tekst').innerHTML = kliktekst;
De betekenis van de andere drie variabelen is:
- phi Beginhoek in graden, gerekend vanaf de horizontaal, waar de eerste foto uit het stapeltje wordt geplaatst.
  In het voorbeeld is phi = 0°. De eerste foto (de molen) ligt (gerekend vanuit het midden van de 'cirkel') op de horizontale lijn naar rechts. De andere foto's liggen op gelijke hoeken verdeeld over de cirkel. De onderlinge hoek is 360° / 6 = 60°.
- r Straal van de foto ten opzichte van het middelpunt van de cirkel, als de foto's nog niet verplaatst zijn. De eenheid is 'px', maar je geeft r op als een getal.
- hover Straal van de foto ten opzichte van het middelpunt van de cirkel, als de foto's verplaatst zijn. De eenheid is 'px', maar je geeft hover op als een getal.
Bij het maken van de JavaScripts, is deze volgorde van belang:
- Als eerste jQuery, in de <head>.
- Daarna in de <body>:
  • – Eerst de HTML.
  • – Direct daarna de JavaScript opdrachten voor phi, r, hover en kliktekst.
  • – Direct daarna de link naar het JavaScript in de file schuivende-fotos.js.
  • – Pas daarna de rest van de HTML.
CSS
De container is 250 px breed en 200 px hoog. Dat is voldoende om de tekst in te zetten. Het is versierd met een groene rand.
De plaats van de container is: top:30% en left:40%. Dit is afhankelijk van de grootte van de foto's, die in het voorbeeld 250 × 187 px zijn. Als je grotere of kleinere afbeeldingen wilt gebruiken, dan kan dat natuurlijk. Je zult dan top en left bij moeten stellen. Het is een kwestie van proberen om de beste waarden te vinden.
Als je geen tekst in de container wilt, dan laat je die gewoon weg. Schoon dan ook de CSS op:
- Verwijder de eigenschappen text-align, border en background-color uit het blok #container.
- Verwijder de blokken #container h1 en #container p in hun geheel.
De afmetingen van de foto's staan in het blok .expander. De foto's moeten allemaal even groot zijn.
De klasse expander heeft een donkergrijze achtergrond (background:#333). Dat is handig bij het testen. Omdat de foto's die helemaal afdekken, heeft dat verder geen nut. Je kunt het verwijderen als het allemaal goed werkt.
Als je de (donkerblauwe) sub-kop niet wilt gebruiken, verwijder dan het hele blok #Tekst uit de CSS.
De footer staat los van de andere zaken. Als je de footer niet gebruikt kun je de CSS-blokken footer, footer a en footer a:hover uit de CSS verwijderen.
Gebruiken in je eigen site
Download de code en pak hem uit. Hernoem de file html522a.htm naar bijvoorbeeld index.html.
Maak de code zoals hier is aangegeven. Let er daarbij op dat de HTML-structuur niet verandert.
Kies de foto's. Die moeten allemaal even groot zijn. Maak voor elke foto een <div class="expander">.
Pas de CSS en het JavaScript aan zoals hierboven is aangegeven.
N.B.: De code hieronder noemt ook een file bbstylex.css. Dat is een bestand van deze website, alleen bedoeld om het voorbeeld er goed uit te laten zien Je kunt daar gewoon je eigen CSS neerzetten. Voor de volledigheid staat deze file ook in de download.
Tenslotte
Dit effect werkt het beste in een groot window. Het moet groot genoeg zijn om de verschoven foto's aan de onderkant van het browserwindow in hun geheel weer te geven. Anders ontstaat er een schokkerige beweging doordat er scrollbalken verschijnen en verdwijnen.

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>).

<link rel="stylesheet" href="bbstylex.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

(Zet dit in de <BODY>).

<div id="container">
<h1>Welkom op mijn foto-site</h1>
<p>Klik om door te gaan...</p>
<div class="expander"><img src="foto-1.jpg"></div>
<div class="expander"><img src="foto-2.jpg"></div>
<div class="expander"><img src="foto-3.jpg"></div>
<div class="expander"><img src="foto-4.jpg"></div>
<div class="expander"><img src="foto-5.jpg"></div>
<div class="expander"><img src="foto-6.jpg"></div>
<div id="over"></div>
</div>

<script>
var phi = 0;
var r = 100;
var hover = 300;
var kliktekst = "U heeft in het groene kader geklikt!";
</script>

<script src="schuivende-fotos.js"></script>
<footer>De foto's zijn afkomstig van
<a href="https://www.webmasterij.nl/fotoalbum">Ben's
Fotoalbum</a>.</footer>

Downloaden:

Druk op de knop: File: voorb522.zip, 2441 bytes.