Script texte rebondissant

Version imprimable

Bonjour,

Je reviens encore avec un ancien script opérationnel sur l'ancienne version de mon site,
même dans les navigateurs modernes, mais qui ne fonctionne pas dans la nouvelle
version du site.

Voila ce qu'il doit donner :
https://youtu.be/IFTiKH1dGPM

Et voila le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="BOU" style="position:absolute ; z-index:1;">
        <dl>
            <dd>
                <h1 id="tdsTitle">TOUTES DES SALOPES</h1>
            </dd>
        </dl>
    </div>
<script>
var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 0);
var div1 = (isNS) ? document.BOU : document.all.BOU.style;
var objet;var coord;var coordb=800;objet=new Array(div1);coord = new Array();
coord[0]=0;coord[1]=0;coord[2]=0;
function reb() {
    if (navigator.appName=="Microsoft Internet Explorer") {
        tailley = document.body.clientHeight;taillex = document.body.clientWidth;offsety = document.body.scrollTop;offsetx = document.body.scrollLeft;
    }
    else {
        tailley = window.innerHeight;taillex = window.innerWidth;offsety = window.pageYOffset;offsetx = window.pageXOffset;
    }
    var maxi = tailley+offsety-300;coord[0]=taillex+offsetx-850;coord[1]+=coord[2];
    if (coord[1]>maxi) {
        coord[1]=maxi;coord[2]=-coord[2]/1.75;
    }
    objet[0].left=coord[0];objet[0].top=coord[1];coord[2]+=1;
    tempo = setTimeout("reb()", 15);
}
</script>

Ci-joint:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      #BOU{
        position:absolute;
        z-index:1;
      }
    </style>
</head>
<body>
    <div id="BOU">
     <h1 id="tdsTitle">Toutes des princesses</h1>
    </div>
<script>
    const div = document.querySelector('#BOU');
 
    let objet=[div],
        tailley = window.innerHeight,
        taillex = window.innerWidth,
        offsety = window.pageYOffset,
        offsetx = window.pageXOffset,
        maxi = tailley+offsety-300,
        coord=[taillex+offsetx-850,0,0];
 
    objet[0].style.left=coord[0]+'px';
 
 
    function reb() {
        coord[1]+=coord[2];
        if (coord[1]>maxi){
            coord[1]=maxi;
            coord[2]=-coord[2]/1.75;
        }
        objet[0].style.top=coord[1]+'px';
        coord[2]+=1;
    }
 
    const tick = setInterval(reb, 15);
</script>
</body>
</html>

Tu peux le faire plus simplement en CSS...

Ce qui me dérange, c'est qu'il faut stopper l'animation quand coord[2] n'évolue plus...
donc j'ai ajouté une condition supplémentaire...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      #BOU{
        position:absolute;
        z-index:1;
      }
    </style>
</head>
<body>
    <div id="BOU">
     <h1 id="tdsTitle">Toutes des princesses</h1>
    </div>
<script>
    const div = document.querySelector('#BOU');
 
    let objet=[div],
        tailley = window.innerHeight,
        taillex = window.innerWidth,
        offsety = window.pageYOffset,
        offsetx = window.pageXOffset,
        maxi = tailley+offsety-300,
        coord=[taillex+offsetx-850,0,0],
        memcoord2=0;
 
    objet[0].style.left=coord[0]+'px';
 
 
    function reb() {
        coord[1]+=coord[2];
        if (coord[1]>maxi){
            coord[1]=maxi;
            coord[2]=-coord[2]/1.75;
        }
        objet[0].style.top=coord[1]+'px';
        coord[2]+=1;
        console.log(coord[2]);
        if (coord[2].toFixed(3)==memcoord2.toFixed(3) ){console.log('fin');  clearInterval(tick);}
        memcoord2=coord[2];
    }
 
    const tick = setInterval(reb, 15);
</script>
</body>
</html>

25/09/2023, 08h37
Neelix57

Je te remercie Archimède. Ca fait plaisir de voir que l'on peut toujours compter sur la communauté en cas de problème.
25/09/2023, 17h20
NoSmoking

Bonjour,
@Neelix57 :
j'ai quand même l'impression que tu ne fais pas beaucoup d'effort pour t'arranger pour qu'il marche, il me semble que l'on t'a déjà dit ce qu'il fallait supprimer :aie:

Citation:

Envoyé par Archimède

Tu peux le faire plus simplement en CSS...

Tous à fait avec les keyframes, peut-être pas « simplement ».
25/09/2023, 18h05
Archimède

Citation:

Envoyé par NoSmoking

Tous à fait avec les keyframes, peut-être pas « simplement ».

Non au niveau de cubic-bezier et du contenu de @keyframes, il y a du taf...je reconnais. J'ai évité de me lancer là-dedans...

Aller pour le fun, j'y avais déjà tâté

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre en chute libre</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2156395">
<meta name="category" content=" Css">
<meta name="description" content="Animation CSS d'un élément chutant qui rebondit en utilisant les keyframes.">
<style>
.bounce-down {
  --bottom: 68vh;
  display: block;
  width: fit-content;
  margin: auto;
  color: #069;
  animation: bounce-down 2s both;
}
@keyframes bounce-down {
  0% {
    animation-timing-function: ease-in;
    transform: translateY(0);
  }
  25% {
    animation-timing-function: ease-out;
    transform: translateY(var(--bottom));
  }
  37.5% {
    animation-timing-function: ease-in;
    transform: translateY(calc(var(--bottom) *.5));
  }
  50% {
    animation-timing-function: ease-out;
    transform: translateY(var(--bottom));
  }
  60% {
    animation-timing-function: ease-in;
    transform: translateY(calc(var(--bottom) * .75));
  }
  70% {
    animation-timing-function: ease-out;
    transform: translateY(var(--bottom));
  }
  80% {
    animation-timing-function: ease-in;
    transform: translateY(calc(var(--bottom) * .875));
  }
  90% {
    animation-timing-function: ease-out;
    transform: translateY(var(--bottom));
  }
  95% {
    animation-timing-function: ease-in;
    transform: translateY(calc(var(--bottom) * .94));
  }
  100% {
    animation-timing-function: ease-out;
    transform: translateY(var(--bottom));
  }
}
</style>
</head>
<body>
  <h1 class="bounce-down">Titre en chute libre</h1>
</body>
</html>

les données en % pourrait être affinée la physique des mouvements n'étant, pour moi, qu'un lointain souvenir :mrgreen:.

En bonus, j'ai retrouvé ce lien : https://animista.net/play

25/09/2023, 18h57
Archimède

Citation:

Envoyé par NoSmoking

Aller pour le fun, j'y avais déjà tâté

Ah, je me disais que tu l'allais pas en rester là... gagné lol
Si j'ai le temps, j'en ferai une en 1/2 gt² pour simuler une chute libre avec rebond en javascript...
Et merci aussi pour le lien ;)