AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-15%
Le deal à ne pas rater :
(Adhérents Fnac) LEGO® Star Wars™ 75367 Le croiseur d’assaut de ...
552.49 € 649.99 €
Voir le deal

    Des Paillettes derrière le curseurs

    Offrande
    Offrande
    FémininAge : 32Messages : 194

    Sam 12 Aoû 2017 - 0:24



    Bonjour tout le monde,
    Comme cela fait un petit moment que je n'ai pas posté de LS, alors je me lance avec un JS beaucoup demandé sur le net que j'ai trouvé sur internet :heart:

    Pour un aperçus en live je vous propose de regarder : cette petite vidéo

    Vous pouvez changer sur ce JS la couleurs des paillettes ainsi que le nombre de celle-ci seulement.

    Un petit message de remerciement est toujours le bienvenue :heart:


    Le Code :

    Créer un Nouveau JS > Sur toutes les pages

    Code:
    var colour = "#FFFFFF";  // couleur des étoiles
    var sparkles = 300;  // nombre d'étoiles
     
     
    var x = ox = 400;
    var y = oy = 300;
    var swide = 800;
    var shigh = 600;
    var sleft = sdown = 0;
    var tiny = new Array;
    var star = new Array;
    var starv = new Array;
    var starx = new Array;
    var stary = new Array;
    var tinyx = new Array;
    var tinyy = new Array;
    var tinyv = new Array;
    window.onload = function() {
      if (document.getElementById) {
        var i, rats, rlef, rdow;
        for (var i = 0;i < sparkles;i++) {
          var rats = createDiv(3, 3);
          rats.style.visibility = "hidden";
          document.body.appendChild(tiny[i] = rats);
          starv[i] = 0;
          tinyv[i] = 0;
          var rats = createDiv(5, 5);
          rats.style.backgroundColor = "transparent";
          rats.style.visibility = "hidden";
          var rlef = createDiv(1, 5);
          var rdow = createDiv(5, 1);
          rats.appendChild(rlef);
          rats.appendChild(rdow);
          rlef.style.top = "2px";
          rlef.style.left = "0px";
          rdow.style.top = "0px";
          rdow.style.left = "2px";
          document.body.appendChild(star[i] = rats);
        }
        set_width();
        sparkle();
      }
    };
    function sparkle() {
      var c;
      if (x != ox || y != oy) {
        ox = x;
        oy = y;
        for (c = 0;c < sparkles;c++) {
          if (!starv[c]) {
            star[c].style.left = (starx[c] = x) + "px";
            star[c].style.top = (stary[c] = y) + "px";
            star[c].style.clip = "rect(0px, 5px, 5px, 0px)";
            star[c].style.visibility = "visible";
            starv[c] = 50;
            break;
          }
        }
      }
      for (c = 0;c < sparkles;c++) {
        if (starv[c]) {
          update_star(c);
        }
        if (tinyv[c]) {
          update_tiny(c);
        }
      }
      setTimeout("sparkle()", 40);
    }
    function update_star(i) {
      if (--starv[i] == 25) {
        star[i].style.clip = "rect(1px, 4px, 4px, 1px)";
      }
      if (starv[i]) {
        stary[i] += 1 + Math.random() * 3;
        if (stary[i] < shigh + sdown) {
          star[i].style.top = stary[i] + "px";
          starx[i] += (i % 5 - 2) / 5;
          star[i].style.left = starx[i] + "px";
        } else {
          star[i].style.visibility = "hidden";
          starv[i] = 0;
          return;
        }
      } else {
        tinyv[i] = 50;
        tiny[i].style.top = (tinyy[i] = stary[i]) + "px";
        tiny[i].style.left = (tinyx[i] = starx[i]) + "px";
        tiny[i].style.width = "2px";
        tiny[i].style.height = "2px";
        star[i].style.visibility = "hidden";
        tiny[i].style.visibility = "visible";
      }
    }
    function update_tiny(i) {
      if (--tinyv[i] == 25) {
        tiny[i].style.width = "1px";
        tiny[i].style.height = "1px";
      }
      if (tinyv[i]) {
        tinyy[i] += 1 + Math.random() * 3;
        if (tinyy[i] < shigh + sdown) {
          tiny[i].style.top = tinyy[i] + "px";
          tinyx[i] += (i % 5 - 2) / 5;
          tiny[i].style.left = tinyx[i] + "px";
        } else {
          tiny[i].style.visibility = "hidden";
          tinyv[i] = 0;
          return;
        }
      } else {
        tiny[i].style.visibility = "hidden";
      }
    }
    document.onmousemove = mouse;
    function mouse(e) {
      set_scroll();
      y = e ? e.pageY : event.y + sdown;
      x = e ? e.pageX : event.x + sleft;
    }
    function set_scroll() {
      if (typeof self.pageYOffset == "number") {
        sdown = self.pageYOffset;
        sleft = self.pageXOffset;
      } else {
        if (document.body.scrollTop || document.body.scrollLeft) {
          sdown = document.body.scrollTop;
          sleft = document.body.scrollLeft;
        } else {
          if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
            sleft = document.documentElement.scrollLeft;
            sdown = document.documentElement.scrollTop;
          } else {
            sdown = 0;
            sleft = 0;
          }
        }
      }
    }
    window.onresize = set_width;
    function set_width() {
      if (typeof self.innerWidth == "number") {
        swide = self.innerWidth;
        shigh = self.innerHeight;
      } else {
        if (document.documentElement && document.documentElement.clientWidth) {
          swide = document.documentElement.clientWidth;
          shigh = document.documentElement.clientHeight;
        } else {
          if (document.body.clientWidth) {
            swide = document.body.clientWidth;
            shigh = document.body.clientHeight;
          }
        }
      }
    }
    function createDiv(height, width) {
      var div = document.createElement("div");
      div.style.position = "absolute";
      div.style.height = height + "px";
      div.style.width = width + "px";
      div.style.overflow = "hidden";
      div.style.backgroundColor = colour;
      return div;
    }
    ;
    Melle Lena
    Melle Lena
    FémininAge : 49Messages : 308

    Jeu 17 Aoû 2017 - 20:22

    Merci Offrande oh c'est magique! Wink
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 17 Aoû 2017 - 22:02

    Coucou Offrande :)

    Merci du partage ^^

    Est ce que tu pourras rajouter une capture d'écran en plus s'il te plait ? ^^
    Comme ça même si tu enlèves l'effet / change l'adresse de ton forum / etc, les gens pourront quand même voir de quoi il s'agit

    Bonne soirée !

    Offrande
    Offrande
    FémininAge : 32Messages : 194

    Ven 18 Aoû 2017 - 7:45

    Nihil Scar Winspeare a écrit:Coucou Offrande :)

    Merci du partage ^^

    Est ce que tu pourras rajouter une capture d'écran en plus s'il te plait ? ^^
    Comme ça même si tu enlèves l'effet / change l'adresse de ton forum / etc, les gens pourront quand même voir de quoi il s'agit

    Bonne soirée !

    Bonjour,
    Malheureusement je ne peut pas mettre de capture d'écran car le curseur ne s'affiche pas sur celle-ci :/ :ange:
    et de rien <3 sa me fait plaisir d'aider pour une fois :)
    Jay No Shi
    Jay No Shi
    MasculinAge : 27Messages : 631

    Mer 23 Aoû 2017 - 15:45

    Hello.

    Merci pour le tuto ^^

    Au cas où ça t'intéresse, Gyazo propose de faire des captures "gif" si tu veux en ajouter une qui montre l'effet : https://i.gyazo.com/b6b3e75c906492551f8909b9f534dc5c.mp4



    jquery - Des Paillettes derrière le curseurs 303026HeiYin
    Laora || Peter
    Laora || Peter
    FémininAge : 32Messages : 182

    Jeu 31 Aoû 2017 - 19:02

    Bonjour et merci pour le partage ^^



    jquery - Des Paillettes derrière le curseurs 1393066044-signaturenu2
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 19 Sep 2017 - 17:31

    Salut !

    Tout est bon grâce au lien de Jay No Shi, donc je mets le code en LS.

    Merci beaucoup du partage !



    Necrolythia
    Necrolythia
    FémininAge : 36Messages : 580

    Mar 26 Sep 2017 - 9:19

    Merciiiiiiiiiiii je l'adoreeeeeeeeeeeeeeee



    jquery - Des Paillettes derrière le curseurs KKEVK8u
    Anonymous
    Invité

    Mar 26 Sep 2017 - 18:07

    Merci pour le partage !
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Lun 22 Jan 2018 - 18:09

    Merci beaucoup du partage !
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 31Messages : 64

    Dim 22 Avr 2018 - 4:00

    c'est super sa rajoute un peu de magie a l'atmosphère d'un forum Very Happy




    jquery - Des Paillettes derrière le curseurs 478753Chantal
    Féli
    Féli
    FémininAge : 41Messages : 117

    Mar 8 Mai 2018 - 11:29

    merci,

    je dois avoir un gros soucis avec un code sur mon forum car ça ne fonctionne pas alors que j'ai suivi le tuto très bien expliqué (j'ai ce gros soucis depuis bien un mois que j'arrive pas à résoudre)



    jquery - Des Paillettes derrière le curseurs MtGPjQFSeHqzl1zoiU-5zwGCNig
    Anonymous
    Invité

    Jeu 19 Sep 2019 - 6:55

    Bonjour sa ne fonctionne pas sur mon forum rien ne s'affiche pourtant regarder 
    jquery - Des Paillettes derrière le curseurs Nild
    Anonymous
    Invité

    Jeu 28 Nov 2019 - 14:33

    Quand je met sur l'index sa fonctionne
    Scratpub
    Scratpub
    FémininAge : 39Messages : 145

    Sam 23 Mai 2020 - 22:42

    Merci beaucoup !!
    CyndieEverdeen
    CyndieEverdeen
    FémininAge : 34Messages : 5

    Sam 2 Jan 2021 - 18:50

    Merci beaucoup :heart:
    Pixelle_
    Pixelle_
    FémininAge : 32Messages : 10

    Sam 26 Mar 2022 - 18:07

    Merci beaucoup ! Je viens d'ajouter ça à notre forum, j'aime beaucoup ! cheers :aww:



    NeoptolemusArth
    NeoptolemusArth
    MasculinAge : 23Messages : 14

    Mar 2 Aoû 2022 - 2:31

    Hey je voulais savoir s'il était possible de changer la forme des paillettes pour autre chose (exemple: des images de petites chauves souris)?

    En tout cas tout fonctionne (seulement quand je met sur les pages différentes à la mano mais c'est un détail mdr, les voix de Forumactif sont impénétrables après tout)

    Merci pour ce très joli code!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 21:48