1

$(document).ready(function(){
                alert(($("#marcas").css('left')));
        })  
$(window).scroll(function(){
	var margin = $("#marcas").css('left'); 

	if (margin == '0px') {
	 $("#marcas").addClass('moving1');
	}
	if ( margin == '-200px') {
	 $("#marcas").addClass('moving2');
	}
	if ($("#marcas").css('left') == '-400px') {
	 $("#marcas").addClass('moving3');
	}
	if ($("#marcas").css('left') == '-600px') {
	 $("#marcas").addClass('moving4');
	}
	if ($("#marcas").css('left') == '-800px') {
	 $("#marcas").addClass('moving5');
	}
	if ($("#marcas").css('left') == '-1000px') {
	 $("#marcas").addClass('moving6');
	}
	if ($("#marcas").css('left') == '-1200px') {
	 $("#marcas").addClass('moving7');
	}
	else {
		alert(none);
	}

});

$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

// how to call it (with a 1000ms timeout):
$(window).scrollEnd(function(){
   al 
}, 500000);
body{margin:0;height:10000px;}
  #marcas{ position:fixed; left:0px; width:4000px;overflow: hidden; }
  .moving1{
 animation-name: moving1;
 animation-duration: 2s;
 animation-fill-mode: forwards;
 animation-timing-function: linear;
 }
  .moving2{
 animation-name: moving2;
 animation-duration: 2s;
 animation-fill-mode: forwards;
  animation-timing-function: linear;
 }
   .moving3{
 animation-name: moving3;
 animation-duration: 2s;
 animation-fill-mode: forwards;
  animation-timing-function: linear;
 }
    .moving4{
 animation-name: moving4;
 animation-duration: 2s;
 animation-fill-mode: forwards;
  animation-timing-function: linear;
 }
     .moving5{
 animation-name: moving5;
 animation-duration: 2s;
 animation-fill-mode: forwards;
  animation-timing-function: linear;
 }
       .moving6{
 animation-name: moving6;
 animation-duration: 2s;
 animation-fill-mode: forwards;
  animation-timing-function: linear;
 }
       .moving7{
 animation-name: moving7;
 animation-duration: 2s;
 animation-fill-mode: forwards;
  animation-timing-function: linear;
 }
.verde{width:800px; height:100vh; background:green; display:inline-block; left:0;}
.rojo{width:800px; height:100vh; background:red;display:inline-block;  }
@-webkit-keyframes moving1 {
  0%   { translateX(0px); }
  100% { translateX(200px); }
}
@-moz-keyframes moving1 {
  0%   { translateX(0px); }
  100% { translateX(200px); }
}
@-o-keyframes moving1 {
  0%   { translateX(0px); }
  100% { translateX(200px); }
}
@keyframes moving1 {
  0%   { translateX(0px); }
  100% { translateX(200px); }
}
@-webkit-keyframes moving2{
  0% { left: -200px; }
  100% { left: -400px; }
}
@-moz-keyframes moving2 {
  0% { left: -200px; }
  100% { left: -400px; }
}
@-o-keyframes moving2 {
  0% { left: -200px; }
  100% { left: -400px; }
}
@keyframes moving2 {
  0% { left: -200px; }
  100% { left: -400px; }
}
@-webkit-keyframes moving3{
  0%   { left: -400px; }
  100% { left: -600px; }
}
@-moz-keyframes moving3 {
  0%   { left: -400px; }
  100% { left: -600px; }
}
@-o-keyframes moving3 {
  0%   { left: -400px; }
  100% { left: -600px; }
}
@keyframes moving3 {
  0%   { left: -400px; }
  100% { left: -600px; }
}
@-webkit-keyframes moving4{
  0%   { left: -600px; }
  100% { left: -800px; }
}
@-moz-keyframes moving4 {
  0%   { left: -600px; }
  100% { left: -800px; }
}
@-o-keyframes moving4 {
  0%   { left: -600px; }
  100% { left: -800px; }
}
@keyframes moving4 {
  0%   { left: -600px; }
  100% { left: -800px; }
}
@-webkit-keyframes moving5{
  0%   { left: -800px; }
  100% { left: -1000px; }
}
@-moz-keyframes moving5{
  0%   { left: -800px; }
  100% { left: -1000px; }
}
@-o-keyframes moving5{
  0%   { left: -800px; }
  100% { left: -1000px; }
}
@keyframes moving5{
  0%   { left: -800px; }
  100% { left: -1000px; }
}
@-webkit-keyframes moving6{
  0%   { left: -1000px; }
  100% { left: -1200px; }
}
@-moz-keyframes moving6{
  0%   { left: -1000px; }
  100% { left: -1200px; }
}
@-o-keyframes moving6{
  0%   { left: -1000px; }
  100% { left: -1200px; }
}
@keyframes moving6{
  0%   { left: -1000px; }
  100% { left: -1200px; }
}
@-webkit-keyframes moving7{
  0%   { left: -1200px; }
  100% { left: -1400px; }
}
@-moz-keyframes moving7{
  0%   { left: -1200px; }
  100% { left: -1400px; }
}
@-o-keyframes moving7{
  0%   { left: -1200px; }
  100% { left: -1400px; }
}
@keyframes moving7{
  0%   { left: -1200px; }
  100% { left: -1400px; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="marcas" >
<div class="verde">
</div><div class="rojo">
</div><div class="verde">
</div><div class="rojo">
</div><div class="verde">
</div>
</div>

¿Hay alguna manera de hacer que la velocidad de la animación sea regular? Por ejemplo, si un div se mueve 20px en 2 segundos, que se mueva a 10px/seg y no en esa curva de 5px/seg a 15px/seg. Cómo se haría para empezar la animación desde la situación en la que se encuentra cuando, por ejemplo, añadimos una clase?

2
  • Hola @IvanSoler, ¿Te refieres a keyframes o a transition?
    – gugadev
    el 23 sep. 2016 a las 16:38
  • hola @MitsuGami keyframes
    – Ivan Soler
    el 23 sep. 2016 a las 19:31

1 respuesta 1

1

Por supuesto. Supongamos que tienes un div y quieres que se mueva de 0 a 400px de forma lineal (sin ninguna variación entre la velocidad entre la inicial o final), basta con especificar la propiedad animation-timing-function con el valor linear, como si de una transición se tratara.

.animate {
    animation-name: move;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% {  translateX(0px); }
    33.333% { translateX(200px); }
    66.666% { translateX(400px); }
}
5
  • Ostras muchas gracias ! Una cosa ya que estamos, la añado ahora en un edit a la pregunta general.. cómo sería para empezar la animación desde el punto en el que está y no uno prefijado? Gracias !
    – Ivan Soler
    el 23 sep. 2016 a las 20:13
  • Con el 0% { translateX(0px); } indico que la animación empezará en donde se encuentra el elemento en la pantalla.
    – gugadev
    el 23 sep. 2016 a las 20:16
  • Perdona Mitsu pero no funciona para mí puesto que se trata de un div fijo el que estoy moviendo y debo hacerlo con 0% { left:0px } 0%{left:-200px} se te ocurre alguna solución?
    – Ivan Soler
    el 23 sep. 2016 a las 20:27
  • Ten en cuenta que para elementos fijos no puedes usar left, si no en su lugar translate. Si usas left se asume que el elemento tiene un position: absolute;. Si lo tienes así, digamos con un left: 300px; entonces la animación debe empezar también con left: 300px;.
    – gugadev
    el 23 sep. 2016 a las 20:31
  • He de decirte que con translate no funciona, de todas formas hago un edit para que veas el ejemplo en funcionamiento ya que estamos y así lo entenderás mejor.
    – Ivan Soler
    el 23 sep. 2016 a las 20:34

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.