home page prototype

by Richard Hunter

HTML

<button id="foo">click</button>
<div class="container">
    <div class="inner">
        <div class="image"></div>
        <svg
             width="100%"
             height="100%"
             viewbox="0 0 100 40"
             >
            <polygon
                     points="0,0 0,40 20,0" style="fill:white"/>
               <polygon
                     points="100,0 80,40 100,40" style="fill:white"/>
        </svg>
    </div>
</div>

SCSS

.container {
    width : 50%;
    border  : solid 1px white;
    overflow : hidden;
    position :relative;
    &:before{
        padding-top : 40%;
        content : "";
        display : block;
    }
    .inner {
        position : absolute;
        perspective: 500px;
        top : 0;
        right : 0;
        left : 0;
        bottom : 0;
        svg {
            position : absolute;
            width : 100%;
            height : 100%;
            left : 0;
            top : 0;
        }
        .image {
            width : 100%;
            height : 100%;
            background-image : url(http://localhost:1314/images/homepage.png);
            
            background-position : cover;
            background-size : 100%;
            background-repeat : no-repeat;
            animation : back 1s linear;
   
            &.active {
                
                animation : anim 1s linear;
                transform : translateX(-30%) translateZ(200px);
            }
           
        }
    }
}
 @keyframes anim {
    0% {
        transform : translateX(0) translateZ(0);
    }
    100% {
        transform : translateX(-30%) translateZ(200px);
    }
}
 @keyframes back {
    0% {
        transform : translateX(-30%) translateZ(200px);
    }
    100% {
        transform : translateX(0) translateZ(0);
    }
}

JavaScript

var button = document.querySelector("#foo");
var image = document.querySelector('.image');
button.addEventListener("click", function () {
	image.classList.toggle("active");
});