Dynamisch achtergrond-effect
Op deze pagina wordt code besproken waarmee je achtergrond reageert op het bewegen van de muis. Om de bedoeling duidelijk te maken beginnen we met een voorbeeld:
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.
De auteur is vermoedelijk Leon Brown, een webdeveloper uit Engeland.
Voor deze website heb ik het voorbeeld verfraaid. De code kun je downloaden om zelf te gebruiken, echter zonder de achtergrondfoto en de andere plaatjes. Daar moet je zelf voor zorgen.
Het effect met de achtergrond werkt alleen als er een muis beschikbaar is. Met alleen een aanraakscherm werken alleen de links.
- Er worden twee items besproken:
- De werking van het script.
- 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.
- HTML
- De HTML van het voorbeeld bestaat uit een <main>-tag met daarbinnen een <article>.
- De <main>-tag bedekt de hele <body> en bevat geen leesbare content, maar alleen de bewegende achtergrond foto. De achtergrond van de <body> zelf wordt hier dus niet voor gebruikt.
- Het <article> bevat alle leesbare content. In het voorbeeld is dat een logo, een unordered list (<ul>)
met daarin een viertal links, en een paragraaf met tekst en een plaatje.
- CSS
- Begonnen wordt met een eenvoudige CSS-reset. Daarbij krijgt ook de
achtergrond een donkerblauwe kleur, voor het geval dat het laden van de achtergrondfoto in de main niet lukt.
Voor deze site worden grote foto's van een ander domein gehaald. Als dat een beetje traag reageert wordt het voorbeeld in elk geval niet lelijk … - De main-tag beslaat de hele body. De achtergrond van de main is het bewegende stuk. Buiten het window uitstekende delen worden afgekapt. Dat betekent dat je meestal een groot window nodig hebt om het hele effect te laten zien.
- De breedte van article is de helft van de breedte van het window. Met margin: 0 auto 0 auto is het in het
midden van het window gepositioneerd.
De hoogte is 90% van de hoogte van het window. Met border-radius zijn de onderste hoeken afgerond. - Het lettertype binnen 'Trebuchet MS' is 'Trebuchet MS', of de default sans-serif als dat niet kan. De achtergrond is doorschijnend (opacity:0.5) wit.
- De tekst met de links is een unordered list (<ul>). De bullets zijn verwijderd met list-style-type:none.
De bovenste regel is opgemaakt met een inline-style. De onderstreping van de links is uitgeschakeld met text-decoration:
none
. - JavaScript
- Het JavaScript bestaat uit een enkele anonymous function die wordt uitgevoerd als de pagina is geladen. Dat gebeurt via addEventListener().
- De naamloze function selecteert de <main>-tag en koppelt daar, via addEventListener(), de beweging
van de muis aan. De x- en y-coördinaten worden bepaald en aan de hand daarvan wordt de positie van de achtergrond van
de <main> aangepast.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Hernoem de filehtml569a.htm naar index.html of iest dergelijks.
- Regel een goede foto voor het achtergrond-effect. De resolutie moet groter zijn dan van het grootste scherm van je bezoekers. In het voorbeeld is een foto van 3000 × 4000 beeldpunten gebruikt. Een dergelijke foto in combinatie met een groot beeldscherm (1920 × 1080 beeldpunten) geeft een mooi effect.
- Zet de URL van de foto in de CSS, in het blok main. Je hebt nu een werkend voorbeeld.
- Pas de HTML en de CSS aan aan je eigen behoefte.
- Je bent niet gebonden aan een main-tag om dit effect te maken. Je kunt het ook aan een ander HTML-blokelement koppelen,
bij voorbeeld aan een paginaheader of een contentbanner.
- Voor een toepassing waarbij het window on full-screen mode staat, kun je ook een foto gebruiken die net even afwijkt van de resolutie van het scherm. Op een scherm van 1920 × 1080 beeldpunten pas je een foto toe van bijvoorbeeld 1960 × 963 beeldpunten. Aan de CSS van het blok main voeg je toe: background-size:cover. Het effect wordt nu heel subtiel.
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>
html,body{
display: block;
.
enzovoort, zie de downloadfile
.
padding-top:60px;
}
</style>
<script>
window.addEventListener("load", function(){
document.querySelector("main").addEventListener("mousemove", function(e){
var x = (e.clientX/this.clientWidth)*100;
var y = (e.clientY/this.clientHeight)*100;
this.style.backgroundPosition = x+"% "+y+"%";
});
});
</script>
(Zet dit in de <BODY>).
<main>
<article>
<div style="text-align:center"><img src="bbhead2.gif" width="481px"
height="44px" border="0" alt="Titel"></div>
<ul>
<li style="color: #d00; margin-bottom:.75em">Maak uw keuze:</li>
<li><a href="https://home.hccnet.nl/s.f.boukes"
target="_blank">Hobbyhoekje</a></li>
<li><a href="https://www.webmasterij.nl/fractals"
target="_blank">Fractals</a></li>
<li><a href="https://www.webmasterij.nl/fotoalbum"
target="_blank">Fotosite</a></li>
<li><a href="https://www.webmasterij.nl"
target="_blank">Webmasterij</a></li>
</ul>
<p>Vier websites uit de koker van<br>
<img src="ben-logo.png" alt="" height="47" width="105"></p>
</article>
</main>
Downloaden:
Druk op de knop:
File: voorb569.zip, 1240 bytes.
