Comment créer un curseur avec traînée d'étoiles dans Webflow ?
Apprenez à créer un curseur avec une traînée d'étoiles colorées dans Webflow avec JavaScript.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un curseur avec une traînée d'étoiles colorées dans Webflow.
Exemple
Déplacez votre souris dans la zone
| Paramètre | Valeur par défaut | Description |
|---|---|---|
| COUNT | 12 | Nombre d'étoiles dans la traînée |
| SIZE | 10 | Taille des étoiles en pixels |
| COLORS | Violet, rose, bleu... | Couleurs des étoiles |
Le script
Collez ce script dans le champ Footer code de votre article CMS. Il s'exécute automatiquement sur la page.
(function() {
var COUNT = 12, SIZE = 10;
var COLORS = ['#a78bfa','#f472b6','#60a5fa','#34d399','#fbbf24'];
var stars = [];
for (var i = 0; i < COUNT; i++) {
var s = document.createElement('div');
s.style.cssText = 'position:fixed;pointer-events:none;border-radius:50%;z-index:9999;transition:opacity 0.3s;';
document.body.appendChild(s);
stars.push({ el: s, x: 0, y: 0 });
}
document.addEventListener('mousemove', function(e) {
var s = stars[Math.floor(Math.random() * COUNT)];
var color = COLORS[Math.floor(Math.random() * COLORS.length)];
var size = SIZE * (0.5 + Math.random() * 0.5);
s.el.style.cssText += 'width:'+size+'px;height:'+size+'px;background:'+color+';left:'+e.clientX+'px;top:'+e.clientY+'px;opacity:1;';
setTimeout(function() { s.el.style.opacity = '0'; }, 100);
});
})();Conclusion
Un easter egg discret et impactant. Parfait sur les sites créatifs et les portfolios. Voir aussi : créer un curseur personnalisé dans Webflow.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
