Как сделать кастомный скролл css

Креативный скролл основаный на CSS анимации

Сейчас в моде cайты со скроллом на основе CSS анимации, которые реагируют на то, как далеко пользователь прокрутил страницу. В этой статье, мы покажем нашим читателям как легко и просто получить такой результат.

Скролл на основе CSS Animation

В первую очередь, нам нужен jQuery плагин под названием Skrollr. Мы включили его в отдельную JS папку. Как только плагин на месте, мы переходим к использованию HTML5 дата атрибутов для встраивания данных в зависимости от количества пикселей, которые пользователь прокрутил вниз страницы. Для анимации мы просто переходим к CSS свойствам, так что на 0 px у нас может быть top: -30%, и на 2000px мы установим top: 50%. Такое действие передвинет объект от верхней точки в центр страницы на расстоянии в 2000 пикселей.

1. Приступаем к работе

Скачайте источник к себе на рабочий стол и откройте index.html в редакторе кода. В хедере добавьте ссылку, приведенную ниже, которая будет должным образом отображать шрифт в дизайне. Взгляните на body секцию, и вы увидите как четыре комментария разделяют body на четыре раздела.

2. Задайте бэкграунд

Перед комментарием для первой секции добавьте код, как показано ниже. Мы используем атрибут данных для HTML5, который хранит положение скролла и то, что мы хотим чтобы произошло. На первых 1400px, ничего не будет происходить на дисплее, а затем мы изменим цвет фона, мы также повторим изменение цвета в других пунктах скролла.

3. Стилизуйте шрифт и бэкграунд

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

4. Добавьте контент

Наведите курсор вниз на первый раздел комментариев в body теге. Добавьте код после комментария, как показано ниже. Это отображает часы и позиционирует их на экране. От 1500 до 1700px вниз страницы непрозрачность часов исчезнет. Вы можете увидеть свойство непрозрачности в атрибуте данных.

5. Часовая стрелка

Часам необходимы стрелки, так что давайте начнем с добавления первой стрелки. Вы сможете увидеть в этом коде, что мы преобразовали свойство вращения (rotation property). Первой добавленой стрелкой будет часовая, так что вы увидите как она перемещается всего на 65 градусов, что составляет около 2,5 часов на циферблате!

6. Минутная стрелка

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

7. Стилизация часов

Теперь мы вернемся обратно в теги стилей в хедере документа. Мы будем стилизовать holder, который содержит графику часов. Здесь мы установим их размер и смещение на половину их ширины и высоты в полях, так чтобы мы контролировали централизированое расположения часов при их анимирование.

8. Стилизация стрелок

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

9. Добавьте текст

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

10. Стилизация текста

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

11. Добавление держащего DIV

Наш следующий фрагмент кода добавляет бокс (holder), который будет состоять из двух шестеренок. Он появится по правой стороне, когда пользователь прокрутил 1600 пикселей. И он соскальзывает влево после завершения анимации. На следующем этапе, когда мы добавим наши шестеренки, они должны быть помещены перед закрывающем DIV тегом, как показано ниже.

12. Добавление шестеренок

Теперь мы добавим две шестеренки внутри бокса, который мы создали в предыдущем шаге. Убедитесь в том, что код помещается внутрь кода закрывающего тега DIV из предыдущего шага. Шестеренки здесь вращаются с разной скоростью, чтобы отразить их размеры, и вращаются друг против друга.

13. Размещение первой шестеренки

Добавьте следующий код в раздел CSS в заголовке (head) документа. Этот код стилизует ширину и высоту первой шестеренки ​​и помещает его в оболочку.

14. Вторая шестеренка

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

15. Текст рядом с шестеренками

Переведите курсор обратно к body и поместите следующий код перед третьим комментарием в коде. Это добавит два текстовых поля на страницу, выше и ниже шестеренок на экране. Эти текстовые поля анимируют верхнюю и нижнюю части документа.

16. CSS для текста

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

17. Лампочка гори!

Переместите курсор на после третьего комментария в body документа. Добавьте код ниже, который “включит” лампочку как только исчезнут шестеренки с экрана. Лампочка “гаснет”, когда пользователь пролистает 5150px высоты страницы.

18. Поучительные слова

Непосредственно под последним кодом, мы добавляем код показанный здесь. Это добавит текст, который будет отображаться рядом с лампочкой. Этот текст появляется с верхней части, делает паузы, пока пользователь не прокрутил до 4950px, затем уходит по левой стороне страницы. ***Сохраните документ и обновите браузер, чтобы увидеть его в действии***

19. Финальный сегмент

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

20. Почти готово

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

21. Создание дома и заключительные слова

Ровно до того, как галочка будет анимироваться вниз по экрану на дом, нам нужно добавить какой-то текст рядом с домом, чтобы придать ему контекста. Добавьте код, показанный ниже:

Теперь вы можете обновить страницу и просмотреть свое творчество от начала до конца, во всей красе.

HTML CSS Как сделать кастомный скроллбар

Проблема возникла с изменением скроллбара для блока (div). Использовал псевдоклассы и свойства:

Но все без успешно. Почему-то chrome не принимает данные изменения, а ошибку не выводит. Мой код SCSS:

Для решения данного вопроса через -webkit я напрямую задал overflow-y:scroll стилизуемому блоку после чего стили применились.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css scss или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать — полосу прокрутки

Узнайте, как создать пользовательскую полосу прокрутки с помощью CSS.

Настраиваемые полосы прокрутки

Настраиваемые полосы прокрутки не поддерживаются в Firefox или IE/Edge.

Создание пользовательских полос прокрутки

Браузеры WebKit, такие как Chrome, Safari и Opera, поддерживают нестандартные ::-webkit-scrollbar псевдо-элементы, что позволяет нам изменять внешний вид полосы прокрутки браузера.

В следующем примере создается тонкая полоса прокрутки (10px Wide), которая имеет серый цвет дорожки/полосы и темно-серый (#888) дескриптор:

Пример

/* width */
::-webkit-scrollbar <
width: 10px;
>

/* Track */
::-webkit-scrollbar-track <
background: #f1f1f1;
>

/* Handle */
::-webkit-scrollbar-thumb <
background: #888;
>

/* Handle on hover */
::-webkit-scrollbar-thumb:hover <
background: #555;
>

В этом примере создается полоса прокрутки с тенью поля:

Пример

/* width */
::-webkit-scrollbar <
width: 20px;
>

/* Track */
::-webkit-scrollbar-track <
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
>

/* Handle */
::-webkit-scrollbar-thumb <
background: red;
border-radius: 10px;
>

Селекторы полосы прокрутки

Для браузеров WebKit можно использовать следующие псевдо-элементы для настройки полосы прокрутки браузера:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *