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.