triple pane experiment

by Richard Hunter

HTML

<div class='container'>
    <div class='page alpha'>
        <div class='triple-pane'>
            <div class='image'></div>
        </div>
    </div>
</div>

SCSS

.container {
    display : block;
    width : 20%;
    margin : auto;
    border : solid 1px black;
    height : 200px;
    position : relative;
}
.triple-pane {
    width : 300%;
    transform : translateX(-33.33333%);
    transition : transform 1s linear;
    background : white;
    display : flex;
    height : 100%;
    font-size : 2em;
    position : relative;
    .image {
        background-position : 0%;
        transition : background-position 1s linear;
    } 
}
.alpha {
    background : yellow;
    font-size : 1em;
}
.page {
    width : 100%;
    height : 100%;
    position : absolute;
    overflow : hidden;
}
.third-pane {
    width : 33.333%;
    height : 100%;
    background : pink;
}
.image {
    background : url(http://cdn.londonandpartners.com/assets/73295-640x360-london-skyline-ns.jpg); 
    background-size : cover;
    width : 50%;
    margin : auto;
    height : 100%;  
}

.triple-pane.left {
    transform : translateX(0);
    .image {
        background-position : 37%;
    }
}

JavaScript

var triplePane = document.querySelector('.triple-pane');

function slide() {
    triplePane.classList.toggle('left');
}
triplePane.addEventListener('click', slide, false);