Script qui ne s'affiche pas

[doriane74]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 12/11/24
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
J'ai copié un script pour mettre la pluie sur mon forum (privé) mais il ne fonctionne pas ?

Code:

var makeItRain = function() {
  //clear out everything
  $('.rain').empty();

  var increment = 0;
  var drops = "";
  var backDrops = "";

  while (increment < 100) {
    //couple random numbers to use for various randomizations
    //random number between 98 and 1
    var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
    //random number between 5 and 2
    var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
    //increment
    increment += randoFiver;
    //add in a new raindrop with various randomizations to certain CSS properties
    drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
    backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
  }

  $('.rain.front-row').append(drops);
  $('.rain.back-row').append(backDrops);
}

$('.splat-toggle.toggle').on('click', function() {
  $('body').toggleClass('splat-toggle');
  $('.splat-toggle.toggle').toggleClass('active');
  makeItRain();
});

$('.back-row-toggle.toggle').on('click', function() {
  $('body').toggleClass('back-row-toggle');
  $('.back-row-toggle.toggle').toggleClass('active');
  makeItRain();
});

$('.single-toggle.toggle').on('click', function() {
  $('body').toggleClass('single-toggle');
  $('.single-toggle.toggle').toggleClass('active');
  makeItRain();
});

makeItRain();

Je ne vois pas d'où vient le problème.
Si vous pouviez m'apporter votre aide, ce serait sympa.
Merci par avance, bien amicalement.

[MlleAlys]

Bonjour,
Ce code semble demander davantage que ce script, je ne sais pas ou vous l'avez trouvé, mais il doit vous manquer des éléments.

[doriane74]

Bonsoir MlleAlys,
Merci de m'avoir répondu

Je suis allée sur ce site :


CodeWithRandom
https://www.codewithrandom.com ›

Ai pris le N° 5 et cliqué sur JS pour copier le lien dans mon javascript

Voilà donc ce que j'ai fait...

Bonne soirée, bien amicalement

[MlleAlys]

Le code js est effectivement à associer à un html et un css, et ne fonctionne pas seul. Je ne sais pas s'il est possible d'adapter les codes pour qu'ils fonctionnent sur un forum.