AccueilFAQRechercherMembresGroupesS'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.


    Des Paillettes derrière le curseurs

    Partagez
    avatar
    Offrande
    FémininAge : 26Messages : 193

    le 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 sur mon forum : Aperçus ou 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;
    }
    ;
    avatar
    Melle Lena
    FémininAge : 42Messages : 292

    le Jeu 17 Aoû 2017 - 20:22

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

    le 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 !
    avatar
    Offrande
    FémininAge : 26Messages : 193

    le 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 :)
    avatar
    Jay No Shi
    MasculinAge : 21Messages : 611

    le 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



    avatar
    Laora || Peter
    FémininAge : 26Messages : 182

    le Jeu 31 Aoû 2017 - 19:02

    Bonjour et merci pour le partage ^^



    avatar
    Onyx
    FémininAge : 23Messages : 3050

    le 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 !



    avatar
    Necrolythia
    FémininAge : 30Messages : 456

    le Mar 26 Sep 2017 - 9:19

    Merciiiiiiiiiiii je l'adoreeeeeeeeeeeeeeee



    avatar
    Kelalin
    FémininAge : 25Messages : 1710

    le Mar 26 Sep 2017 - 18:07

    Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Ven 24 Nov 2017 - 19:40