Change divs (hide/reveal) on scroll

Question

I need some help.

I have this:

<div class="slides">

  <div class="slide 1">
     Content here.
  </div>

  <div class="slide 2">
     Content Here.
  </div>

  <div class="slide 3">
     Content Here.
  </div>

</div>

I need to swap div 1 with div 2 on mousescroll down or with slide 3 on mousescroll up, hiding an active div and revealing the neighbour one with a transition effect.

I'm not fluent with javascript, is there a simple solution?

Answer 1

In case someone searches for a fulfillment for a similar need:

fullPage.js does the job and they have a lean build that doesn't require jquery (in downloadable files, 5kb gzipped).

I don't care about if it's considered an answer or not, it just works and helped me a lot. I will be grateful to read more on subject and get more educated.