Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Background Mouse-Position Slider
#banner-wrapper.banner-wrapper
.banner.design
.banner-content
%img{:src => 'https://goo.gl/L35vUt'}
.banner.dev
.banner-content
%img{:src => 'https://goo.gl/JDWFxe'}
document.addEventListener('DOMContentLoaded', function(){
let banner = document.getElementById('banner-wrapper');
let devLayer = banner.querySelector('.dev');
let delta = 0;
banner.addEventListener('mousemove', function(e){
delta = (e.clientX - window.innerWidth / 2) * 0.5;
devLayer.style.width = e.clientX + 500 + delta + 'px';
});
})
body {
margin: 0;
padding: 0;
.banner-wrapper {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.banner {
position: absolute;
overflow: hidden;
&.dev {
transform: skew(-30deg);
margin-left: -500px;
width: calc(50vw + 500px);
.banner-content {
transform: skew(30deg);
margin-left: 500px;
}
}
.banner-content {
height: 400px;
}
img {
width: 100vw;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.