Facilidad en / Facilidad en el pergamino y visible en el mirador

Question

Cuando usted mira en el sitio web de https://www.mercedes-benz.com/en/ y te desplazas hacia abajo, todo el contenido se relaja. Cuando desplazas todo el camino hacia abajo y vuelves a desplazarte hacia arriba (slowely), también ves el contenido (blocks) que se relaja de nuevo. Cuando estás de vuelta en la parte superior y desplácate de nuevo, todo el contenido comienza a facilitarse de nuevo. Sé algo como carga perezosa o facilidad con jQuery pero una vez que se carga la animación se hace. Cuando te desplazas de regreso a la cima nada se relaja. Así que no puedes hacer la facilidad de animación de nuevo. Encontré un ejemplo (no la animación exacta que quiero, pero puedo cambiar eso) así con el desvanecimiento en: https://codepen.io/chriscoyier/pen/DjmJe Este es el javascript que usaron: (function($) { $.fn.visible = function(partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop(), viewBottom = viewTop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom; return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); }; })(jQuery); var win = $(window); var allMods = $( .module ); allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass( already-visible ); } }); win.scroll(function(event) { allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass( come-in ); } }); }); No soy un experto en javascript, pero ¿es posible también dejar que se calme cuando me desplace hacia arriba y se alimente cuando me desplace hacia abajo?

Gpt · Accepted Answer

Claro, para lograr que el contenido se relaje (calme) cuando te desplazas hacia arriba y se active nuevamente cuando te desplazas hacia abajo, puedes ajustar el código JavaScript que tienes actualmente. Una forma de lograr esto es añadir una clase adicional cuando se desplaza hacia arriba y quitar esa clase cuando se desplaza hacia abajo.

Aquí te dejo una modificación del código JavaScript que podría ayudarte a lograr ese efecto:

javascript
(function($) {
  $.fn.visible = function(partial) {
    var $t = $(this),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };
})(jQuery);

var win = $(window);
var allMods = $(".module");

allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible");
  }
});

var lastScrollTop = 0; // Variable to store the last scroll position

win.scroll(function(event) {
  var st = $(this).scrollTop(); // Current scroll position

  if (st > lastScrollTop) {
    // Scrolling down
    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("come-in");
        el.removeClass("calm"); // Remove calm class
      }
    });
  } else {
    // Scrolling up
    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("calm");
        el.removeClass("come-in"); // Remove come-in class
      }
    });
  }

  lastScrollTop = st; // Update last scroll position
});

En este código, se ha añadido una clase "calm" que se agrega cuando se desplaza hacia arriba y se elimina la clase "come-in". Cuando te desplazas hacia abajo, se activará nuevamente la clase "come-in" y se quitará la clase "calm".

Espero que esta modificación te ayude a lograr el efecto que deseas en el scroll de tu página. ¡Déjame saber si tienes alguna otra pregunta o necesitas más ayuda!

Respondida el Dec 18, 2020 a las 16:19 - por Gpt

Gemini · Answer

Sí, es posible modificar el código JavaScript proporcionado para permitir que el contenido se relaje cuando te desplazas hacia arriba y se anime cuando te desplazas hacia abajo. Aquí tienes los pasos:

Detectar la dirección del desplazamiento:

Agrega las siguientes líneas de código para detectar si el usuario se desplaza hacia arriba o hacia abajo:


   var lastScrollTop = 0;
   $(window).scroll(function() {
     var scrollTop = $(this).scrollTop();
     var direction = scrollTop > lastScrollTop ? 'down' : 'up';
     lastScrollTop = scrollTop;
   });

Aplicar la animación adecuada:

Modifica la siguiente parte del código para aplicar la animación de facilitación cuando te desplazas hacia abajo y la animación de relajación cuando te desplazas hacia arriba:


   if (el.visible(true)) {
     if (direction === 'down') {
       el.addClass("come-in"); 
     } else if (direction === 'up') {
       el.removeClass("come-in"); 
     }
   }

Eliminar la clase "already-visible":

Para evitar que el contenido se anime dos veces cuando te desplazas hacia arriba y hacia abajo, elimina la siguiente línea del código:


   el.addClass("already-visible");

Después de realizar estos cambios, el código de JavaScript debería permitir que el contenido se relaje cuando te desplazas hacia arriba y se anime cuando te desplazas hacia abajo.

Código modificado:


(function($) {
  $.fn.visible = function(partial) {
    var $t            = $(this),
        $w            = $(window),
        viewTop       = $w.scrollTop(),
        viewBottom    = viewTop + $w.height(),
        _top          = $t.offset().top,
        _bottom       = _top + $t.height(),
        compareTop    = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };

})(jQuery);

var win = $(window);

var allMods = $(".module");

win.scroll(function(event) {
  var scrollTop = $(this).scrollTop();
  var direction = scrollTop > lastScrollTop ? 'down' : 'up';
  lastScrollTop = scrollTop;

  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      if (direction === 'down') {
        el.addClass("come-in"); 
      } else if (direction === 'up') {
        el.removeClass("come-in"); 
      }
    } 
  });
});

Respondida el Dec 18, 2020 a las 16:31 - por Gemini

Facilidad en / Facilidad en el pergamino y visible en el mirador

2 Respuestas: