Fullscreen sections changing by translateX

Question

I would gain effect like: fullscreen sections (left to right) which I can change by translateX.

My first try unfortunately move whole wrapper instead of its content: https://codepen.io/anon/pen/WPzBYm

const sectionsWrapper = document.getElementById("sections-wrapper");

sectionsWrapper.style.transform = "translateX(-100px)";

html, body {
  background-color: pink;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}
.wrapper {
  position: relative;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
  height: 100%;      
}
.section {
  display: inline-block;
  width: 100%;
  height: 100vh;
}
.s1 {
  background-color: yellow;
}
.s2 {
  background-color: coral;
}
.s3 {
  background-color: cyan;
}

<div id="sections-wrapper" class="wrapper">
  <div class="section s1">elo1</div>
  <div class="section s2">elo2</div>
  <div class="section s3">elo3</div>
</div>

Target effect:

score 0 · Accepted Answer · answered Feb 11 '19 at 10:47

I'm not sure what is your goal, but if you want scroll your sections try this code:

The original code for animate (in vanilla javascript) is here: StackOverflow

//const sectionsWrapper = document.getElementById("sections-wrapper");

//sectionsWrapper.style.transform = "translateX(-100px)";



function animate(elem, style, unit, from, to, time, prop) {
    if (!elem) {
        return;
    }
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            if (prop) {
                elem[style] = (from + step * (to - from))+unit;
            } else {
                elem.style[style] = (from + step * (to - from))+unit;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, 25);
    if (prop) {
          elem[style] = from+unit;
    } else {
          elem.style[style] = from+unit;
    }
}

window.onload = function () {
    var wrapper = document.getElementById("sections-wrapper");
    var s2 = document.getElementById("s2");
    animate(wrapper, "scrollLeft", "", 0, s2.offsetLeft, 1000, true);
};

html, body{
  background-color: pink;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

.wrapper{
  position: relative;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
  height: 100%;
/*   overflow: hidden; */
  
}

.section{
  display: inline-block;
  width: 100%;
  height: 100vh;
}

.s1{
  background-color: yellow;
}

.s2{
  background-color: coral;
}

.s3{
  background-color: cyan;
}

<div id="sections-wrapper" class="wrapper">
  <div id="s1" class="section s1">elo1</div>
  <div id="s2" class="section s2">elo2</div>
  <div id="s3" class="section s3">elo3</div>
</div>

Hope this help you.

On StackOverflow we can't work for you, you have the example in my answer and you can do all the rest alone, but because I have time to lost and because it's funny check this: https://jsfiddle.net/hk3j09ec/3/. Good Luck :) — Baro, Feb 11 '19 at 14:27
Don't worry, its not commercial. I made similar code alone, before I asked, but thanks for indicate scrollLeft property. — 3D_fun, Feb 11 '19 at 19:41

score 0 · Answer 2 · answered Feb 11 '19 at 12:51

0

CHECK THIS.

sectionsWrapper.style.transform = "translateY(200px)";

const sectionsWrapper = document.getElementById("sections-wrapper");

sectionsWrapper.style.transform = "translateY(200px)";

answered Feb 11 '19 at 12:51

Harikrishnan k

203
2
8

I used it before to vertical sections, but now I'm asking about HTML layout to implement horizontal move. – 3D_fun Feb 11 '19 at 12:54

Fullscreen sections changing by translateX

2 Answers2