Testing translate

index.html

  <div class="mobile">
    <section> <span>Home</span></section>
    <section data-section="one">
      <span>One</span></section>
    <section data-section="two">
      <span>Two</span></section>
  </div>

script.js

var mobile = (function(){
  'use-strict';
  return{
    _:function(el){
      return document.querySelector(el);
    },
    run:function(){
      var section_one = this._('[data-section="one"]');
      var section_two = this._('[data-section="two"]');
      // move data-section -100%
      moveUp(section_two,'100');
      moveLeft(section_one,'100');
      // loop
      setInterval(function(){
        // move data-section 100%
        _delay(function(){ moveLeft(section_one,'100');},2000);
        // move data-section -100%
        _delay(function(){ moveUp(section_two,'-100');},2000);
        // move data-section -0%
        _delay(function(){ moveLeft(section_one,'0');},3000);
        // move data-section -00%
        _delay(function(){ moveUp(section_two,'100');},3000);
      },3000);
    }
  };
})();

// run 
mobile.run();


// reusable functions

// transform array
var transform = ["transform","msTransform", 
  "webkitTransform","mozTransform","oTransform"],
    // get property 
    transformProp = prefix(transform);
 
// move left
function moveLeft(el,to){
  return el.style[transformProp] ='translate('+to+'%,0)';
}
// move up
function moveUp(el,to){
  return el.style[transformProp] ='translate(0,'+to+'%)';
}
// simple delay callback,time
function _delay(callback,time){
  var t = setTimeout(function(){
    callback();
    clearTimeout(t);
  },time);
}
// prefix transform
function prefix(prop) {
    // loop property
    for (var i = 0; i < prop.length; i++) {
        // if not undefined
        if (typeof document.body.style[prop[i]] != "undefined") {
            return prop[i];
        }
    }
    return null;
}
 
 

style.css

*{
  box-sizing:border-box;
}
body{
  margin:0;
  padding:0;
  height:100%;
  position:relative;
  background:#f44;
}
.mobile{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:100%;
  height:100%;
  background:#34495E;
  overflow:hidden;
}

section span{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:100px;
  height:100px;
  border-radius:100%;
  text-align:center;
  vertical-align:middle;
  font-size:20px;
  line-height:100px;
  font-family:sans-serif;
  background:#fff;
  color:#2980B9;
}
section[data-section]{
  height:100%;
  transition:all 1s ease;
}
section[data-section="one"]{
  background:#1ABC9C;
}
section[data-section="two"]{
  background:#3498DB;
}

testing-translate.markdown

Testing translate

A Pen by Moncho Varela on CodePen.

License.