2

Estoy intentando realizar unas animaciones pero me encuentro con que la animación para Chrome y Firefox no hacen lo mismo, en Chrome la animación funciona pero con el movimiento invertido a lo que hace con el resto de navegadores.

Éste es el código (también disponible en JSFiddle):

(function() {
  animation0();
})();

var where = "";
window.setInterval(function() {
  startAnimation();
}, 1000);
var x = 0;

function startAnimation(elem) {
  if (x == 0) {
    animation1();
  } else if (x == 1) {
    // comentado para evitar error innecesario
    //animation3();
  }
  x++;
}

function animation0() {
  var esq1 = document.getElementById('esq1');
  var esq2 = document.getElementById('esq2');
  esq1.style.backgroundColor = "#bd9559";
  esq1.style.zIndex = "15";
  esq2.style.backgroundColor = "#0b4242";
  esq2.style.zIndex = "14";

  console.log("animation0");
}

function animation1() {
  where = 1;
  var esq1 = document.getElementById('esq1');
  var esq2 = document.getElementById('esq2');
  var dre1 = document.getElementById('dre1');
  var dre2 = document.getElementById('dre2');
  esq1.style.zIndex = "15";

  esq2.style.transition = "transform 1s ease-in";
  esq2.style.webkitTransition = "transform 1s ease-in"; //Chrome
  esq2.style.MozTransition = "transform 1s ease-in"; //Firefox
  esq2.style.msTransition = "transform 1s ease-in";
  esq2.style.OTransition = "transform 1s ease-in";

  esq2.style.transform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
  esq2.style.webkitTransform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
  esq2.style.MozTransform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
  esq2.style.msTransform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
  esq2.style.OTransform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";

  esq2.style.zIndex = "14";

  dre2.style.zIndex = "13";
  dre1.style.zIndex = "-1";
  dre1.style.transition = "transform 0.6s ease-in";

  dre1.style.transform = "matrix(-1, 0, 0, 1, 0, -" + window.innerWidth + ")";

  esq2.addEventListener("transitionend", function(event) {
    animation2();
  }, false);
}

function animation2() {
  var esq1 = document.getElementById('esq1');
  var esq2 = document.getElementById('esq2');
  var dre1 = document.getElementById('dre1');
  esq1.style.zIndex = "13";
  esq2.style.zIndex = "15";
  dre1.style.zIndex = "12";

  esq1.style.transition = "transform 0.5s ease-out";
  esq1.style.transform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
}

$(window).bind('mousewheel DOMMouseScroll', function(event) {
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    where = where - 1;
  } else {
    where = where + 1;
  }
  var funcionexist = "window.animation" + where + "()";
  if (typeof funcionexist !== 'undefined') {
    console.log("la func existeix: " + funcionexist);
    window.funcionexist;
  }
});
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 1003
}

.base_layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.base_panel {
  position: fixed;
  top: 50%;
  width: 100%;
  height: 200vw;
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.panel-left {
  transform-origin: right center;
  right: 50%;
  transition: transform 1s;
  transition-timing-function: ease-in;
}

.panel-right {
  transform-origin: left center;
  left: 50%;
  transition: transform 1s;
  transition-timing-function: ease-in;
}

#esq1 {
  transform-origin: right center;
  right: 50%;
  transition: transform 1s;
}

#esq2 {
  transition: transform 0.8s ease-in;
}

#dre1 {
  background-image: url("https://lh3.googleusercontent.com/-1EjZEV0gPfQ/VDmI-6gW83I/AAAAAAAAAEE/WhJUacJZ7ko/w1200-h1400/All%2Byou%2Bneed%2Bis%2Blove.png");
  background-size: 50%;
  background-position: left;
  background-repeat: no-repeat;
  z-index: 12;
}

#dre2 {
  background-image: url("https://lh3.googleusercontent.com/-1EjZEV0gPfQ/VDmI-6gW83I/AAAAAAAAAEE/WhJUacJZ7ko/w1200-h1400/All%2Byou%2Bneed%2Bis%2Blove.png");
  background-size: 50%;
  background-position: left;
  background-repeat: no-repeat;
  z-index: 13;
}

.w-xs-100 {
  width: 100%;
}

.h-xs-100 {
  height: 100%;
}

.textslide {
  position: absolute;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="base_layout">
  <div class="base_panel panel-left" id="esq1"></div>
  <div class="base_panel panel-left" id="esq2"></div>
  <div class="base_panel panel-right" id="dre1"></div>
  <div class="base_panel panel-right" id="dre2"></div>
</div>

En Firefox, IE gira en sentido horario. En Chrome gira en sentido antihorario.

2
  • Sucede exactamente igual con Opera (giro antihorario) para que también lo tengas en cuenta
    – Art_Code
    el 16 feb. 2018 a las 20:23
  • Gracias @Huskie , no lo tenía en cuenta.
    – jadup
    el 19 feb. 2018 a las 8:19

1 respuesta 1

0

El problema parece que está en que los navegadores inicializan los valores por defecto a cosas diferentes y eso hace que la animación se vea en direcciones diferentes (porque estás definiendo la animación con un punto de destino, pero no hay un punto de inicio definido).

Entonces una posible solución sería definir un punto de partida que sea el mismo para todos los navegadores (algo que puedes hacer en CSS o JS). De ese modo, la animación se debería ver en la misma dirección.

Con ese cambio, ya se ve igual en Chrome, Firefox, Opera, IE y Edge:

(function() {
  animation0();
})();

var where = "";
window.setInterval(function() {
  startAnimation();
}, 1000);
var x = 0;

/* definir valores iniciales para esq1 y esq2 */
var esq1 = document.getElementById('esq1');
esq1.style.transform = "matrix(1, 0, 0, 1, 0, -" + window.innerWidth + ")";
var esq2 = document.getElementById('esq2');
esq2.style.transform = "matrix(1, 0, 0, 1, 0, -" + window.innerWidth + ")";
esq2.style.webkitTransform = "matrix(1, 0, 0, 1, 0, -" + window.innerWidth + ")";
esq2.style.MozTransform = "matrix(1, 0, 0, 1, 0, -" + window.innerWidth + ")";
esq2.style.msTransform = "matrix(1, 0, 0, 1, 0, -" + window.innerWidth + ")";
esq2.style.OTransform = "matrix(1, 0, 0, 1, 0, -" + window.innerWidth + ")";


function startAnimation(elem) {
  if (x == 0) {
    animation1();
  } else if (x == 1) {
    // comentado para evitar error innecesario
    //animation3();
  }
  x++;
}

function animation0() {
  var esq1 = document.getElementById('esq1');
  var esq2 = document.getElementById('esq2');
  esq1.style.backgroundColor = "#bd9559";
  esq1.style.zIndex = "15";
  esq2.style.backgroundColor = "#0b4242";
  esq2.style.zIndex = "14";

  console.log("animation0");
}

function animation1() {
  where = 1;
  var esq1 = document.getElementById('esq1');
  var esq2 = document.getElementById('esq2');
  var dre1 = document.getElementById('dre1');
  var dre2 = document.getElementById('dre2');
  esq1.style.zIndex = "15";

  esq2.style.transition = "transform 1s ease-in";
  esq2.style.webkitTransition = "transform 1s ease-in"; //Chrome
  esq2.style.MozTransition = "transform 1s ease-in"; //Firefox
  esq2.style.msTransition = "transform 1s ease-in";
  esq2.style.OTransition = "transform 1s ease-in";

  esq2.style.transform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
  esq2.style.webkitTransform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
  esq2.style.MozTransform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
  esq2.style.msTransform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
  esq2.style.OTransform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";

  esq2.style.zIndex = "14";

  dre2.style.zIndex = "13";
  dre1.style.zIndex = "-1";
  dre1.style.transition = "transform 0.6s ease-in";

  dre1.style.transform = "matrix(-1, 0, 0, 1, 0, -" + window.innerWidth + ")";

  esq2.addEventListener("transitionend", function(event) {
    animation2();
  }, false);
}

function animation2() {

  var esq1 = document.getElementById('esq1');
  var esq2 = document.getElementById('esq2');
  var dre1 = document.getElementById('dre1');
  esq1.style.zIndex = "13";
  esq2.style.zIndex = "15";
  dre1.style.zIndex = "12";

  esq1.style.transition = "transform 0.5s ease-out";
  esq1.style.transform = "matrix(-1, 0, 0, -1, 0, -" + window.innerWidth + ")";
}

$(window).bind('mousewheel DOMMouseScroll', function(event) {
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    where = where - 1;
  } else {
    where = where + 1;
  }
  var funcionexist = "window.animation" + where + "()";
  if (typeof funcionexist !== 'undefined') {
    console.log("la func existeix: " + funcionexist);
    window.funcionexist;
  }
});
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 1003
}

.base_layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.base_panel {
  position: fixed;
  top: 50%;
  width: 100%;
  height: 200vw;
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.panel-left {
  transform-origin: right center;
  right: 50%;
  transition: transform 1s;
  transition-timing-function: ease-in;
}

.panel-right {
  transform-origin: left center;
  left: 50%;
  transition: transform 1s;
  transition-timing-function: ease-in;
}

#esq1 {
  transform-origin: right center;
  right: 50%;
  transition: transform 1s;
}

#esq2 {
  transition: transform 0.8s ease-in;
}

#dre1 {
  background-image: url("https://lh3.googleusercontent.com/-1EjZEV0gPfQ/VDmI-6gW83I/AAAAAAAAAEE/WhJUacJZ7ko/w1200-h1400/All%2Byou%2Bneed%2Bis%2Blove.png");
  background-size: 50%;
  background-position: left;
  background-repeat: no-repeat;
  z-index: 12;
}

#dre2 {
  background-image: url("https://lh3.googleusercontent.com/-1EjZEV0gPfQ/VDmI-6gW83I/AAAAAAAAAEE/WhJUacJZ7ko/w1200-h1400/All%2Byou%2Bneed%2Bis%2Blove.png");
  background-size: 50%;
  background-position: left;
  background-repeat: no-repeat;
  z-index: 13;
}

.w-xs-100 {
  width: 100%;
}

.h-xs-100 {
  height: 100%;
}

.textslide {
  position: absolute;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="base_layout">
  <div class="base_panel panel-left" id="esq1"></div>
  <div class="base_panel panel-left" id="esq2"></div>
  <div class="base_panel panel-right" id="dre1"></div>
  <div class="base_panel panel-right" id="dre2"></div>
</div>

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.