Ours Agile

☁️ ☁️ ☁️☁️

🚂 🚋🚃🚋🚃🚃🚋🚃🚋🚋

Un jour, j’ai eu l’idée subite d’un élément dynamique pour mon site web : un petit train. Ayant à cœur de le faire léger, l’ASCII est arrivé très vite. En plus, c’est tellement cool visuellement. Le train et la gare ne sont pas des images mais bien des lettres collées les unes à côté des autres. Deux paragraphes graphiques en quelques sortes, l’un fixe et l’autre mouvant.

On peut réellement les sélectionner et les copier 😀 si si ! Le fichier HTML donne une meilleure idée de la taille des éléments : pour que le train et la gare aient une bonne résolution, ils sont d’apparence démentielle dans le code ! Néanmoins ils restent plus légers que s’ils étaient sous forme d’image. 👌

Le tout est animé en vanilla JS avec une boucle d’update 🙂

  function loop(timestamp) {
    var progress = timestamp - lastRender;
  
    update(progress);
    draw();
  
    lastRender = timestamp;
    window.requestAnimationFrame(loop);
  }

  var lastRender = 0;
  window.requestAnimationFrame(loop);

J’ai du un peu me bagarrer pour que ce soit responsive : quand on diminue ou augmente la taille de l’écran, il faut que la locomotive continue de faire demi tour aux bords de l’écran et qu’elle s’arrête toujours devant la gare. Cela exige de recalculer un certain nombre de choses à chaque update 🤷‍♀️

function update() {
    let windowWidth = window.innerWidth*8;
    let middleScreen = windowWidth/2;

    let trainWidth = document.getElementById("train").offsetWidth;
    let trainMedian = trainLeftPos-(trainWidth/2);

    let stationWidth = document.getElementById("station").offsetWidth/8;
    let leftStationBound = middleScreen-(stationWidth*2);
    let rightStationBound = middleScreen+(stationWidth*2);

La locomotive possède aussi sa petite machine à états ❤️

Le locomotive et tout ses wagons sont disponibles sur Github si vous êtes curieux ^^

J’espère pouvoir l’intégrer à ce site un jour, dans le footer ^^ et lui ajouter des petits nuages de fumées en ASCII qui remonterait vers le haut du site. Ce serait encore plus magique ! ^^