mousewheel smooth scroll с анимацией фигур

#javascript #jquery #scroll

Есть такой код:



var rellax = new Rellax('.rellax', {
  center: false,
  wrapper: null,
  round: true,
  vertical: true,
  horizontal: false
});


// TweenMax
$(function() {

  var $window = $(window); //Window object

  var scrollTime = 1.2; //Scroll time
  var scrollDistance = 170; //Distance. Use smaller value for shorter scroll and
greater value for longer scroll

  $window.on("mousewheel DOMMouseScroll", function(event) {

    event.preventDefault();

    var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta * scrollDistance);

    //console.log(finalScroll);

    $('.leaf>img').css({
      'transform': 'rotateX(0deg)'
    });
    //$('.leaf>img').removeClass('rotate');

    TweenMax.to($window, scrollTime, {
      scrollTo: {
        y: finalScroll,
        autoKill: true
      },
      ease: Power1.easeOut,
      autoKill: true,
      overwrite: 5,
      onComplete: function() {
        $('.leaf>img').css({
          'transform': 'rotateX(50deg)'
        });
        //$('.leaf').addClass('rotate');
      }
    });

  });

});

// MouseWheel
// if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
// window.onmousewheel = document.onmousewheel = wheel;

// function wheel(event) {
//     var delta = 0;
//     if (event.wheelDelta) delta = event.wheelDelta / 220;
//     else if (event.detail) delta = -event.detail / 3;

//     handle(delta);
//     if (event.preventDefault) event.preventDefault();
//     event.returnValue = false;
// }

// var goUp = true;
// var end = null;
// var interval = null;

// function handle(delta) {
// 	var animationInterval = 20; //lower is faster
//     var scrollSpeed = 20; //lower is faster

// 	if (end == null) {
//   	end = $(window).scrollTop();
//   }
//   end -= 20 * delta;
//   goUp = delta > 0;

//   if (interval == null) {
//     interval = setInterval(function () {
//       var scrollTop = $(window).scrollTop();
//       var step = Math.round((end - scrollTop) / scrollSpeed);
//       if (scrollTop <= 0 || 
//           scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
//           goUp && step > -1 || 
//           !goUp && step < 1 ) {
//         clearInterval(interval);
//         interval = null;
//         end = null;
//       }
//       $(window).scrollTop(scrollTop + step );
//     }, animationInterval);
//   }
// }
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 2rem;
  position: relative;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: all .5s ease-in-out;
}

main {
  padding: 2rem 3rem;
  text-align: center;
}

.leaf {
  display: block;
  user-select: none;
  font-size: 0;
  visibility: visible;
  opacity: 1;
  width: 20vw;
  -webkit-perspective: 500px;
  perspective: 500px;
}


/* .rotate {
  animation: rotate 1s ease-in-out;
}


@keyframes rotate {
  from { transform: rotateX(0deg); }
  50% {transform: rotateX(50deg);}
  to { transform: rotateX(0deg); }
} */

.l-2 {
  margin-left: 30%;
}

.l-3 {
  margin-left: 70%;
}

header {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: auto;
  margin-top: -10%;
  -webkit-perspective: 500px;
  perspective: 500px;
}








  
    
  

  
    
  

  
    
  



  
Smooth Scroll
  
Use your mousewheel to scroll

  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur natus,
facere nulla similique doloremque! Ullam voluptatem debitis esse. Deleniti quas, vel
ad consectetur facilis ab consequatur voluptate aut optio odit nisi reprehenderit sint,
ipsa
    incidunt itaque id voluptatum repudiandae alias esse velit quo voluptatibus recusandae
earum eligendi! Est, quae, aliquam?
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, earum ullam
hic id! Corporis cupiditate, voluptatibus eligendi suscipit ratione eos, sequi aperiam
voluptatem laboriosam! Debitis consectetur eum aperiam similique ullam dolore, labore
    porro, sequi fuga atque, tempora, est delectus veniam! Ad tempora, voluptas cupiditate
praesentium illo iure. Cupiditate, necessitatibus natus id eius nulla ab suscipit tempora
nisi itaque omnis quas, voluptates accusantium cum labore nam. Laboriosam
    alias doloremque quos adipisci pariatur ipsum doloribus et cupiditate omnis cum,
ducimus deleniti, sequi optio harum! Iste quas in, qui nobis voluptatibus quibusdam
doloremque culpa, numquam officia incidunt, quidem! Asperiores omnis amet incidunt
    eveniet.
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium animi sint
officiis, voluptate nam vitae inventore minus aliquid temporibus soluta natus, qui
repellendus ducimus eum veritatis neque impedit odio quibusdam.
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur natus,
facere nulla similique doloremque! Ullam voluptatem debitis esse. Deleniti quas, vel
ad consectetur facilis ab consequatur voluptate aut optio odit nisi reprehenderit sint,
ipsa
    incidunt itaque id voluptatum repudiandae alias esse velit quo voluptatibus recusandae
earum eligendi! Est, quae, aliquam?
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, earum ullam
hic id! Corporis cupiditate, voluptatibus eligendi suscipit ratione eos, sequi aperiam
voluptatem laboriosam! Debitis consectetur eum aperiam similique ullam dolore, labore
    porro, sequi fuga atque, tempora, est delectus veniam! Ad tempora, voluptas cupiditate
praesentium illo iure. Cupiditate, necessitatibus natus id eius nulla ab suscipit tempora
nisi itaque omnis quas, voluptates accusantium cum labore nam. Laboriosam
    alias doloremque quos adipisci pariatur ipsum doloribus et cupiditate omnis cum,
ducimus deleniti, sequi optio harum! Iste quas in, qui nobis voluptatibus quibusdam
doloremque culpa, numquam officia incidunt, quidem! Asperiores omnis amet incidunt
    eveniet.
  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium animi sint
officiis, voluptate nam vitae inventore minus aliquid temporibus soluta natus, qui
repellendus ducimus eum veritatis neque impedit odio quibusdam.
  





Страничка с плавным скроллом. Листочки с parallax эффектом. 

Для плавного скролла пытаюсь использовать или mousewheel или вот рабочий вариант
с tweenMax (пока не могу выбрать какой вариант лучше).

При параллаксе листочков динамически генерируется необходимый transform:translate3d(...). 

Хотелось бы чтобы при остановке скролла анимация поворота листочка начиналась как-то
только остановили скроллить колесико (в этот момент еще неторое время стр. скроллится
сама по анимации).

Пример brontidebg.com, все то же самое хотелось бы, но намного проще с jquery.

Вопрос:

Как начать анимацию листиков (поворот rotateX(...) сразу после окончания скролла
колесиком мыши, т.е. чтобы поворот фигуры совпадал с "доскролливанием" (по анимации)
стр.  ? Получается какое-нибудь событие за секунду до onComplete.
    

Ответы

Ответ 1

Получилось реализовать подобный эффект с помощью jquery.parallax-scroll



function elements () {
    $('.element1 img').css('opacity', 0).one('inview', function(isInView) {
        if (isInView) {$(this).addClass('animated fadeInRight delayp7');}
    });

    $('.element2 img').css('opacity', 0).one('inview', function(isInView) {
        if (isInView) {$(this).addClass('animated fadeInRight delayp8');}
    });
}

elements();


$(window).scroll(function () {
    var ww = $(window).width();
  
  elements();
});
img {
  max-width: 100%;
}

.element {
    position: absolute;
    left: 50%;
}

.element.element2 {
    width: 85px;
    margin-left: 34px;
    top: 54px;
  }

.element.element4 {
    width: 85px;
    margin-left: -154px;
    top: 24px;
  }

.element.element1 {
    width: 100px;
    margin-left: -69px;
    top: 72px;
}

section {
  position: relative;
  min-height: 1500px;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


.delayp7 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-duration: 1s;
}

.delayp8 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  -webkit-animation-duration: 1s;
}