0

Tengo una pagina con muchas animaciones jquery, pero estas animaciones solo quiero que funcionen en la version original de la pagina, es decir, en la pagina de tamaño normal (echa para laptops, pc de escritorio y tablets) pero quiero inhabilitar las animaciones en la version para celular (movil). ¿se puede hacer?...es que mis animaciones no se ven bien en una pantalla pequeña, como que se desperdician...yo podria simplemente eliminar los elementos que se animan, y esto no mostraria animacion alguna, pero eso no quitaria el peso de carga debido a que el jquery y los codigos de la hoja de animaciones segurian corriendo (ejecutandose) ¿me explico?...entonces quiero saber si se puede hacer esto: que cuando mediaquerie detecte una resolucion especificada, que elimine los sripts del head (esos que habilitan el jquery y los otros), y e esta forma que mi web para movil sea mas ligera

1
  • Mira te puedo recomendar que los links y los scripts que vayas a usar en dependencia de la resolucion de tu sitio no los incluyas estaticamente sino que lo hagas dinamicamente una vez se cargue tu pagina por tanto puedes mejorar la respuesta de @Bryan Garcia Duran. Commented el 9 nov. 2018 a las 21:02

2 respuestas 2

0

Puedes intentar lo siguiente:

$( window ).resize(function() {
  if($(window).width() > 450)
  {
    //Animaciones aqui
  }
});
4
  • No creo que sea lo que el esta buscando exactamente al menos te faltarian otros detalles Commented el 9 nov. 2018 a las 21:01
  • Hola Bryan....Esto puede funcionar ahora que estoy haciendo pruebas en un navegador, pero me pregunto si funcionaria cuando ingrese desde un movil, ya que, la persona visitante en ningun momento va a cambiar el tamaño de su ventana, sino que va a entrar con el tamaño que tiene por defecto ¿me explico? a mi me funciona por que le estoy cambiando el tamaño de ventana a mi navegador ¿pero una persona que no cambia nada, que entra como viene por defecto, funcionará este codigo?
    – user104554
    Commented el 9 nov. 2018 a las 21:14
  • Tienes razón, no pensé esa parte, podría solucionarse tal vez de la siguiente forma: $(document).ready(function{ var x = $(document).widht() if(x > 450) {//animaciones} }); Commented el 9 nov. 2018 a las 22:29
  • Lo Mismo se puede hacer si se toma con el ID o la CLASS desde Css es mas sencillo ocultar un valor. Commented el 14 feb. 2019 a las 18:49
0

Si es posible hacer lo que indicas con el uso de las condiciones CSS @media de manera correcta.

Funciona igual si tienes un valor por JS o CSS.

Los Media querys son usando principalmente para trabajar con altas,mediana y pequeñas escalas de pantalla de un sitio web, lo que se conoce como el RESPONSIVE.

Mediante una declaración usted puede indicarle al navegador a que determinada resolución de pantalla desea que se efectúe un cambio.

Si estás trabajando con animaciones tanto sean CSS como de JS, siempre estarán acompañadas por una class o un id, el cual usted llamas desde tu JS para efectuar una animación.

Puedes indicarle con una orden @media los que deseas que suceda con ella en tamaños más pequeños.

Le dejo un ejemplo de cómo funciona una condición CSS.

@charset "UTF-8";

* {
  padding: 0;
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  background-color: purple;
  width: 100%;
  height: 100vh;
}

.container h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  color: #FFF;
}

/* DECLARACIÓN DE VARIABLES DE CSS RESPONSIVE */
/* En esta declaración estoy indicando que en solo pantallas y que cuando su tamaño maximo sea de 992px haga esto*/
@media screen and (max-width: 992px) {
  .container {
    background-color: blue;
    /* cambio el color de fondo a 992 PX*/
  }

  .container h2 {
    font-size: 30px;
    /* Cambio el tamaño de letra a 992px*/
  }
}

@media screen and (max-width: 768px) {
  .container {
    background-color: green;
    /* cambio el color de fondo a 992 PX*/
  }

  .container h2 {
    display: none;
    /* Indico que a un nivel de 768px deseo que el h2 ya no se muestre */
  }
}
<!DOCTYPE html>
<html lang="es">

<head>
    <title>Media Querys</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Css/Estilos.css">
</head>

<body>
    <div class="container">
        <h2>Este es un h2</h2>
    </div>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.