Плюшкидля сайта
Главная » Статьи » Разное
Горизонтальная прокрутка
Горизонтальная прокрутка это горизонтальный блок с прокруткой на сайте, для отображения различного содержания.
Пример
Раздел: 1
Раздел: 2
Раздел: 3

Цветовые варианты:

Раздел: 1
Раздел: 2

classall-c0
Нажмите на нужный вам цвет, для изенения HTML кода

Для выбора расцветки добавим в тег: class="... "

  • Подходит для светлого и тёмного сайта

Подключение к сайту:


 <!-- Добавить в <head>..</head>: -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script><!-- Библиотека jQuery -->
 <link href="https://zam.usite.pro/db/publ/scrollGor/1-0-0/m.css" rel="stylesheet"><!-- Вид 'Меню' -->
 <script src="https://zam.usite.pro/db/publ/scrollGor/1-0-0/m.js" defer></script><!-- Мозг 'Меню' -->
► Исходники(css, js): github (m. - Сокращённый вариант, ok. - Подробный)

 <!-- Добавить в <body>..</body>: -->
 <div class="zScG">
   <div class="zScGr"><div>
     <div zscg>Раздел: 1</div><!-- Атрибут zscg="" определяет что это окно открыто! (Всегда на первом div) -->
     <div>Раздел: 2</div>
     <div>Раздел: 3</div>
   </div></div>
   <div class="zScGb">
     <button class="B-Ix-kr" disabled><p><s></s></p></button><!-- 1 --> <!-- Атрибут disabled отключает/затемняет! (Всегда на первом button) -->
     <button class="B-Ix-kr"><p><s></s></p></button><!-- 2 -->
     <button class="B-Ix-kr"><p><s></s></p></button><!-- 3 -->
     <div class="B-Ix-kr"><p><s></s></p></div><!-- Часть анимации -->
   </div>
 </div>
 
 <script>//Запускаем:
   document.addEventListener('DOMContentLoaded', () => {
     zScG.$();//Прокрутка разного материала по горизонтали
   });
 </script>
Полезная информация:
  • <div zscg="" Атрибут zsch определяет что это окно открыто! (Всегда на первом div).
  • <button disabled="" Атрибут disabled отключает/затемняет! (Всегда на первом button)
  • <script>zScG.$();</script> запуск
Для тёмного дизайна сайта, необходимо добавить class="temaT" 

 <body class="temaT">
Задать свой размер окна + button с текстом
Главная
Точка
Конец $


 <div class="zScG" style="width: 250px; margin: auto"><!-- width(Длинна) Задаём свой размер окна -->
   <div class="zScGr"><div>
     <div style="height: 50px; background: green;" zscg>Главная</div><!-- height(Высота) Задаём свой размер окна -->
     <div style="background: hotpink;">Точка</div>
     <div style="background: darkgoldenrod;">Конец $</div>
   </div></div>
   <div class="zScGb">
     <button class="B-Ix-kr" disabled><b>Главная</b></button><!-- Кнопка с текстом -->
     <button class="B-Ix-kr"><p><s></s></p></button><!-- Стандартная точка -->
     <button class="B-Ix-kr"><b>Конец $</b></button><!-- Текст -->
     <div class="B-Ix-kr"><p><s></s></p></div>
   </div>
 </div>
Категория: Разное | Добавил: zam (07.08.2025)
Просмотров: 45 | Рейтинг: 0.0/0
Всего комментариев: 0
Войдите:
avatar