Время исповеди: я читал о его преимуществах в производительности. scroll-timeline()Но когда я вижу впечатляющий сайт с прокруткой JavaScript, подобный этому, я задаюсь вопросом, настолько ли плоха производительность старой школы с прокруткой в основном потоке. Второй удар наступает, когда создатели этого сайта признаются, что они «дошли до предела», и что «мобиль технически работает, но теряет параллакс и обрезает композиции», вплоть до того, что они «выбрали гейт-телефон, чтобы сохранить первое впечатление». Другими словами: им не удалось заставить его работать на мобильных устройствах, и похоже, что производительность JavaScript может быть одним из виновников.
Создатель одного из моих любимых экспериментов с прокруткой, который также использует JavaScript и лучше всего работает на настольных компьютерах, сказал, что его раздел с завихрением текста «выглядел бы лучше, если бы он был реализован для всех». Характер Этого невероятно сложно добиться, используя ту же технику вместо каждого слова, но без астрономического влияния на производительность.
Вызов принят.
Возможно, он непреднамеренно создал реалистичный тест производительности для плавной анимации сотен элементов управления на основе прокрутки.
Это было нашей подсказкой, чтобы посмотреть, сможем ли мы создать аналогичный эффект, используя современные функции CSS, чтобы плавно закручивать каждый символ в текстовой строке при прокрутке пользователем вниз. Чтобы придать оригинальному тексту некоторую конкуренцию между братьями и сестрами CSS, давайте добавим новый sibling-index() Работает в цикле, хотя на момент написания статьи еще ожидает поддержки Firefox. Итак, в качестве альтернативы CodePen ниже, вы также можете посмотреть видео записи экрана.
Признание № 2: он использует некоторые скрипты.
Единственный JavaScript — разделить текст на один
const el = document.querySelector(".vortex");
el.innerHTML = el.innerHTML.replaceAll(/\s/g, '⠀');
new SplitText(".title", { type: "chars", charsClass: "char" }); SplitText Упомянутый здесь плагин взят из свободно доступной библиотеки GSAP. Плагин предназначен для автономного использования вне GSAP, что и происходит здесь. Он приятен и прост в использовании, а также заполняется. aria-label Таким образом, программы чтения с экрана могут видеть наш текст независимо от того, как мы его токенизируем. Одна из сложностей заключалась в том, что я хотел, чтобы каждый космический персонаж был отдельным.
SplitText вложу в себя
. If anyone knows a better way, I’d love to hear about it in the comments.
Now that we have each character living in its own
, we can implement the CSS to handle the spiral animation.
.vortex {
position: fixed;
left: 50%;
height: 100vh;
animation-name: vortex;
animation-duration: 20s;
animation-fill-mode: forwards;
animation-timeline: scroll();
.char {
--radius: calc(10vh - (7vh/sibling-count() * sibling-index()));
--rotation: calc((360deg * 3/sibling-count()) * sibling-index());
position: absolute !important;
top: 50%;
left: 50%;
transform: rotate(var(--rotation))
translateY(calc(-2.9 * var(--radius)))
scale(calc(.4 - (.25/(sibling-count()) * sibling-index())));
animation-name: fade-in;
animation-ranger-start: calc(90%/var(sibling-count()) * var(--sibling-index()));
animation-fill-mode: forwards;
animation-timeline: scroll();
}
}
Спираль и исчезающие элементы с использованием sibling-index() И sibling-count()
мы используем sibling-count И sibling-index При совместном использовании для расчета постепенного уменьшения нескольких атрибутов символов. sibling-index увеличивается по формуле:
propertyValue = startValue - ((reductionValue/totalCharacters) * characterIndex)
Первый символ начинается около максимального значения. Каждый следующий символ вычитает немного большую дробь, поэтому по мере продвижения символов внутрь свойства постепенно уменьшаются до выбранного целевого значения. Этот метод используется для определения масштаба, вращения и расстояния от центра.
Если бы целью было расположить буквы по кругу, а не по спирали, я бы использовал функции тригонометрии CSS, как показано здесь. Однако казалось, что проще вычислить спираль без триггера. Судя по всему, исходная версия JavaScript, вдохновившая меня на создание текстовой спирали CSS, даже не использовала триггеры. Анимация прокрутки относительно проста, поскольку она просто включает в себя масштабирование и вращение всего родительского элемента, чтобы создать иллюзию того, что зритель попал в вихрь.
Единственная анимация, применяемая к отдельным персонажам, — это fade-in который быстро задерживается с использованием другого варианта использования соотношения для каждого символа в строке sibling-index() К sibling-count(). В этом случае мы увеличиваем animation-range-start Чтобы уменьшить задержку перед исчезновением символов при прокрутке пользователем. Это напоминает печально известный эффект прокрутки до исчезновения, и это заставляет меня осознать, как часто мы обращаемся к JavaScript, потому что он позволяет нам основывать стиль на индексе элемента. Таким образом, многие эффекты JavaScript потенциально могут быть изменены одновременно с помощью CSS. sibling-index() Идет базовая линия. Пожалуйста, дайте мне знать в комментариях, можете ли вы придумать другие примеры эффектов JavaScript, которые мы можем воссоздать с помощью CSS. sibling-index().
