Effet défilement heures, minutes, seconde de bas en haut

chabinot Messages postés 391 Statut Membre -  
chabinot Messages postés 391 Statut Membre -

Bonjour,
J'ai un fichier de 64 Mo, apparemment trop petit pour
être inséré.
Comment puis-je faire ? Car sans cela, je ne peux pas expliquer
ce que je cherche.

Cordialement

4 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     

    bonjour

    commence par nous dire un fichier de quoi ???

    pour faire quoi avec quel logiciel ou quel langage de programmation ???

    0
  2. chabinot Messages postés 391 Statut Membre 16
     

    Bonjour,

    Il s'agit d'un compte à rebours en html, css, javascript.

    Je cherche comment coder un effet de défilement de bas en haut.

    C'est-à-dire que chaque seconde disparaisse avec un effet de fondu et fasse apparaître le seconde suivante et ainsi de suite. La vidéo montre l'effet que je 
    désirerais.

    Cordialement

    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       

      Sujet déplacé dans le bon forum.

      Bien entendu, il faudrait que tu nous fournisses le code dont tu disposes actuellement et que tu nous expliques ce que tu as déjà essayé et sur quoi tu bloques exactement....

      A noter que tu peux déjà regarder si tu ne trouverais pas ton bonheur ici :

      https://www.google.com/search?q=css+transition+verticale+avec+fondu

      0
  3. chabinot Messages postés 391 Statut Membre 16
     

    Voici le code:

    1 - html
     

    <!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Compte à rebours</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/scripts.js" defer></script>
</head>

<body>
  <main>
    <h1><a href="/">Compte à rebours</a></h1>
    <p><span id="jours">35</span><span id="heures">19</span><span id="minutes">12</span><span id="secondes">15</span>
    </p>
  </main>
</body>

</html>

    2 - css
     

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  display: none;
}
html,
body {
  width: 100%;
}
body {
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
  background-color: #f5f5f5;
}
main {
  margin: 200px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  h1 {
    font-size: 2.5rem;
    font-weight: 700;
    font-style: italic;
    color: #333;
    margin-bottom: 20px;
    a {
      color: inherit;
      text-decoration: none;
      &:hover {
        opacity: 0.6;
      }
    }
  }
  p {
    margin: 20px 0;
    padding: 10px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    background: #fff;
  }
}

    3 - javascript
     

    // Date du jour
const toDay = new Date()

// Date de fin
const endDate = new Date("2024-03-23T00:00:00")

// Durée 1 jour, 1 heure, 1 minute, 1 seconde
const oneDay = 24 * 60 * 60 * 1000
const oneHour = 60 * 60 * 1000
const oneMinute = 60 * 1000
const oneSecond = 1000

// Jours, heures, minutes et secondes
let jours = document.getElementById("jours")
let heures = document.getElementById("heures")
let minutes = document.getElementById("minutes")
let secondes = document.getElementById("secondes")

// Calcul du temps restant
const timeLeft = endDate.getTime() - toDay.getTime()

// Calcul du nombre de jours, heures, minutes et secondes
jours = Math.floor(timeLeft / oneDay)
heures = Math.floor((timeLeft % oneDay) / oneHour)
minutes = Math.floor((timeLeft % oneHour) / oneMinute)
secondes = Math.floor((timeLeft % oneMinute) / oneSecond)

window.onload = () => {
  updateTime()
  interval = setInterval(decompte, 1000)
}

/**
 * Met à jour l'affichage du temps restant
 */
function updateTime() {
  document.getElementById("jours").textContent = jours <= 0 ? "" : `${jours}j `
  document.getElementById("heures").textContent = heures < 10 ? "0" + `${heures}h` : `${heures}h `
  document.getElementById("minutes").textContent = minutes < 10 ? "0" + `${minutes}m` : `${minutes}m `
  document.getElementById("secondes").textContent = secondes < 10 ? "0" + `${secondes}` : `${secondes}`
}

/**
 * Met à jour le temps restant (décompte d'une seconde)
 */
function decompte() {
  if (secondes) {
    secondes--
  } else if (minutes) {
    secondes = 59
    minutes--
  } else if (heures) {
      secondes = 59
      minutes = 59
      heures--
    } else if (jours) {
        secondes = 59
        minutes = 59
        heures = 23
        jours--
      } else {
          clearInterval(interval)
          jours = ""
          heures = ""
          minutes = ""
          secondes = ""
        }
  updateTime()
}

    L'effet que je recherche est un défilement de bas en haut (effet fondu)

    Cordialement

    0
  4. chabinot Messages postés 391 Statut Membre 16
     

    J'ai trouvé. Extraits de code

    1 - html
     

    <!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Compte à rebours</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/countdown.js" defer></script>
</head>
<body>
  <h1><a href="/">Compte à rebours</a></h1>
  <div id="countdown" style="display: flex; justify-content: center; gap: 10px; font-size: 48px;">
    <div class="time-unit" id="hour-tens"></div>
    <div class="time-unit" id="hour-ones"></div>
    <div>:</div>
    <div class="time-unit" id="minute-tens"></div>
    <div class="time-unit" id="minute-ones"></div>
    <div>:</div>
    <div class="time-unit" id="second-tens"></div>
    <div class="time-unit" id="second-ones"></div>
  </div>  
  
</body>
</html>

    2 - css

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
}
header h1 {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}
#countdown {
  margin: 150px 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

.time-unit {
  position: relative;
  width: 30px;
  height: 60px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.digit {
  position: absolute;
  width: 100%;
}

.enter {
  animation: enter 0.5s ease forwards;
}

.exit {
  animation: exit 0.5s ease forwards;
}

@keyframes enter {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes exit {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

    3 - javascript

    function updateDigit(containerId, newDigit) {
  const container = document.getElementById(containerId);
  const existingDigits = container.querySelectorAll('.digit');

  // Si le nouveau chiffre est le même que le dernier, éviter l'animation
  if (existingDigits.length && existingDigits[existingDigits.length - 1].textContent === newDigit) {
    return;
  }

  const newDigitElement = document.createElement('div');
  newDigitElement.classList.add('digit', 'enter');
  newDigitElement.textContent = newDigit;
  container.appendChild(newDigitElement);

  existingDigits.forEach(digit => {
    digit.classList.replace('enter', 'exit');
    digit.addEventListener('animationend', () => digit.remove());
  });
}

function updateCountdown(endTime) {
  const now = new Date();
  const end = new Date(endTime);
  let timeDifference = end - now;

  if (timeDifference < 0) {
    console.log('Countdown finished!');
    clearInterval(countdownInterval); // Arrêter le compte à rebours
    return;
  }

  // Calculer heures, minutes, secondes
  const hours = Math.floor(timeDifference / (1000 * 60 * 60));
  const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

  // Mise à jour des chiffres pour les heures, minutes, secondes
  updateDigit('hour-tens', String(Math.floor(hours / 10)));
  updateDigit('hour-ones', String(hours % 10));
  updateDigit('minute-tens', String(Math.floor(minutes / 10)));
  updateDigit('minute-ones', String(minutes % 10));
  updateDigit('second-tens', String(Math.floor(seconds / 10)));
  updateDigit('second-ones', String(seconds % 10));
}

// Définir la date de fin ici
const endTime = "2024-03-22T23:59:59"; // Exemple de date/heure de fin

// Démarrer le compte à rebours
updateCountdown(endTime);
const countdownInterval = setInterval(() => updateCountdown(endTime), 1000);

    Cordialement

    0

Discussions similaires

Transformer des secondes en heures
Dédé86 -
Rubi -

18 réponses
S avec un trait en haut et en bas
Jessy0787 -
Pierr10 -

3 réponses
tiret du bas
na -
Kahlan2016 -

14 réponses
Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
Excel : les flèches déplacent le document
Hypergonar -
Hypergonar -

2 réponses