Différences

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

--- contact:accueil [2026/06/26 07:46] – estro
+++ contact:accueil [2026/06/26 08:57] (Version actuelle) – estro
@@ Ligne 3: / Ligne 3: @@
 ====== Contact ======
 </WRAP>
-La situation de la météo a évoluée mais n'est toujours pas suffisamment bonne,
-de plus la pratique du sport et des déplacements sont déconseillés par la préfecture
- donc nous annulons la séance de ce soir
 <html>
-<div class="text-scroll-multiline">
+<div style="text-align: center; width: 100%;">
+    <div id="scrollBox" onclick="toggleScroll(this)" style="display: inline-block; max-width: 80%; cursor: pointer;">
-    <!-- Ligne 1 -->
+        <div class="marquee-wrapper">
-    <div class="scrolling-row">
+            <div class="scrolling-content" id="scrollContent">
-        <span class="content"><span style="color:red;">L</span><span style="color:black;">a situation de la météo a évoluée mais n'est toujours pas suffisamment bonne,</span></span>
+                <div style="margin-bottom: 16px;">
+                    <span style="color: red; font-size: 18px; font-weight: bold;">L</span><span style="color: black; font-size: 18px;">a situation de la météo a évoluée mais n'est toujours pas suffisamment bonne,</span><br><br>
+                    <span style="color: red; font-size: 18px; font-weight: bold;">d</span><span style="color: black; font-size: 18px;">e plus la pratique du sport et des déplacements sont déconseillés par la préfecture</span><br><br>
+                    <span style="color: black; font-size: 18px;">donc</span><span style="color: red; font-size: 18px; font-weight: bold;"> nous annulons la séance de ce soir</span>
+                </div>
+                <!-- Duplication pour boucle fluide -->
+                <div style="margin-bottom: 16px;">
+                    <span style="color: red; font-size: 18px; font-weight: bold;">L</span><span style="color: black; font-size: 18px;">a situation de la météo a évoluée mais n'est toujours pas suffisamment bonne,</span><br><br>
+                    <span style="color: red; font-size: 18px; font-weight: bold;">d</span><span style="color: black; font-size: 18px;">e plus la pratique du sport et des déplacements sont déconseillés par la préfecture</span><br><br>
+                    <span style="color: black; font-size: 18px;">donc</span><span style="color: red; font-size: 18px; font-weight: bold;"> nous annulons la séance de ce soir</span>
+                </div>
+            </div>
+        </div>
     </div>
-    <!-- Ligne 2 -->
+    <style>
-    <div class="scrolling-row">
+        .marquee-wrapper {
-        <span class="content"><span style="color:red;">d</span><span style="color:black;">e plus la pratique du sport et des déplacements sont déconseillés par la préfecture</span></span>
+            height: 100px;
-    </div>
+            overflow: hidden;
+            border: 0px solid #ccc;
+            padding: 10px;
+            position: relative;
+            background-color: transparent;
+        }
+        .scrolling-content {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            animation: scrollUp 15s linear infinite; /* Vitesse ajustable - plus grand = plus lent */
+            will-change: transform;
+        }
+        @keyframes scrollUp {
+% {
+                transform: translateY(0);
+            }
+% {
+                transform: translateY(-50%);
+            }
+        }
+        /* Pause au clic via classe ajoutée par JS */
+        .paused .scrolling-content {
+            animation-play-state: paused;
+        }
+    </style>
-    <!-- Ligne 3 -->
+    <script>
-    <div class="scrolling-row">
+    var isScrolling = true;
-        <span class="content"><span style="color:red;">d</span><span style="color:black;">onc nous annulons la séance de ce soir</span></span>
-    </div>
+    function toggleScroll(element) {
+        // Ajoute ou retire la classe "paused" sur le conteneur
+        element.classList.toggle('paused');
+        isScrolling = !isScrolling;
+    }
+    </script>
 </div>
-<style>
-/* Conteneur principal */
-.text-scroll-multiline {
-    width: 100%;
-}
-/* Chaque ligne de défilement */
-.scrolling-row {
-    overflow: hidden;
-    white-space: nowrap;
-    margin-bottom: 15px;   /* Espace entre les lignes */
-    position: relative;
-}
-/* Élément qui défille pour chaque ligne */
-.scrolling-row .content {
-    display: inline-block;
-    padding-left: 100%;
-    animation: scrollLeft 20s linear infinite; /* Vitesse ajustable */
-}
-/* Première lettre (rouge) */
-.scrolling-row span:first-child {
-    color: red;
-    font-weight: bold;
-    font-size: 20px;       /* TAILLE DU TEXTE (ajustez ici) */
-    display: inline;
-    vertical-align: baseline;
-    line-height: 1;
-}
-/* Reste du texte (noir) */
-.scrolling-row span:last-child {
-    color: black;
-    font-size: 20px;       /* MÊME TAILLE */
-    display: inline;
-    vertical-align: baseline;
-    line-height: 1;
-}
-/* Animation de défilement */
-@keyframes scrollLeft {
-% { transform: translateX(0); }
-% { transform: translateX(-100%); }
-}
-/* Pause au survol (optionnel - très utile pour relire) */
-.scrolling-row:hover .content {
-    animation-play-state: paused;
-}
-</style>
 </html>
 [[contact@titux.org]]