Exploderende muisklik met jQuery
Als je op een willekeurige plek in dit document klikt, ontstaat er een soort explosie. Op deze bladzijde leg ik uit hoe je dit kunt aanpakken.
- Besproken worden:
- De oorsprong van het script.
- De werking van het script, in globale termen.
- Inbouwen in je eigen site.
- De oorsprong van het script
- Dit explosie-script is een jQuery-plug-in. Het is in eerste opzet ontwikkeld door de Italiaan Emanuele Feronato, een web-ontwikkelaar en schrijver van boeken over HTML5.
- Het oorspronkelijke script bevat een onvolkomenheid: Als de pagina wordt gescrolled loopt de explosie weg van de muis. Dat heb ik gerepareerd.
- Verder heb ik het een beetje gefatsoeneerd zodat het past binnen wat gebruikelijk is bij het programmeren met jQuery. Ook heb ik wat instellingen aangepast, zodat het wat meer op een explosie lijkt.
- De verbeterde versie kun je downloaden voor je eigen gebruik.
- Het oorspronkelijke
script kun je downloaden van de site van de ontwikkelaar.
- De werking van het script
- Dit script is een jQuery-plug-in. Behalve het script heb je dus ook jQuery nodig, minimaal versie 1.7.1. Dit kun je het beste van een CDN halen. Hier is Google Apis ingezet.
- Het script zelf bestaat uit een JavaScript-bestand met de naam jquery.explosion.js. Die hoef je niet aan te passen. Plaatjes en HTML komen er niet aan te pas.
- Het script maakt een aantal <div>'s aan, met de class .particle. Die verbeelden de 'vonken' van de explosie.
- In dit voorbeeld zijn er 100 <div>'s, die elk 8px × 8px groot zijn. De kleur is rood.
- De kleur en de afmetingen van de particles kun je wijzigen door de CSS van .particle aan te passen.
- Als er met de muis wordt geklikt, worden de coördinaten van de muis-pointer in het document vastgelegd. Daarna worden de particles zichtbaar gemaakt rond de plaats waar de muis zich bevindt.
- Vervolgens verplaatsen de particles zich van de muis-pointer af, waarbij de snelheid afneemt en de particles steeds doorzichtiger
worden.
- Inbouwen in je eigen site
- Je begint met het opnemen van de CSS in de <head> van je pagina.
- Dit script is een jQuery-plug-in. Je moet dus eerst jQuery laden, daarna het script voor de explosie.
- Helemaal onderaan je webdocument, net voor de </body>-tag, vang je de muisklikken af, in de
$(document).ready(function(). - Deze plug-in werkt alleen met de hele <body> van het webdocument. Je kunt het niet beperken tot bijv. alleen de hyperlinks.
- Als je de regel particleClass:"particle" verandert, moet de naam van de CSS-class .particle mee veranderen.
- Je kunt nog wat aanpassen aan de explosie. Dat doe door het meegeven van een
JSON-object:
- Als je het aantal vonken wilt veranderen (staat per default op 100) in bijvoorbeeld 150, voeg je aan de regel
particleClass:"particle" toe:
particles: 150. De beide delen scheid je door een komma. - Als je de omvang van de explosie wilt veranderen (de straal staat per default op 200px) in bijvoorbeeld 350px,
voeg je aan de regel particleClass:"particle" toe:
radius: 350(zonder px). Ook hier moet je de beide delen scheiden je door een komma. - Allebei veranderen kan natuurlijk ook.
- Als je het aantal vonken wilt veranderen (staat per default op 100) in bijvoorbeeld 150, voeg je aan de regel
particleClass:"particle" toe:
- Tenslotte
- Dit effect komt het mooiste uit tegen een donkere achtergrond.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.particle { width:8px; height:8px; background-color:red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="jquery.explosion.js"></script>
(Zet dit aan het einde van de <BODY>, dus net voor de </body>-tag).
<script>
$(document).ready(function() {
$(document).click(function(e) {
var xClick = e.clientX;
var yClick = e.clientY;
$("body").explosion({
origin:{
x:xClick,
y:yClick
},
particleClass:"particle"
});
});
});
</script>
Downloaden:
Druk op de knop:
File: voorb142.zip, 1267 bytes.
Opmerking:
Dit effect lijkt veel op vuurwerk. Het is daarom ook geschikt om te gebruiken rond de jaarwisseling.
Een vergelijkbaar idee vind je in het item Exploderende hyperlinks.
