Effet défilement heures, minutes, seconde de bas en haut
chabinot
Messages postés
322
Date d'inscription
Statut
Membre
Dernière intervention
-
chabinot Messages postés 322 Date d'inscription Statut Membre Dernière intervention -
chabinot Messages postés 322 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- Effet défilement heures, minutes, seconde de bas en haut
- Barre de défilement - Guide
- Effet miroir word - Guide
- 1 million de seconde en année - Accueil - Technologies
- Toutes les formules de maths seconde pdf - Télécharger - Études & Formations
- Barre en bas ✓ - Forum PC portable
4 réponses
bonjour
commence par nous dire un fichier de quoi ???
pour faire quoi avec quel logiciel ou quel langage de programmation ???
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
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
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
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