Foros del Web » Creando para Internet » CSS »

Pausar Animación hasta que se cargue la web

Estas en el tema de Pausar Animación hasta que se cargue la web en el foro de CSS en Foros del Web. Buenas! En mi web tengo una animación y quiero que se reproduzca únicamente cuando la página (o al menos la zona que cubre la animación) ...
  #1 (permalink)  
Antiguo 06/10/2014, 03:41
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 14 años, 11 meses
Puntos: 3
Pausar Animación hasta que se cargue la web

Buenas!

En mi web tengo una animación y quiero que se reproduzca únicamente cuando la página (o al menos la zona que cubre la animación) haya cargado.

Si bien que está la etiqueta "animation-delay", pero no me sirve porque eso es para poner un tiempo constante y no a todo el mundo le tardará lo mismo el tiempo de carga (según la conexión y el PC), necesito algo tipo "onload" de JavaScript, pero no sabría como implementarlo.

Un saludo.
__________________
¿Por qué Anónimo?, porque como está el mundo no podemos considerarnos humanos...
  #2 (permalink)  
Antiguo 06/10/2014, 05:33
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 10 años, 7 meses
Puntos: 401
Respuesta: Pausar Animación hasta que se cargue la web

Hace tiempo realice un modulo para prestashop basado en jQuery lazzyload que creo que te podría servir.

http://www.prestashop.com/forums/top...d#entry1756560

y el jq, era este:
Código jq:
Ver original
  1. */
  2. (function($, window, document, undefined) {
  3.     var $window = $(window);
  4.  
  5.     $.fn.lazyload = function(options) {
  6.         var elements = this;
  7.         var $container;
  8.         var settings = {
  9.             threshold       : 200,
  10.             failure_limit   : 10,
  11.             event           : "scroll",
  12.             effect          : "show",
  13.             container       : window,
  14.             data_attribute  : "original",
  15.             skip_invisible  : true,
  16.             appear          : null,
  17.             load            : null
  18.         };
  19.  
  20.         function update() {
  21.             var counter = 0;
  22.      
  23.             elements.each(function() {
  24.                 var $this = $(this);
  25.                 if (settings.skip_invisible && !$this.is(":visible")) {
  26.                     return;
  27.                 }
  28.                 if ($.abovethetop(this, settings) ||
  29.                     $.leftofbegin(this, settings)) {
  30.                         /* Nothing. */
  31.                 } else if (!$.belowthefold(this, settings) &&
  32.                     !$.rightoffold(this, settings)) {
  33.                         $this.trigger("appear");
  34.                         /* if we found an image we'll load, reset the counter */
  35.                         counter = 0;
  36.                 } else {
  37.                     if (++counter > settings.failure_limit) {
  38.                         return false;
  39.                     }
  40.                 }
  41.             });
  42.  
  43.         }
  44.  
  45.         if(options) {
  46.             /* Maintain BC for a couple of versions. */
  47.             if (undefined !== options.failurelimit) {
  48.                 options.failure_limit = options.failurelimit;
  49.                 delete options.failurelimit;
  50.             }
  51.             if (undefined !== options.effectspeed) {
  52.                 options.effect_speed = options.effectspeed;
  53.                 delete options.effectspeed;
  54.             }
  55.  
  56.             $.extend(settings, options);
  57.         }
  58.  
  59.         /* Cache container as jQuery as object. */
  60.         $container = (settings.container === undefined ||
  61.                       settings.container === window) ? $window : $(settings.container);
  62.  
  63.         /* Fire one scroll event per scroll. Not one scroll event per image. */
  64.         if (0 === settings.event.indexOf("scroll")) {
  65.             $container.bind(settings.event, function(event) {
  66.                 return update();
  67.             });
  68.         }
  69.  
  70.         this.each(function() {
  71.             var self = this;
  72.             var $self = $(self);
  73.  
  74.             self.loaded = false;
  75.  
  76.             /* When appear is triggered load original image. */
  77.             $self.one("appear", function() {
  78.                 if (!this.loaded) {
  79.                     if (settings.appear) {
  80.                         var elements_left = elements.length;
  81.                         settings.appear.call(self, elements_left, settings);
  82.                     }
  83.                     $("<img />")
  84.                         .bind("load", function() {
  85.                             $self
  86.                                 .hide()
  87.                                 .attr("src", $self.data(settings.data_attribute))
  88.                                 [settings.effect](settings.effect_speed);
  89.                             self.loaded = true;
  90.  
  91.                             /* Remove image from array so it is not looped next time. */
  92.                             var temp = $.grep(elements, function(element) {
  93.                                 return !element.loaded;
  94.                             });
  95.                             elements = $(temp);
  96.  
  97.                             if (settings.load) {
  98.                                 var elements_left = elements.length;
  99.                                 settings.load.call(self, elements_left, settings);
  100.                             }
  101.                         })
  102.                         .attr("src", $self.data(settings.data_attribute));
  103.                 }
  104.             });
  105.  
  106.             /* When wanted event is triggered load original image */
  107.             /* by triggering appear.                              */
  108.             if (0 !== settings.event.indexOf("scroll")) {
  109.                 $self.bind(settings.event, function(event) {
  110.                     if (!self.loaded) {
  111.                         $self.trigger("appear");
  112.                     }
  113.                 });
  114.             }
  115.         });
  116.  
  117.         /* Check if something appears when window is resized. */
  118.         $window.bind("resize", function(event) {
  119.             update();
  120.         });
  121.              
  122.         /* With IOS5 force loading images when navigating with back button. */
  123.         /* Non optimal workaround. */
  124.         if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
  125.             $window.bind("pageshow", function(event) {
  126.                 if (event.originalEvent && event.originalEvent.persisted) {
  127.                     elements.each(function() {
  128.                         $(this).trigger("appear");
  129.                     });
  130.                 }
  131.             });
  132.         }
  133.  
  134.         /* Force initial check if images should appear. */
  135.         $(document).ready(function() {
  136.             update();
  137.         });
  138.        
  139.         return this;
  140.     };
  141.  
  142.     /* Convenience methods in jQuery namespace.           */
  143.     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
  144.  
  145.     $.belowthefold = function(element, settings) {
  146.         var fold;
  147.        
  148.         if (settings.container === undefined || settings.container === window) {
  149.             fold = $window.height() + $window.scrollTop();
  150.         } else {
  151.             fold = $(settings.container).offset().top + $(settings.container).height();
  152.         }
  153.  
  154.         return fold <= $(element).offset().top - settings.threshold;
  155.     };
  156.    
  157.     $.rightoffold = function(element, settings) {
  158.         var fold;
  159.  
  160.         if (settings.container === undefined || settings.container === window) {
  161.             fold = $window.width() + $window.scrollLeft();
  162.         } else {
  163.             fold = $(settings.container).offset().left + $(settings.container).width();
  164.         }
  165.  
  166.         return fold <= $(element).offset().left - settings.threshold;
  167.     };
  168.        
  169.     $.abovethetop = function(element, settings) {
  170.         var fold;
  171.        
  172.         if (settings.container === undefined || settings.container === window) {
  173.             fold = $window.scrollTop();
  174.         } else {
  175.             fold = $(settings.container).offset().top;
  176.         }
  177.  
  178.         return fold >= $(element).offset().top + settings.threshold  + $(element).height();
  179.     };
  180.    
  181.     $.leftofbegin = function(element, settings) {
  182.         var fold;
  183.        
  184.         if (settings.container === undefined || settings.container === window) {
  185.             fold = $window.scrollLeft();
  186.         } else {
  187.             fold = $(settings.container).offset().left;
  188.         }
  189.  
  190.         return fold >= $(element).offset().left + settings.threshold + $(element).width();
  191.     };
  192.  
  193.     $.inviewport = function(element, settings) {
  194.          return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
  195.                 !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
  196.      };
  197.  
  198.     /* Custom selectors for your convenience.   */
  199.     /* Use as $("img:below-the-fold").something() or */
  200.     /* $("img").filter(":below-the-fold").something() which is faster */
  201.  
  202.     $.extend($.expr[':'], {
  203.         "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
  204.         "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
  205.         "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
  206.         "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
  207.         "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
  208.         /* Maintain BC for couple of versions. */
  209.         "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
  210.         "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
  211.         "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
  212.     });
  213.  
  214. })(jQuery, window, document);
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #3 (permalink)  
Antiguo 06/10/2014, 06:28
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 2 meses
Puntos: 45
Respuesta: Pausar Animación hasta que se cargue la web

Buenas.

Puedes declarar la animación en una clase y asignar la clase en el onload mediante javascript.
__________________
tecnawebs.es Diseño web y programación - Modelado 3D.

google plus
  #4 (permalink)  
Antiguo 06/10/2014, 08:45
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 14 años, 11 meses
Puntos: 3
Respuesta: Pausar Animación hasta que se cargue la web

Cita:
Buenas.

Puedes declarar la animación en una clase y asignar la clase en el onload mediante javascript.
Gracias!, ha sido tan sencillo como añadir en el onload:

Código Javascript:
Ver original
  1. document.getElementById('idBloqueSuperior').className = 'animacion';

Qué tontería, pero cuando llevas muchas hora se te atrofian las ideas. Un saludo.
__________________
¿Por qué Anónimo?, porque como está el mundo no podemos considerarnos humanos...

Etiquetas: página, pausar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:30.