Параллакс прокрутки? CSS это подпруга

Что такое параллакс прокрутки

Параллаксная прокрутка(Параллаксная прокрутка) означает перемещение многослойного фона с разной скоростью для формирования эффекта трехмерного движения, обеспечивающего очень хорошее визуальное восприятие. Как горячая тенденция в веб-дизайне, все больше и больше веб-сайтов используют эту технологию.

Вообще говоря, для достижения параллакса прокрутки требуется вспомогательный Javascript во внешнем интерфейсе. Конечно, на самом деле CSS также имеет хорошие возможности для достижения эффекта параллакса прокрутки. Давайте познакомимся с одним или двумя:

знать`background-attachment`

background-attachmentЭто относительно необычный атрибут, в основном этот атрибут не используется в написании деловых стилей. Но интересно само по себе.

background-attachment: если указаноbackground-image,Такbackground-attachmentОпределяет, фиксируется ли фон в области просмотра или прокручивается вместе с содержащим его блоком.

Это немного сложно понять только из определения, следуйте следующим демонстрациям, чтобы понятьbackground-attachmentЧто именно это значит:

`background-attachment: scroll`

scrollЭто ключевое слово указывает, что фон фиксируется относительно самого элемента, а не прокручивается вместе с его содержимым.

`background-attachment: local`

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

`background-attachment: fixed`

fixedЭто ключевое слово указывает, что фон фиксирован относительно окна просмотра. Даже если у элемента есть механизм прокрутки, фон не будет прокручиваться вместе с содержимым элемента.

Обратите внимание на scroll и fixed, один фиксируется относительно самого элемента, а другой фиксируется относительно области просмотра, что чем-то похожеpositionпозиционируетсяabsoluteиfixed.

Вы можете почувствовать различные эффекты следующих 3 различных значений:

CodePen Demo -- bg-attachment Demo

использовать`background-attachment: fixed`Реализовать параллакс прокрутки

Во-первых, мы используемbackground-attachment: fixedдля достижения параллакса прокрутки.fixedЭто ключевое слово указывает, что фон фиксирован относительно окна просмотра. Даже если у элемента есть механизм прокрутки, фон не будет прокручиваться вместе с содержимым элемента.

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

Мы используем смешанный макет графики и текста для достижения параллакса прокрутки.Структура HTML выглядит следующим образом:.g-wordпредставляет структуру контента,.g-imgПредставляет структуру фонового изображения:

<section class="g-word">Header</section>
<section class="g-img">IMG1</section>
<section class="g-word">Content1</section>
<section class="g-img">IMG2</section>
<section class="g-word">Content2</section>
<section class="g-img">IMG3</section>
<section class="g-word">Footer</section>

Ключ CSS:

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

Эффект следующий:

CodePen Demo -- https://codepen.io/Chokcoco/pen/JBaQoY

Хорошо? Как-то странно, почему так? Как и я, многие люди могут смутиться из-за этого эффекта, когда впервые столкнутся с этим атрибутом.

мы ставим верхbackground-attachment: fixedзакомментировать или изменить наbackground-attachment: local, а затем посмотрите на эффект:

CodePen Demo -- bg-attachment:local

На этот раз картинка прокручивается как обычно с полосой прокрутки, что, согласно здравому смыслу, соответствует мышлению нашего мозга.

Эффект параллакса прокрутки — это всего лишь эффект игры в карты, выходящий за рамки здравого смысла.

Когда страница прокручивается до места, где должно появиться изображение, устанавливаетсяbackground-attachment: fixedКартинка не будет продолжать следовать за прокруткой страницы и перемещаться вверх-вниз, а будет зафиксирована относительно окна просмотра.

Что ж, попробуем еще раз, если все.g-wordБлоки контента убраны, остались только все настройки.background-attachment: fixedЧто будет блоком фонового изображения?

HTML-код выглядит следующим образом:

<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

Эффект следующий:

CodePen Demo

В сочетании с этой гифкой, я думаю, это может быть правильноbackground-attachment: fixedЕсть более глубокое понимание, движется только вьюпорт, а фоновое изображение всегда фиксировано.

Подводя итог, это использование CSSbackground-attachment: fixedОдин из способов реализации параллакса прокрутки относительно прост. Конечно,background-attachment: fixedСам эффект полезен не только для достижения эффекта параллакса прокрутки, но и для достижения многих других интересных эффектов.Вот простой список:

`background-attachment: fixed`Реализовать эффект клика по картинке

Используя картинку, которую нужно зафиксировать относительно окна просмотра, можно получить множество интересных эффектов, например, следующие из этой статьиВодная волна CSS:

CodePen Demo -- bg-attachment:fixed Wave

Используйте фиксированную функцию изображения относительно окна просмотра, чтобы добиться эффекта кликнутой воды.

Вышеприведенный эффект немного ошибочен, и изображение значительно дрожит в процессе увеличения контейнера, чтобы стать больше. Конечно, эффект еще возможен.background-attachmentЕсть много интересных эффектов, которые можно использовать.

использовать`transform: translate3d`Реализовать параллакс прокрутки

Ближе к делу давайте представим еще один эффект параллакса прокрутки, реализованный с помощью CSS, с использованием CSS 3D.

Принцип таков:

Мы устанавливаем контейнерtransform-style: preserve-3dиperspective: xpx, то дочерние элементы в этом контейнере будут находиться в 3D пространстве,
Затем установите разные дочерние элементыtransform: translateZ(), в это время расстояние различных элементов от экрана (наших глаз) в направлении трехмерной оси Z также отличается
Прокрутите полосу прокрутки, потому что дочерние элементы установлены по-разномуtransform: translateZ(), затем они катятся вверх и вниз по расстояниюtranslateYОтносительный экран (наши глаза) тоже отличается, чем достигается эффект параллакса прокрутки.

оtransform-style: preserve-3dа такжеperspectiveЭта статья не будет расширена на много страниц.По умолчанию у читателей есть некоторое понимание.Не очень понятно.Вы можете сначала понять CSS 3D.

Представление основного кода:

<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">translateZ(-3)</div>
</div>

html {
    height: 100%;
    overflow: hidden;
}

body {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.g-container {
    height: 150%;

    .section-one {
        transform: translateZ(-1px);
    }
    .section-two {
        transform: translateZ(-2px);
    }
    .section-three {
        transform: translateZ(-3px);
    }
}

Сводка — это настройки родительского элементаtransform-style: preserve-3dиperspective: 1px, дочерние элементы задают разныеtransform: translateZ, прокручиваем полосу прокрутки, эффект следующий:

CodePen Demo -- CSS 3D parallax

Очевидно, что при прокрутке полосы прокрутки степень смещения различных подэлементов визуально отличается, и достигается так называемый эффект параллакса прокрутки.

Прокрутка параллакса текста с эффектом тени/призрака

Итак, используя эффект параллакса в translate3d, какие забавные эффекты вы можете получить? Интересен следующий эффект тени/призрака при прокрутке текста параллакса:

CodePen Demo -- CSS translate3d Parallax

Конечно, регулируя параметры (perspective: ?pxа такжеtransform: translateZ(-?px);), и есть другие интересные эффекты:

CodePen Demo -- CSS translate3d Parallax 2

Похоже на спецэффекты ЛОГОТИПА производителя фильма открытия :joy: .

Мастер ведет дверь, а практика индивидуальна.Как сделать лучше и интереснее эффекты еще требует времени на изучение и обдумывание.Здесь я просто подбрасываю некоторые идеи,надеясь увидеть больше Хороших эффектов.

Наконец

Спасибо за ваше терпение, чтобы прочитать. Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Что такое параллакс прокрутки

знатьbackground-attachment

background-attachment: scroll

background-attachment: local

background-attachment: fixed

использоватьbackground-attachment: fixedРеализовать параллакс прокрутки

background-attachment: fixedРеализовать эффект клика по картинке

использоватьtransform: translate3dРеализовать параллакс прокрутки