gsap+ScrollTrigger — создавайте потрясающие визуальные эффекты прокрутки!
gsap+ScrollTrigger — создавайте потрясающие визуальные эффекты прокрутки!

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

код

код Язык:javascript
копировать
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>параллаксная прокрутка</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section>
    <h1>Good morning!</h1>
</section>
<section>
    <h1>Good afternoon!</h1>
</section>
<section>
    <h1>Good evening!</h1>
</section>
<section>
    <h1>How are you?</h1>
</section>
<section>
    <h1>Nice to meet you.</h1>
</section>
<section>
    <h1>It's nice to see you.</h1>
</section>
<section>
    <h1>Long time no see.</h1>
</section>
<section>
    <h1>How's it going?</h1>
</section>
<script src="gsap.min.js"></script>
<script src="ScrollTrigger.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

кодscss

код Язык:javascript
копировать
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section{
  width: 100%;
  height: 100vh;
  display: flex;
  background-size: cover;
  background-position: center;
}

@for $i from 1 through 8 {
  section:nth-child(#{$i}){
     background-image: url('./imgs/image#{$i}.jpg');
  }
}

h1{
  font-size: 120px;
  margin: auto;
  color: rgb(207, 23, 23);
}

кодcss

код Язык:javascript
копировать
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  width: 100%;
  height: 100vh;
  display: flex;
  background-size: cover;
  background-position: center;
}

section:nth-child(1) {
  background-image: url("./imgs/image1.jpg");
}

section:nth-child(2) {
  background-image: url("./imgs/image2.jpg");
}

section:nth-child(3) {
  background-image: url("./imgs/image3.jpg");
}

section:nth-child(4) {
  background-image: url("./imgs/image4.jpg");
}

section:nth-child(5) {
  background-image: url("./imgs/image5.jpg");
}

section:nth-child(6) {
  background-image: url("./imgs/image6.jpg");
}

section:nth-child(7) {
  background-image: url("./imgs/image7.jpg");
}

section:nth-child(8) {
  background-image: url("./imgs/image8.jpg");
}

h1 {
  font-size: 120px;
  margin: auto;
  color: rgb(207, 23, 23);
}

/*# sourceMappingURL=style.css.map */

кодjs

код Язык:javascript
копировать
const sections = document.querySelectorAll('section');
gsap.registerPlugin(ScrollTrigger); // зарегистрироватьсяплагин
sections.forEach(section => {
    gsap.fromTo(section,
        {backgroundPositionY: `-${window.innerHeight / 2}px`},
        {
            backgroundPositionY: `${window.innerHeight / 2}px`,
            ease: 'none',
            scrollTrigger: {
                trigger: section,
                scrub: true
            }
        });

});

очки знаний jscode

  • document.querySelectorAll('section')：Используется для получения всех элементов на странице <section> элемент.
  • gsap.registerPlugin(ScrollTrigger)：зарегистрироваться ScrollTrigger подключите, чтобы использовать его функциональность в последующем коде.
  • В цикле передать gsap.fromTo метод для каждого <section> Элементы заданы анимацией.
    • Определяет начальное положение фона backgroundPositionY。
    • Определяет конечное положение фона backgroundPositionY。
    • ease: 'none' Указывает на использование эффектов линейного замедления.
    • scrollTrigger Установите триггерный элемент в объекте на текущий цикл. <section> элементы и scrub: true Указывает, что анимация следует за прокруткой в ​​реальном времени.
boy illustration
Углубленный анализ переполнения памяти CUDA: OutOfMemoryError: CUDA не хватает памяти. Попыталась выделить 3,21 Ги Б (GPU 0; всего 8,00 Ги Б).
boy illustration
[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание. Повторная попытка с помощью файла (графическое руководство).
boy illustration
Прочитайте нейросетевую модель Трансформера в одной статье
boy illustration
.ART Теплые зимние предложения уже открыты
boy illustration
Сравнительная таблица описания кодов ошибок Amap
boy illustration
Уведомление о последних правилах Points Mall в декабре 2022 года.
boy illustration
Даже новички могут быстро приступить к работе с легким сервером приложений.
boy illustration
Взгляд на RSAC 2024｜Защита конфиденциальности в эпоху больших моделей
boy illustration
Вы используете ИИ каждый день и до сих пор не знаете, как ИИ дает обратную связь? Одна статья для понимания реализации в коде Python общих функций потерь генеративных моделей + анализ принципов расчета.
boy illustration
Используйте (внутренний) почтовый ящик для образовательных учреждений, чтобы использовать Microsoft Family Bucket (1T дискового пространства на одном диске и версию Office 365 для образовательных учреждений)
boy illustration
Руководство по началу работы с оперативным проектом (7) Практическое сочетание оперативного письма — оперативного письма на основе интеллектуальной системы вопросов и ответов службы поддержки клиентов
boy illustration
[docker] Версия сервера «Чтение 3» — создайте свою собственную программу чтения веб-текста
boy illustration
Обзор Cloud-init и этапы создания в рамках PVE
boy illustration
Корпоративные пользователи используют пакет регистрационных ресурсов для регистрации ICP для веб-сайта и активации оплаты WeChat H5 (с кодом платежного узла версии API V3)
boy illustration
Подробное объяснение таких показателей производительности с высоким уровнем параллелизма, как QPS, TPS, RT и пропускная способность.
boy illustration
Удачи в конкурсе Python Essay Challenge, станьте первым, кто испытает новую функцию сообщества [Запускать блоки кода онлайн] и выиграйте множество изысканных подарков!
boy illustration
[Техническая посадка травы] Кровавая рвота и отделка позволяют вам необычным образом ощипывать гусиные перья! Не распространяйте информацию! ! !
boy illustration
[Официальное ограниченное по времени мероприятие] Сейчас ноябрь, напишите и получите приз
boy illustration
Прочтите это в одной статье: Учебник для няни по созданию сервера Huanshou Parlu на базе CVM-сервера.
boy illustration
Cloud Native | Что такое CRD (настраиваемые определения ресурсов) в K8s?
boy illustration
Как использовать Cloudflare CDN для настройки узла (CF самостоятельно выбирает IP) Гонконг, Китай/Азия узел/сводка и рекомендации внутреннего высокоскоростного IP-сегмента
boy illustration
Дополнительные правила вознаграждения амбассадоров акции в марте 2023 г.
boy illustration
Можно ли открыть частный сервер Phantom Beast Palu одним щелчком мыши? Супер простой урок для начинающих! (Прилагается метод обновления сервера)
boy illustration
[Играйте с Phantom Beast Palu] Обновите игровой сервер Phantom Beast Pallu одним щелчком мыши
boy illustration
Maotouhu делится: последний доступный внутри страны адрес склада исходного образа Docker 2024 года (обновлено 1 декабря)
boy illustration
Кодирование Base64 в MultipartFile
boy illustration
5 точек расширения SpringBoot, супер практично!
boy illustration
Глубокое понимание сопоставления индексов Elasticsearch.
boy illustration
15 рекомендуемых платформ разработки с нулевым кодом корпоративного уровня. Всегда найдется та, которая вам понравится.
boy illustration
Аннотация EasyExcel позволяет экспортировать с сохранением двух десятичных знаков.
©