Geanimeerde interactieve cursor
Als je met de muis over de rechthoek hieronder gaat, verdwijnt de muis-aanwijzer en gaat de verfkwast zich als aanwijzer gedragen. Afhankelijk van waar je in de rechthoek zit, verandert de stand van de verfkwast. Als je een muisknop indrukt, lijkt het alsof de kwast een beetje schuin op de achtergrond gaat staan.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken, inclusief het plaatje van de verfkwast.
Inspiratie voor deze bladzijde in ontstaan door een artikel in Webdesigner Magazine 94, (maart 2017) pag. 64 en 65.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur is niet bij het oorspronkelijke artikel genoemd. De code is niet meer beschikbaar op internet. Voor deze site heb
ik de code geschoond en er een paar onvolkomenheden uit gehaald.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in eigen site.
- Op deze pagina is het voorbeeld in een <iframe> gezet. Het voorbeeld kan ook als zelfstandig document worden ingezet.
- Zie het item Window-in-Window: Floating frames voor meer informatie over <iframe>.
- De werking van het script
- Het script bestaat uit HTML, CSS en JavaScript. In het voorbeeld staan ze alle drie in het document, maar de CSS en het JavaScript kunnen natuurlijk ook in aparte, gelinkte files staan.
- Hieronder wordt alleen de code van het voorbeeld in het iframe besproken. De code van het hoofddocument wordt buiten
beschouwing gelaten, maar wordt onderaan de bladzijde wel getoond.
- HTML
- De HTML van het voorbeeld bestaat uit twee <div>-tags, met de klassen canvas resp. cursor.
- Het rechthoekige gebied met de schaduwrand is de klasse canvas. Klasse cursor is de verfkwast. Merk op dat
deze zich buiten canvas kan bevinden. Dat kan verwarring geven.
De verfkwast kan niet buiten het iframe komen.
- CSS
- De CSS begint met een bescheiden reset voor de elementen html en body. Deze laatste is nodig om het effect te laten werken. Het is ook de reden waarom het effect hier in een iframe wordt getoond, maar dat het ook als zelfstandig document kan werken.
- Daarna wordt de klasse canvas ingesteld. Deze heeft de afmetingen van 50% van de afmetingen van het document op het scherm. Doordat body de eigenschap display:flex heeft, is canvas responsive.
- Tenslotte wordt van het plaatje een cursor gemaakt. Deat gebeurt in de klasse .cursor.active (let op: er staat geen spatie in. Het gaat om de klasse active binnen cursor).
- Om te zorgen dat de verfkwast al zichtbaar is voordat deze de klasse active er bij krijgt, wordt cursor:before gebruikt.
- De afmetingen moeten gelijk zijn aan die van het plaatje. Het plaatje zelf is de achtergrond an cursor.
- Door transform-origin:50% 0 komt de oorsprong van de kwast in het midden bovenaan te liggen, in plaats van linksboven.
Als de muisknop wordt ingedrukt (JavaScript function mousedown) wordt rotatie om de X-as van het plaatje actief en
wordt de kwast onder een hoek van 30° op de achtergrond gezet.
- JavaScript
- Dor de opzet van het script is het noodzakelijk dit in de <body>, ná de HTML te plaatsen.
- Het script begint met het instellen van de constanten canvas en cursor. Dit zijn verwijzingen naar de eerder genoemde klassen.
- Zodra de DOM-content geladen is (de hele pagina hoeft nog niet geladen te zijn) wordt aan de body de klasse no-cursur
toegekend. De cursur wordt onzichtbaar. Tegelijkertijd krijgt de cursur de klasse active erbij, daardoor wordt de verfkwast
de eigenlijke cursor. Ook worden listerners in gesteld voor de muis: bewegen, knop ingedrukt en knop los.
Het midden van het canvas wordt berekend en de verfkwast wordt gepositioneerd op de plaats waar de echte, onzichtbare, cursor zich bevindt. - Bij het aanpassen van de plaats van de verfkwast, wordt ook gekeken naar de horizontale afstand tot het midden van het
canvas. Afhankelijk van die afstand wordt de kwast over maximaal 50° verdraaid [let op de relatie tussen de getallen
50 en 150 in de function updateCursorAngle()].
- Dit script is niet gemaakt voor gebruik op een aanraakscherm. Het werkt daarom niet op je tablet of smartphone.
Het werkt ook niet met oudere browsers. Dat komt doordat de JavaScript-keywords let en const niet worden ondersteund.
In voorkomende gevallen kun je proberen om let (5×) en const (4×) te vervangen door var.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code van het <iframe> op in je hoofddocument zoals hier onder is aangegeven.
- Hernoem de file html561a.htm naar voorbeeld.htm of iets dergelijks. Zet die naam in het src-attribuut van de <iframe>-tag. Je hebt nu een werkende pagina.
- Pas de opmaak van het voorbeeld aan.
N.B.: Het is verleidelijk om de div met klasse canvas te verwijderen. Daarvoor moet je echter het JavaScript ook (ingrijpend) wijzigen. Als de de canvas-rechthoek wilt verwijderen zet je de height en width allebei op 100% en verwijder je de box-shadow uit de CSS. - Als je de verfkwast wilt vervangen door wat anders, vervang je cursor.png. Het nieuwe plaatje moet een transparante
achtergrond hebben. Het formaat .png geeft het mooiste resultaat, maar .gif kan ook.
Pas de afmetingen en de marges van de nieuwe cursor aan in .cursor.
- Het voorbeeld kan ook als zelfstandig document worden ingezet, dus zonder een <iframe>.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het <iframe> in het hoofddocument ziet er als volgt uit:
(Zet dit in de <BODY> op de plaats waar het <iframe> moet verschijnen).
<div style="text-align:center">
<iframe width="500" height="300" src="voorbeeld.htm"
style="border:3px outset black;">Helaas kunt u dit deel
van deze webpagina niet bekijken. Deze site gebruikt nl.
Inline Frames (<IFRAME>). Dat wordt door uw browser
niet ondersteund!</iframe>
</div>
De code van het voorbeeld in het <iframe> ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.
. (CSS-code)
.
.</style>
(Zet dit in de <BODY>).
<div class="canvas">Verf mij!</div>
<div class="cursor"></div>
<script>
.
. Javascript om te reageren op de muisbewegingen en -kliks
.
</script>
Downloaden:
Druk op de knop:
File: voorb561.zip, 12 919 bytes.
Opmerking:
Manieren om een standaard cursor te veranderen in bijvoorbeeld een vraagteken vind je in het item
Cursor veranderen.
