IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Script texte rebondissant


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2013
    Messages
    226
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2013
    Messages : 226
    Par défaut Script texte rebondissant
    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>

  2. #2
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    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...

  3. #3
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    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>

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2013
    Messages
    226
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2013
    Messages : 226
    Par défaut
    Je te remercie Archimède. Ca fait plaisir de voir que l'on peut toujours compter sur la communauté en cas de problème.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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


    Citation Envoyé par Archimède
    Tu peux le faire plus simplement en CSS...
    Tous à fait avec les keyframes, peut-être pas « simplement ».

  6. #6
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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...

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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

  8. #8
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Script Texte lettre par lettre
    Par Bero962 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 13/04/2013, 18h20
  2. [Cherche] Script texte, image defilante
    Par legillou dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 18/07/2006, 14h28
  3. [Librairies] Ch script PHP pour reconnaissance de texte (OCR)
    Par yvan02 dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 14/05/2006, 16h50
  4. Réponses: 4
    Dernier message: 28/12/2005, 13h39
  5. Imprimer un fichier texte avec un script vbs
    Par Persons dans le forum Windows
    Réponses: 3
    Dernier message: 23/12/2004, 16h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo