javascript - texto - keyframes css3 ejemplos

Cómo detener WOW JS+CSS animar en dispositivos más pequeños?

Question

1) He buscado en toda la web y me preguntaba si alguno de ustedes se encuentra con este problema en el que querían detener la animación WOW JS para ciertos dispositivos o para pantallas de menor tamaño.

2) También es bastante molesto ver css la animación de vez en cuando cuando se navega por el sitio web (en lo que respecta al ux, sería ideal verlo una vez), así que estaba pensando en usar cookies para este propósito, pero no sabía cómo para abordarlo, porque para cuando el archivo JS está cargado en la parte inferior de la página, la animación se ha realizado ...?!

Tenga en cuenta que también uso los atributos de datos para retrasos y duraciones, ¡así que no solo elimino la clase WOW!

Cualquier idea sería realmente apreciada :) Muchas gracias

Answer 1

una solución de CSS pura sería (¡incluso si! importante es bastante feo ...):

@media screen and (max-width: 800px) {
.wow{
animation-name: none !important;
visibility: visible !important;
}
}

Los estilos en línea agregados por wow seguirán allí pero sobreescritos por estas 2 líneas, ya no se aplicarán.

Answer 2

Cambiar la configuración predeterminada

wow = new WOW(
{
boxClass: ''wow'', // default
animateClass: ''animated'', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();

a

mobile:false

Answer 3

Espero que esto ayude a otros también;

$(''.wow'').removeClass(''wow'');

Coloque esto en la parte inferior de la página, sin embargo, para aquellos que desean eliminar la animación WOW JS para ciertos dispositivos, esto es para usted;

if(isMobile || isTablet) {
$(''.wow'').addClass(''wow-removed'').removeClass(''wow'');
} else {
$(''.wow-removed'').addClass(''wow'').removeClass(''wow-removed'');
}

Ponga la lógica detrás de isMobile e isTablet usted mismo, y estoy seguro de que todos pueden hacerlo.

Gracias

Answer 4

.wow {
visibility: visible !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}