Эффект прокрутки CSS сложнее, чем вы думаете

JavaScript CSS

Сегодня друг задал мне вопрос:

Текст не обернет и превышает контейнер, как прокрутить и отображать?

Например, на рисунке ниже некоторые элементы списка имеют краткий текст, а некоторые — длинный.

Требования:Надеюсь, что длинную часть текста можно будет прокручивать за счет анимации.

Моей первой реакцией было то, что это невозможно сделать с помощью чистого CSS.

Но немного подумав, я сделал это!

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

1. Как сделать так, чтобы текст переполнял контейнер?

Атрибут work-break используется для управления переносом текста.Здесь используется менее часто используемое значение keep-all, что означает, что строка может быть разбита только на пробелы половинной ширины или дефисы. Поскольку в тексте нет двух специальных символов, текст переполняется.

2. Как сделать так, чтобы ширина элемента зависела от содержимого?

Указанное значение ширины — это fit-content, новое значение свойства CSS3, указывающее, что ширина соответствует содержимому. Кроме fit-content есть max-content, min-content и fill-available. Если конкретное значение неясно, пожалуйста, погуглите.

3. Двигаться?

Здесь мы используем анимацию ключевых кадров для свертки. Ключевой кадр определяется следующим образом:

@keyframes move {
  0%{
    transform: translateX(0px);
  }
  100%{
    transform: translateX(-100%);
  }
}

Специфический эффект:

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

В настоящее время эффект все еще относительно грубый.Например, общее движение составляет 100%.Мы надеемся, что конец текста будет выровнен с правой стороной поля содержимого контейнера div:

Поскольку мы знаем ширину родительского элемента (в данном случае 100 пикселей), это легко сделать с помощью calc() :

@keyframes move {
  0%{
    transform: translateX(0px);
  }
  100%{
    transform: translateX(calc(-100% + 100px));
  }
}

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

4. Как сделать так, чтобы короткий текст не двигался?

В целом эффект прокрутки достигается, но нужды копателей в том, что длинный текст прокручивается, а короткий не двигается.

Честно говоря, меня давно смущало это требование. . .

Позже снимите бедро прямо: установите минимальную ширину p!

5. Последний шаг — оптимизировать анимацию!

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

@keyframes move {
  0%, 20%{
    transform: translateX(0px);
  }
  80%,100%{
    transform: translateX(calc(-100% + 100px));
  }
}

Первые 20% остаются прежними, как и нижние 20%:

Есть еще одна проблема, здесь время нашей анимации 3 с, мы можем установить время в соответствии с длиной текста. То есть более длинный текст занимает больше времени.

Но здесь я не знаю, что делать с CSS, я пробовал несколько раз, и в конце концов сдался и использовал небольшой кусок JS.

[...document.querySelectorAll('p')].forEach(p => {
	p.style.setProperty('--duration', p.offsetWidth / 100 + 's');
})

Что является переменными CSS (Пожалуйста, с ним, пожалуйста, студенты не знакомы), этикетка атрибута анимации также требует соответствующего P становится:

animation: move var(--duration) linear infinite;

Наконец, полный код и полный эффект см.код спрей.IO/старый демон/спрей/….


Эта статья закончилась.

Спасибо за прочтение!

🙏🙏🙏

Категории