Матвей Земсков

Заметки веб-мастера

Воскресенье, 21 октября 2018 22:15

Индикаторы скролла и градиент, изменяющийся при скролле

Оцените материал
(0 голосов)

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

Сначала мы рассмотрим индикатор горизонтальной прокрутки (скролла), созданный исключительно с использованием CSS. В сети существует несколько аналогичных инструментов, правда все они созданы с использованием JavaScript. Один из таких инструментов - Bloomberg Article Scroll Indicator. Автору описываемого решения было интересно узнать, сможет ли он сделать индикатор прокрутки, как Bloomberg Article Scroll Indicator, только с помощью CSS. Выяснилось, что такое возможно. Правда пришлось использовать различные CSS-хаки, в частности, связанные с z-index и градиентами.

«Использование хаков не всегда является плохой практикой. — утверждает автор — Если вы можете понять, как работает представленный в решении CSS-код, как его изменить под свои нужды и он более приемлем для вас, чем JavaScript, то почему бы его ну использовать в своих проектах.»

Если вы решите воспользоваться этим инструментом имейте в виду, что при использовании отрицательного z-index возможен конфликт с другим CSS-кодом, использующим z-index.

Ознакомиться с работой горизонтального скролла, созданного только на CSS вы можете на codepen

Давайте теперь рассмотрим индикатор вертикального скролла, который можно расположить внутри какого-либо HTML-блока. Этот инструмент называется fakeScroll. Он является очень «легким» (7.7KB в обычном и 4.0KB в сжатом виде) и надежным скриптом для создания кастомного вертикального скролла. Несмотря на то, что кастомизация полосы прокрутки поддерживается CSS, к сожалению, работает не во всех браузерах (особенно в старых версиях). К тому же уровень настройки этих CSS-свойств не является достаточно гибким, чтобы обеспечить креативность или определенные особые потребности разработчика.

Пример разметки:

HTML

	<div class="foo">
		...
		...
		...
	</div>

JS-код для инициализации fakeScroll:

JavaScript

document.querySelector('.foo').fakeScroll();

Представленный выше HTML-код преобразуется в следующий вид:

HTML

	<div class="foo">
		<div class="fakeScroll__wrap">
			<div class="fakeScroll__content">
				...
				...
				...
			</div>
		</div>
		<div class="fakeScroll__bar"></div>
	</div>

Скрипт, вероятно, не будет работать в браузере IE без использования Babel и ES2015 полизаполнений (Polyfill).

И, наконец, третье решение, носящее чисто эстетический характер – фоновый градиент, изменяющийся при прокрутке страницы.

Автором этого решения является упомянутый в начале заметки создатель индикатора горизонтальной прокрутки. Кстати фоновый градиент сделан на основе его первого инструмента. Градиент работает следующим образом: верхний правый угол градиента изменяется, а нижний правый – остается тем же. Этот эффект достигается путем наложения 2 градиентов. Первый градиент располагается по всей высоте содержимого «сверху вниз». Он состоит из цветов, которые задаете вы. Второй градиент - от верхнего левого края до нижнего правого – это переход от прозрачного до сплошного цвета. Этот градиент привязан к размерам viewport экранов и размещен за текстом, аналогично, как в индикаторе прокрутки, описанном выше.

Для ознакомления с ним снова переходим на codepen

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

Прочитано 239 раз
Другие материалы в этой категории:
Изучаем область видимости переменных CSS - часть 2

Добавить комментарий


Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх