плавная прокрутка колесика мыши с элементной анимацией - PullRequest
Новая
       20

плавная прокрутка колесика мыши с элементной анимацией

0 голосов
/ 13 ноября 2018

У меня есть код: 

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;
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.7.1/rellax.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

<header id="scene">

  <span data-rellax-speed="-2" data-rellax-percentage="0.5" class="rellax leaf l-1">
    <img src="https://pics.clipartpng.com/midle/Leaf_PNG_Clip_Art-1968.png" alt="" >
  </span>

  <span data-rellax-speed="-3" data-rellax-percentage="0.5" class="rellax leaf l-2">
    <img src="https://png2.kisspng.com/20180201/pye/kisspng-maple-leaf-clip-art-maple-leaf-5a72a608f0a8c5.3016083115174630489858.png" alt="" >
  </span>

  <span data-rellax-speed="-1" data-rellax-percentage="0.75" class="rellax leaf l-3">
    <img src="https://www.freeiconspng.com/uploads/green-leaf-png-9.png" alt="" >
  </span>

</header>
<main>
  <h1>Smooth Scroll</h1>
  <h2>Use your mousewheel to scroll</h2>

  <p>
    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?
  </p>
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <p>
      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?
    </p>
    <p>
      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.
    </p>
    <p>
      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.
    </p>
</main>

У меня есть страница с плавной прокруткой и элементом (отвод) с эффектом параллакса .

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

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

Мне бы хотелось, чтобы, когда прокрутка прекращалась, вращение листа начиналось как-то с остановки прокрутки колеса (в этот момент время страницы прокручивается само по себе с помощью анимации).

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

Вопрос:

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

...