daily pastebin goal
29%
SHARE
TWEET

Untitled

a guest Mar 19th, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. #banner-wrapper.banner-wrapper
  2.   .banner.design
  3.     .banner-content
  4.  
  5.   .banner.dev
  6.     .banner-content
  7.      
  8. body {
  9.   margin: 0;
  10.   padding: 0;
  11.  
  12.   .banner-wrapper {
  13.     position: relative;
  14.     width: 100%;
  15.     height: 400px;
  16.     overflow: hidden; background:red;
  17.   }
  18.  
  19.   .banner {
  20.     position: absolute;
  21.     overflow: hidden;
  22.  
  23.     &.dev {
  24.       margin-left: -500px;
  25.       width: calc(50vw + 500px);
  26.       .banner-content {
  27.         margin-left: 500px; background:black;
  28.       }
  29.     }
  30.     .banner-content {
  31.       height: 400px;
  32.     }
  33.     img {
  34.       width: 100vw;
  35.     }
  36.   }
  37. }
  38.      
  39. document.addEventListener('DOMContentLoaded', function(){
  40.     let banner = document.getElementById('banner-wrapper');
  41.     let devLayer = banner.querySelector('.dev');
  42.     let delta = 0;
  43.  
  44.     banner.addEventListener('mousemove', function(e){
  45.         delta = (e.clientX - window.innerWidth / 2) * 0.5;
  46.         devLayer.style.width = e.clientX + 500 + delta + 'px';
  47.     });
  48. })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top