Как сделать такой паралакс?

Question

[pavlyk]

Недавно осваиваю веб поэтому вопрос может быть не очень корректный ,подскажите как сделать такой эффект паралакс https://cloudmagic.com/ или подскажите какую нибудь библиотеку.
Нашел несколько библиотек например pixelcog.github.io/parallax.js
Но ей я так понял такое не сделать!?
В частности :
1) Чтобы при единичном движении мыши вниз сразу выезжал целый блок
2)Элементы не уезжали вверх ,а плавно исчезли
3)Убрать стандартную полосу прокрутки справа
Заранее спасибо!

Answer 1

[Виталий Киренков]

alvarotrigo.com/fullPage

Он построен на этом плагине. Далее гуглите примеры использования этого плагина на гитхабе и т.п.

Comments

[pavlyk]

Похоже! А как вы это поняли что на этот плагине именно? А как то в коде не нашёл подключение fullPage.js

[Виталий Киренков]

pavlyk: Вы не нашли, я нашёл.

Answer 2

[Михаил Горячкин]

Вот вам простой пример чтобы посмотреть логику работы.
HTML:

<div class="wrapper">
  <section class="page page--one">
    
  </section>
  <section class="page page--two">
    
  </section>
  <section class="page page--free">
    
  </section>
</div>

CSS:

body, html {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
  
  [class*=page--] {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    transform: translateY(100%);
    transition: transform 2s;
    
    &:first-child {
      position: relative;
      transform: translateY(0);
    }
    
    &.active {
      transform: translateY(-100%);
    }
  }
  
  .page--one {
    background-color: red;
  }
  
  .page--two {
    background-color: green;
  }
  
  .page--free {
    background-color: blue;
  }
}

JS:

(function (w, d) {
  var blocks = d.querySelectorAll('.page'), 
      ln = blocks.length,
      index = 0, 
      stop = false, 
      direction,
      next,
      curr;
  
  $(window).on("mousewheel DOMMouseScroll", function(event) {
  	event.preventDefault();
    var evt = event.originalEvent ? event.originalEvent : event;
    if (!stop) {
    	stop = true;
        direction = evt.detail ? evt.detail*(-40) : evt.wheelDelta;
        if (direction < 0) {
            index + 1 < ln ? index++ : "";
  			next = blocks[index];
            next ? next.classList.add('active') : "";
        } else {
            curr = blocks[index];
            if (curr) {
        	curr.classList.remove('active');
        	index > 0 ? index-- : "";  
            }
        }
        setTimeout(function () {
            stop = false;
        }, 1000);
     }
  });
}(window, document));

Только не надо принимать, что так и должно быть, это всего лишь простой пример, чтобы уеснить технологию, он очень топорный и простой и написан за 15 минут.

Пример

Answer 3

[Kir]

1) Чтобы при единичном движении мыши вниз сразу выезжал целый блок
3)Убрать стандартную полосу прокрутки справа

Я бы присосался к событиям скрола мыши, кнопок вверх/вниз, page up/page down
Для поддержки тачскринов - тач события (слайд вверх, слайд вниз)
Все либы есть.
Соответственно тут не скролл будет а как бы карусель, поставленная "на попа"

ну а п.2) тут уже кодить надо.

Answer 4

[Константин Б.]

Тебе лучше обратиться сюда

freelansim.ru

или Fl.ru