Tek Sayfa Scroll(Yapımı)

Kaynak


  
    
      
        

      

    

    
      
        
          Skewed One Page Scroll

          Just scroll down

        

      

    

  

  
    
      
        
          Page 2

          Nothing to do here, continue scrolling.

        

      

    

    
      
        

      

    

  

  
    
      
        

      

    

    
      
        
          Page 3

          The end is near, I promise!

        

      

    

  

  
    
      
        
          Page 4

          Ok, ok, just one more scroll!

        

      

    

    
      
        

      

    

  

  
    
      
        

      

    

    
      
        
          Epic finale

          
            Feel free to check 
            my other pens and follow me on 
            Twitter

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
$openSans: 'Open Sans', Helvetica, Arial, sans-serif;
body {
  background: #15181A;
  font-family: $openSans;
}
 
.skw-pages {
  overflow: hidden;
  position: relative;
  height: 100vh;
}
 
$skewDeg: 18deg;
$magicVH: 32.4vh; // this number is magic and depends on skew angle
$scrollTime: 1s;
 
.skw-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
 
  &__half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100vh;
    transition: transform $scrollTime;
 
    &--left {
      left: 0;
      transform: translate3d(-$magicVH, 100%, 0);
        }
 
    &--right {
      left: 50%;
      transform: translate3d($magicVH, -100%, 0);
    }
 
    .skw-page.active & {
      transform: translate3d(0,0,0);
    }
  }
 
  &__skewed {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 140%;
    height: 100%;
    transform: skewX($skewDeg * -1);
    background: #000;
 
    .skw-page__half--left & {
      left: -40%;
    }
    .skw-page__half--right & {
      right: -40%;
    }
  }
 
  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 30%;
    color: #fff;
    transform: skewX($skewDeg);
    transition: transform $scrollTime, opacity $scrollTime;
    background-size: cover;
 
    .skw-page__half--left & {
      padding-left: 30%;
      padding-right: 30%;
      transform-origin: 100% 0;
    }
    .skw-page__half--right & {
      padding-left: 30%;
      padding-right: 30%;
      transform-origin: 0 100%;
    }
 
    .skw-page.inactive & {
      opacity: 0.5;
      transform: skewX($skewDeg) scale(0.95);
    }
  }
 
  &__heading {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
  }
 
  &__description {
    font-size: 18px;
    text-align: center;
  }
  
  &__link {
    color: #FFA0A0;
  }
 
  &-1 {
    .skw-page__half--left .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/mousover-img-1.jpg');
    }
    .skw-page__half--right .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
  }
  &-2 {
    .skw-page__half--left .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
    .skw-page__half--right .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-2.jpg');
    }
  }
  &-3 {
    .skw-page__half--left .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/mousover-img-2.jpg');
    }
    .skw-page__half--right .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
  }
  &-4 {
    .skw-page__half--left .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
    .skw-page__half--right .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg');
    }
  }
  &-5 {
    .skw-page__half--left .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg');
    }
    .skw-page__half--right .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
  }
}

$(document).ready(function() {
 
  var curPage = 1;
  var numOfPages = $(".skw-page").length;
  var animTime = 1000;
  var scrolling = false;
  var pgPrefix = ".skw-page-";
 
  function pagination() {
    scrolling = true;
 
    $(pgPrefix + curPage).removeClass("inactive").addClass("active");
    $(pgPrefix + (curPage - 1)).addClass("inactive");
    $(pgPrefix + (curPage + 1)).removeClass("active");
 
    setTimeout(function() {
      scrolling = false;
    }, animTime);
  };
 
  function navigateUp() {
    if (curPage === 1) return;
    curPage--;
    pagination();
  };
 
  function navigateDown() {
    if (curPage === numOfPages) return;
    curPage++;
    pagination();
  };
 
  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (scrolling) return;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else { 
      navigateDown();
    }
  });
 
  $(document).on("keydown", function(e) {
    if (scrolling) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });
 
});

Tek Sayfa Scroll(Yapımı)

Skewed One Page Scroll

Page 2

Page 3

Page 4

Epic finale

Üye Girişi Yap