Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
developpement:javascript:doc [2019/03/05 22:23]
open1024jc [Faire Scroller la page]
developpement:javascript:doc [2019/03/05 22:52] (Version actuelle)
open1024jc [Faire Scroller la page]
Ligne 851: Ligne 851:
 {{:​developpement:​javascript:​exoscroll.png|}} {{:​developpement:​javascript:​exoscroll.png|}}
 <note important>​Le tableau commence en indice zéro</​note>​ <note important>​Le tableau commence en indice zéro</​note>​
 +
 +===== Faire déplacer un texte =====
 +<file html>
 +<​!DOCTYPE html>
 +<html lang="​fr">​
 +<​head>​
 +    <meta charset="​UTF-8">​
 +    <​title>​Tuto</​title>​
 +    ​
 +    <​style>​
 +        * {margin:0;}
 +
 +        body {
 +            display: flex;
 +            justify-content:​ center;
 +            min-height: 100vh;
 +            align-items:​ center;
 +        }
 +
 +        div {
 +            width: 500px;
 +            height: 500px;
 +            border: 10px solid #FB1;
 +        }
 +
 +        h1 {
 +            width: 200px;
 +            height: 40px;
 +            border: 5px solid #BADA55;
 +            color: #C55;
 +            margin: 0;
 +            text-align: center;
 +        }
 +    </​style>​
 +</​head>​
 +<​body>​
 +    ​
 +    <​div><​h1>​Mon texte</​h1></​div>​
 +    ​
 +    <script type="​text/​javascript"​ src="​main.js"></​script>​
 +</​body>​
 +</​html>​
 +</​file>​
 +
 +<file JavaScript>​
 +const titre = document.querySelector("​h1"​);​
 +const cadre = document.querySelector("​div"​);​
 +const maxHeight = cadre.clientHeight;​
 +const maxWidth = cadre.clientWidth;​
 +
 +titre.style.position = "​relative";​
 +let topPos = 0;
 +let leftPos = 0;
 +let forceH = -2;
 +let forceW = -2;
 +
 +function animation() {
 +    // gestion repond en hauteur
 +    if (topPos == 0) {
 +        forceH *= -1
 +    }
 +    else if (topPos == maxHeight - titre.offsetHeight ) {
 +        forceH *= -1
 +    }
 +    // gestion repond en largeur
 +    if (leftPos == 0) {
 +        forceW *= -1
 +    }
 +    else if (leftPos == maxWidth - titre.offsetWidth ) {
 +        forceW *= -1
 +    }
 +    // Déplacement
 +    topPos += forceH;
 +    leftPos += forceW;
 +    titre.style.top = topPos + "​px";​
 +    titre.style.left = leftPos + "​px";​
 +    // Appelle de l'​animation récursivement
 +    requestAnimationFrame(animation);​
 +}
 +// Appelle de l'​animation
 +requestAnimationFrame(animation);​
 +</​file>​
 +{{:​developpement:​javascript:​exorebond.png|}}
 +
 +