Parallax Scrolling (начальный стиль) в эффектах отображения веб-сайта - PullRequest
Новая
       12

Parallax Scrolling (начальный стиль) в эффектах отображения веб-сайта

0 голосов
/ 28 февраля 2019

Я хочу создать веб-сайт на одну страницу, используя эффект параллакса, подобный этому: Эффект параллакса .Я провел все свои исследования, но не нашел ни одного примера, объясняющего, как это сделать, или как называется этот эффект параллакса.Мне действительно нужна помощь!

Этот эффект увеличивает страницу на свитке, как показано в GIF ниже.

enter image description here

Вот чтоУ меня так далеко: 

html {
  height: 600vh;
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  align-items: center;
  justify-content: end;
}

#parent {
  padding: 0;
  margin: 0;
  height: 600vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  perspective: 250px;
}

.page {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  text-align: center;
  box-shadow: inset 5px 5px red, inset -5px -5px red;
}

.page:nth-child(1) {
  transform: scale(1);
}

.page:nth-child(2) {
  bottom: -98%;
  transform: translate3d(0, 0, -500px);
}

.page:nth-child(3) {
  bottom: -196%;
  transform: translate3d(0, 0, -1000px);
}

.page:nth-child(4) {
  bottom: -294%;
  transform: translate3d(0, 0, -1500px);
}

.page:nth-child(5) {
  bottom: -392%;
  transform: translate3d(0, 0, -2000px);
}

.page:nth-child(6) {
  bottom: -490%;
  transform: translate3d(0, 0, -2500px);
}
<div id="parent">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
  <div class="page">Page 4</div>
  <div class="page">Page 5</div>
  <div class="page">Page 6</div>
</div>

Я застрял на анимации через часть JavaScript: при прокрутке тела страницы должны масштабироваться до максимума, а затем исчезать одна за другой, следующая страница page2 должно занять место page1 и так далее.Чтобы сделать прокрутку закрепленной, можно использовать scroll-snap-type: y;.

1 Ответ

0 голосов
/ 03 марта 2019

Я не совсем уверен, как бы вы назвали этот эффект прокрутки - масштабирование прокрутки страницы?- но это может быть достигнуто в современных браузерах с помощью преобразования масштаба CSS и небольшого JavaScript.

Стиль ваших разделов страницы

Я сложил свои разделы друг над другом, предоставив им положение absolute и исправление их CSS-координат.

HTML: 

<section style="background-color: red;">
    <h1>This is section number one!!</h1>
</section>

<section style="background-color: blue;">
    <h1>This is section number two!!</h1>
</section>

CSS: 

html, body {
    position: relative;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

section {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; right: 0;
    top: 0; bottom: 0;
    text-align: center;
}

Установите начальный масштаб каждого раздела.

Я хотел, чтобы каждый раздел был на треть меньше предыдущего.Это означало, что масштаб первого раздела будет 1;масштаб второй будет 1/3;третий будет 1/9, четвертый 1/27 и так далее.Поэтому, если n является индексом каждого раздела, разделы должны быть масштабированы на (1/3) ^ n.Масштабирование разделов довольно просто с помощью функции CSS3 .

JavaScript: 

document.addEventListener( 'DOMContentLoaded', function() {
    var sections = document.getElementsByTagName( 'section' ),
        i = 0;
    for ( i; i < sections.length; i++ ) {
        sections[i].style.transform = 'scale(' + Math.pow( 1/3, i ) + ')';
    }
} );

Изменение масштаба при прокрутке

Поскольку страница делаетчтобы не переполнить, нужно прослушать событие wheel .Мы также должны сохранить переменную, состоящую из того, как далеко мы прокрутили между минимумом (0) и максимумом (я выбрал 1000; вы можете изменить чувствительность прокрутки с большим или меньшим значением).Когда происходит событие wheel, мы находим, сколько пользователь прокрутил из свойства deltaY события, настраиваем наш счетчик прокрутки на столько и соответствующим образом масштабируем наши секции.

Чтобы вычислить, сколько мы должны масштабировать, это тольконемного сложнее, чем расчет начальных масштабов.Это все еще является степенью 1/3, хотя теперь мы должны вычесть шкалу, умноженную на общее количество секций, деленное на максимальное значение счетчика из нашего n .

. Вы также можетеиспользуйте requestAnimationFrame для более плавного опыта.

JavaScript: 

var counter = 0,
    counter_max = 1000,
    total = document.getElementsByTagName( 'section' ).length;

window.addEventListener( 'wheel', function( e ) {
    counter += e.deltaY;
    if ( counter > counter_max ) counter = counter_max;
    if ( counter < 0 ) counter = 0;
    requestAnimationFrame( applyScale );
} );

function applyScale() {
    var sections = document.getElementsByTagName( 'section' ),
        i = 0;
    for ( i; i < sections.length; i++ ) {
        var scale = Math.pow( 1/3, i - counter * total / counter_max );
        sections[i].style.transform = 'scale(' + scale + ')';
    }
}

Результат

Ручка, которая реализует вышеупомянутое, может быть найдена в https://codepen.io/jla-/pen/aMNgxy

Это должно быть полезным для начала.Добавление якорей вверху страницы потребует прослушивателя click, который анимирует переменную счетчика до соответствующего значения, вызывая функцию applyScale в каждом кадре анимации.

...