Script texte rebondissant

**Neelix57** · 24/09/2023, 08h23

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 :

Et voila le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Archimède** · 24/09/2023, 14h21

Ci-joint:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Archimède** · 24/09/2023, 22h44

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Neelix57** · 25/09/2023, 08h37

Je te remercie Archimède. Ca fait plaisir de voir que l'on peut toujours compter sur la communauté en cas de problème.

**NoSmoking** · 25/09/2023, 17h20

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

Envoyé par Archimède

Tu peux le faire plus simplement en CSS...

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

**Archimède** · 25/09/2023, 18h05

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

**NoSmoking** · 25/09/2023, 18h22

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

.

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

**Archimède** · 25/09/2023, 18h57

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

Script texte rebondissant

JavaScript

Vue hybride

Discussions similaires

Partager

Partager