Sujet Précédent Sujet Suivant

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

chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 - 21 mars 2024 à 15:28
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 - 22 mars 2024 à 17:07

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

Réponse 1 / 4
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
21 mars 2024 à 15:48

bonjour

commence par nous dire un fichier de quoi ???

pour faire quoi avec quel logiciel ou quel langage de programmation ???
0
Réponse 2 / 4
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
21 mars 2024 à 15:58

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
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
21 mars 2024 à 18:06

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
Réponse 3 / 4
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
22 mars 2024 à 04:12

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
Réponse 4 / 4
chabinot Messages postés 321 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 22 mars 2024 15
22 mars 2024 à 17:07

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

le jeu hacker evolution untold
massik25w -
Danny -

4 réponses
Veuillez patientez quelques minutes avant de réessayer
Marine -
alexis.rmn -

12 réponses
iPhone : je n'ai pas de son lors d'un appel sortant
Shark80080 -
Isabelle -

6 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses
Message : veuillez patienter quelques minutes avant de ressayer
Taty -
_zk.78_ -

25 réponses