Différences

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

--- contact:accueil [2026/06/26 08:16] – estro
+++ contact:accueil [2026/06/26 08:57] (Version actuelle) – estro
@@ Ligne 3: / Ligne 3: @@
 ====== Contact ======
 </WRAP>
-<WRAP centerline>
 <html>
-<marquee direction="up" scrollamount="2" scrolldelay="50" height="100" style="border: 0px solid #ccc; padding: 10px;">
+<div style="text-align: center; width: 100%;">
-    <div style="margin-bottom: 16px;">
+    <div id="scrollBox" onclick="toggleScroll(this)" style="display: inline-block; max-width: 80%; cursor: pointer;">
-        <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>
+        <div class="marquee-wrapper">
-        <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>
+            <div class="scrolling-content" id="scrollContent">
-        <span style="color: red; font-size: 18px; font-weight: bold;">d</span><span style="color: black; font-size: 18px;">onc nous annulons la séance de ce soir</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>
-</marquee>
-</html>
+    <style>
-</WRAP>
+        .marquee-wrapper {
+            height: 100px;
-<html>
+            overflow: hidden;
-<div style="width: 100%; height: 140px; overflow: hidden; border: 1px solid #ddd; padding: 10px; background-color: #f9f9f9;">
+            border: 0px solid #ccc;
-    <div style="display: flex; flex-direction: column; gap: 5px; animation: fadeIn 0s linear infinite;">
+            padding: 10px;
+            position: relative;
+            background-color: transparent;
+        }
-        <!-- Ligne 1 -->
+        .scrolling-content {
-        <div>
+            position: absolute;
-            <span style="color: red; font-size: 18px; font-weight: bold;">L</span>
+            top: 0;
-            <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>
+            left: 0;
-        </div>
+            width: 100%;
+            animation: scrollUp 15s linear infinite; /* Vitesse ajustable - plus grand = plus lent */
+            will-change: transform;
+        }
-        <!-- Ligne 2 -->
+        @keyframes scrollUp {
-        <div>
+% {
-            <span style="color: red; font-size: 18px; font-weight: bold;">d</span>
+                transform: translateY(0);
-            <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>
+            }
-        </div>
+% {
+                transform: translateY(-50%);
+            }
+        }
-        <!-- Ligne 3 -->
+        /* Pause au clic via classe ajoutée par JS */
-        <div>
+        .paused .scrolling-content {
-            <span style="color: red; font-size: 18px; font-weight: bold;">d</span>
+            animation-play-state: paused;
-            <span style="color: black; font-size: 18px;">onc nous annulons la séance de ce soir</span>
+        }
-        </div>
+    </style>
-    </div>
-    <!-- Zone de défilement manuel -->
+    <script>
-    <div style="margin-top: 5px; text-align: center;">
+    var isScrolling = true;
-        <button onclick="var elem=document.getElementById('scrollBox'); if(elem.scrollTop >= elem.scrollHeight-elem.clientHeight){elem.scrollTop=0;} else {elem.scrollTop+=30;}">
-            ▼ Faire défiler vers le haut
-        </button>
-        <p style="font-size: 12px; color: #666; margin-top: 5px;">(Passez votre souris sur le cadre pour arrêter)</p>
-    </div>
-</div>
-<div id="scrollBox" style="margin-top: 10px; width: 100%; height: 120px; overflow-y: auto; border: 1px dashed #aaa; padding: 10px; background-color: #fff;" onmouseover="this.style.scrollBehavior='smooth'" onmouseout="this.style.scrollBehavior='auto'">
-    <!-- Texte identique répété pour effet -->
+    function toggleScroll(element) {
-    <div style="display: flex; flex-direction: column; gap: 5px; opacity: 1;">
+        // Ajoute ou retire la classe "paused" sur le conteneur
-        <div><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></div>
+        element.classList.toggle('paused');
-        <div><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></div>
+        isScrolling = !isScrolling;
-        <div><span style="color: red; font-size: 18px; font-weight: bold;">d</span><span style="color: black; font-size: 18px;">onc nous annulons la séance de ce soir</span></div>
+    }
-    </div>
+    </script>
-    <div style="display: flex; flex-direction: column; gap: 5px; padding-top: 10px;">
-        <div><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></div>
-        <div><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></div>
-        <div><span style="color: red; font-size: 18px; font-weight: bold;">d</span><span style="color: black; font-size: 18px;">onc nous annulons la séance de ce soir</span></div>
-    </div>
 </div>
 </html>
 [[contact@titux.org]]