rotate rx

by Mariya Gnitetckaya

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.min.js'></script>

<p>use mouse scroll</p>
<div class="wrapper">
    <div class="block1 block"></div>
    <div class="block2 block"></div>
    <div class="block3 block"></div>
</div>

CSS

.block{
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: grey;
  width: 100px;
  height: 100px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.block1{background: red;}
.block2{background: blue;}
.block3{background: green;}

.wrapper{
  margin: 50px;
  position: relative;
}

JavaScript

const block1 = document.querySelector('.block1');
const block2 = document.querySelector('.block2');
const block3 = document.querySelector('.block3');
const scroll$ = Rx.Observable
	.fromEvent(window, 'mousewheel')
  .observeOn(Rx.Scheduler.animationFrame);

let count = 1;
scroll$.subscribe({
   next: (e) => {
     dest = (e.deltaY > 0) ? count++ : count--;
     count = (count > 360) ? 0 : count;
     console.log(count);
     setTimeout(() => block1.style.transform = 'rotate('+count*10+'deg)',0);
     setTimeout(() => block2.style.transform = 'rotate('+count*20+'deg)', 300);
     setTimeout(() => block3.style.transform = 'rotate('+count*30+'deg)', 500);
   }
});