Un usuario preguntó 👇
NOTA: Soy muy nuevo en esto y es el tercer o cuarto día que intento descifrar algún código para mi sitio web.
Encontré un CSS Marquee que tengo poca idea de cómo implementar en mi barra superior. Aqui esta el link: https://www.html.am/html-codes/marquees/css-marquee.cfm
Tengo entendido que esto debería ir en style.css, pero no sé cómo completar todos los detalles y hacer que funcione en mi barra superior. Tampoco se donde el [mobileonly] [/mobileonly] Debe ser visible solo para los usuarios de dispositivos móviles. Esto es lo que he hecho hasta ahora usando el código fuente del enlace:
<style style="text/css">
.marquee {
overflow: hidden;
position: relative;
background-color: #cfb53b;
color: #ffffff;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 1.5;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 5s linear infinite;
-webkit-animation: scroll-left 5s linear infinite;
animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
</style>
<div class="marquee">
<p>FREE SHIPPING ON DOMESTIC ORDERS OVER 40$ AND INTERNATIONAL ORDERS OVER $60</p>
</div>Por favor, ayúdame. Si hay una manera mejor y más simple de hacer esto, solo espero una frase en bucle infinito de derecha a izquierda en la barra superior para usuarios móviles. Hola a todos por ser tan buenos con este trabajo técnico !!!
Autor del tema
(@ borde22)
Hace 1 año, 2 meses
Hola,
Me gustaría intentar ésto:
1. Cree un nuevo widget HTML y agregue su HTML:
<div class="marquee">
<p>FREE SHIPPING ON DOMESTIC ORDERS OVER 40$ AND INTERNATIONAL ORDERS OVER $60</p>
</div>2. Agregue su CSS usando uno de los siguientes métodos: https://docs.generatepress.com/article/adding-css/
El no debería ser <style> elementos: solo se requiere la SEC.
Espero que esto ayude 🙂
(@ nar329)
Hace 1 año, 1 mes
¡Gracias! Eso es lo que intenté usar, pero por alguna razón fue trivial cuando miré el sitio en mi teléfono. En el teléfono de otra persona estaba listo. ¡Volveré a él después de probar algunas cosas más!
Las vacaciones más felices !!! 🙂
Autor del tema
(@ borde22)
Hace 1 año, 1 mes
¡Felices vacaciones! 🙂
¿Solucionó tu problema??
0 / 0