Параллакс эффект на основе плагина Rellax
В данной статье рассмотрим вариант параллакс эффекта, с помощью плагина Rellax
Если смотрите статью не на мобильных устройствах, можно прокрутить статью ниже и увидеть этот эффект параллакса
Подключаем Rellax
На GitHub странице плагина https://github.com/dixonandmoe/rellax скачиваем актуальный rellax.min.js и кладем его в /js папку проекта
Подключаем в HTML перед основным main.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Rellax</title>
<link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?Roboto:wght@300;400&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="section">
<div class="shape"></div> <!-- элемент, который будет частью параллакс эффекта -->
</div>
<script src="js/rellax.min.js"></script> <!-- подключаем здесь -->
<script src="js/main.js"></script>
</body>
</html>
Затем в main.js инициализируем плагин
document.addEventListener('DOMContentLoaded', () => {
var rellax = new Rellax('.rellax', {
center: true // данное свойство отвечает за корректное позиционирование элементов параллакса
});
});
Элементам, которые мы хотим замедлить или ускорить при прокрутке, добавляем класс rellax и data-атрибут data-rellax-speed="-10" - чем меньше значение, тем элемент прокручивается медленней, чем значение больше, тем быстрее прокручивается элемент
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Rellax</title>
<link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?Roboto:wght@300;400&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="section">
<div class="shape rellax" data-rellax-speed="-10"></div> <!-- добавляем класс rellax и дата-атрибут -->
</div>
<script src="js/rellax.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Этого достаточно, чтобы параллакс эффект уже заработал
Для сортировки элементов по оси Z можно использовать data-rellax-zindex="5" - чем выше значение, тем визуально ближе расположен элемент
Подробнее о возможностях плагина можно посмотреть в официальной документации - https://dixonandmoe.com/rellax/
Рассмотрим полноценный пример
Чтобы статья была интересней и полезней, для создания различных фигур, которые будут элементами параллакс эффекта, будем использовать CSS-переменные
Для начала опишем стили - для фигуры задаем переменные и используем их для соответствущих свойств, а также зададим переменную для секции, которую будем использовать для назначения фона
Чуть подробнее про CSS-переменные в статье CSS-переменные: как сделать темную тему
body {
font-family: 'Roboto', sans-serif;
background: #fff;
position: relative;
}
.section {
--bg: #fff;
padding: 64px;
background-color: var(--bg);
text-align: justify;
position: relative;
overflow: hidden;
}
.container {
max-width: 640px;
margin: 0 auto;
z-index: 1;
position: relative;
}
.title {
font-size: 48px;
font-weight: bold;
margin-bottom: 48px;
text-align: center;
}
/* Задаем переменные и используем их для соответствущих свойств */
.shape {
--size: 100px;
--left: auto;
--right: auto;
--top: auto;
--bottom: auto;
--bg-color: #fff;
--radius: 100%;
--opacity: 1;
position: absolute;
background-color: var(--bg-color);
width: var(--size);
height: var(--size);
left: var(--left);
right: var(--right);
top: var(--top);
bottom: var(--bottom);
border-radius: var(--radius);
opacity: var(--opacity);
}
Теперь для кастомизации фигур будем задавать разные значения переменных в инлайн стилях (если какой-либо переменной не задано значение, берётся значение по-умолчанию из CSS стилей)
Для секций также задаем фон меняя значение переменной
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Rellax</title>
<link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?Roboto:wght@300;400&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="section" style="--bg: #fbc6a4;">
<div class="shape rellax" style="--size: 500px; --left: 15%; --top: 20%; --bg-color: #ffb26b; --radius:100px;" data-rellax-speed="-10"></div>
<div class="shape rellax" style="--size: 300px; --left: 10%; --top: 50%; --bg-color: #f55c47; --radius:48px;" data-rellax-speed="-6"></div>
<div class="shape rellax" style="--size: 300px; --right: 20%; --top: 40%; --bg-color: #4aa96c" data-rellax-speed="2"></div>
<div class="shape rellax" style="--size: 50px; --right: 15%; --top: 50%; --bg-color: #ff7b54" data-rellax-speed="12"></div>
<div class="shape rellax" style="--size: 30px; --right: 30%; --top: 60%; --bg-color: #ff7b54" data-rellax-speed="8"></div>
<div class="shape rellax" style="--size: 70px; --right: 25%; --top: 40%; --bg-color: #ff7b54" data-rellax-speed="4"></div>
<div class="container">
<div class="title">Lorem ipsum dolor sit.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore neque eveniet rem aperiam veritatis est tempora itaque accusantium nulla reiciendis. Nesciunt, ratione itaque excepturi totam esse neque voluptate sint quo necessitatibus eius adipisci, maxime natus possimus fugit, minima quasi facere eligendi tempore sequi odit optio delectus dolor, libero autem! Rerum doloribus est id vel, quo perferendis veritatis in iste ab cupiditate maiores, laudantium provident nesciunt temporibus eligendi voluptate numquam ut repudiandae eius sint omnis! Nam, a. Assumenda repudiandae odit magnam! Quidem magni sunt debitis, magnam deserunt ipsa quam modi amet, illo blanditiis officia vero quisquam nulla rerum nostrum aspernatur molestias id incidunt dolores aliquam qui error expedita quod. Eum repellat porro voluptates et reiciendis numquam quo, eaque ratione ducimus maiores! Tempore corporis, in nesciunt! Consequuntur maiores sequi harum illo praesentium vitae quia incidunt. Blanditiis, perspiciatis dolor ex unde ipsam iusto eaque aut voluptates illum quisquam et error enim soluta, earum dignissimos explicabo iure veniam aliquam labore suscipit expedita. Ab, sapiente repellat dicta sed hic esse reprehenderit assumenda eveniet iste, quae animi id autem amet incidunt dignissimos sunt minus modi repudiandae doloribus voluptatum eum, pariatur itaque, illum culpa. Inventore animi temporibus fuga nemo maxime officiis, id vel illo facilis impedit numquam voluptates officia repellendus, architecto quisquam fugiat, ab quos. Perferendis quidem quo similique ab hic non reiciendis assumenda delectus, numquam, architecto ducimus dolores, laboriosam temporibus facere voluptas praesentium voluptatem eum tempore asperiores! Recusandae minus atque molestiae vitae numquam enim nostrum temporibus minima quidem dolorem unde earum, necessitatibus sunt fugit nulla nihil vero excepturi illum eos, id aut aliquid. Quas sunt quasi vero amet alias, facilis culpa voluptate exercitationem nemo velit corrupti quidem explicabo eos iusto! At autem blanditiis, enim tenetur harum rem! Cum temporibus eaque fugiat culpa distinctio eius assumenda veniam quia odio molestias, inventore eligendi consequatur maxime, ipsum quidem nihil similique voluptate accusamus itaque consectetur sapiente numquam enim eveniet? Velit voluptates, voluptate, tempore ab labore sit accusamus dolorem iste ea harum dolore veniam aliquid vero eum non repellendus debitis pariatur eaque dolores, id illo neque nemo eos atque ratione! Id iure impedit similique, amet officia ex blanditiis odio ducimus labore doloribus! Nemo culpa corporis sed voluptatem non pariatur ducimus ex quaerat accusantium, debitis aperiam soluta ut quae explicabo perspiciatis, rerum officiis ipsa, laudantium commodi. Dolores facilis, magnam a necessitatibus quidem adipisci quae suscipit beatae eveniet eos porro consequatur maxime autem placeat hic fugit praesentium esse nihil sed qui, neque repudiandae voluptates totam. Nisi, nam! Aut dolore numquam vel voluptatibus eos provident rerum est, molestiae minus necessitatibus expedita voluptatem, cumque modi cupiditate quae. Suscipit unde vitae obcaecati consectetur eligendi quo dolor odio sint, dolore necessitatibus dolores, ducimus voluptate dicta delectus voluptatem beatae velit rerum placeat soluta et fugit, id explicabo! Nam tempora nobis beatae odit enim pariatur ut corrupti, voluptatem fuga quo rerum, facilis culpa consectetur nihil voluptatibus repellendus ratione. Quis esse eveniet, quas quo voluptate accusantium. Veritatis earum laboriosam fugiat dicta sed doloribus, amet nostrum eveniet modi quam error, distinctio maxime pariatur ab quis illo voluptas, soluta incidunt voluptatem aliquam!</div>
</div>
</div>
<div class="section" style="--bg: #f4a9a8;">
<div class="shape rellax" style="--size: 500px; --right: 15%; --top: 0%; --bg-color: #ffb26b; --radius:100px;" data-rellax-speed="-5"></div>
<div class="shape rellax" style="--size: 200px; --right: 10%; --top: 50%; --bg-color: #f55c47; --radius:48px;" data-rellax-speed="8"></div>
<div class="shape rellax" style="--size: 300px; --left: 20%; --top: 60%; --bg-color: #4aa96c" data-rellax-speed="6"></div>
<div class="shape rellax" style="--size: 50px; --left: 30%; --top: 100%; --bg-color: #ff7b54" data-rellax-speed="10"></div>
<div class="container">
<div class="title">Dolor sit.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe fuga sapiente ducimus illo nihil consequuntur placeat, perspiciatis reprehenderit minus rerum, nisi ullam quae eveniet modi veritatis et ab error adipisci mollitia eos iusto temporibus omnis quasi quaerat. Fugiat quod architecto minus vero aut ullam amet expedita, soluta impedit consequatur beatae nesciunt provident placeat officiis consequuntur quam dolores iusto quas. Ullam quibusdam quos repellat tempore hic animi reiciendis cupiditate consectetur accusamus adipisci reprehenderit recusandae sunt dignissimos eum, maiores dolore tenetur, id quaerat corporis libero culpa. Quo consequatur laudantium maxime omnis explicabo et recusandae officia excepturi, quas, quidem, cumque alias porro commodi consequuntur unde, obcaecati dolore animi? Officia necessitatibus enim at nostrum, quam alias. Voluptate, nihil, ratione! Cum, veniam, numquam? Commodi minima, quasi, saepe iure ab eaque odit nam quidem officiis dicta, at nihil optio, eius accusamus. Consequatur optio, repellat iste officia porro! Odio, eligendi repudiandae. Sit aliquid odio amet, minima voluptates culpa, odit, hic minus labore neque ea suscipit? Earum ea libero iste adipisci, sequi. At alias quasi sit, mollitia consequuntur, odio rem hic soluta, eligendi esse autem. Nisi vitae debitis beatae suscipit repellat a quis ut et, molestiae nemo repudiandae unde commodi possimus fugiat minus asperiores at? In aliquam iste culpa, earum dignissimos, quibusdam officiis reiciendis praesentium at quia sint ipsam, iusto eos atque fuga id ullam nihil nisi beatae repellat rerum voluptate vel autem? Doloremque aperiam perferendis quibusdam, dolor quaerat dolores voluptatum voluptatibus eius, recusandae iure doloribus quisquam odio repudiandae magnam. Consectetur expedita laboriosam animi asperiores repellendus molestias optio, error quia nostrum voluptatum, praesentium enim, a magni aliquam ea nihil cum ex. Inventore quasi, enim et nesciunt placeat rem porro maiores nostrum corrupti in magnam quod necessitatibus totam dignissimos magni sequi, molestiae nulla repellat beatae consequatur voluptatibus velit impedit unde sunt! Fuga ipsa veritatis non voluptate tempore deserunt, minima porro error iste maxime inventore reprehenderit quo quos similique, perspiciatis quis magnam quod. Eos, iste, soluta? Asperiores quae excepturi accusantium porro incidunt eum quam blanditiis? Dolorem consequatur perspiciatis omnis, quasi, dolor quam, illo sint suscipit veniam provident, harum dignissimos! Quis aut, obcaecati praesentium quod, magni consequatur a, eum ipsam quaerat deleniti id odit itaque fuga repellat accusamus similique nisi dolore officia modi atque odio temporibus inventore est? Maxime quidem labore temporibus molestias, commodi sequi corporis perferendis accusamus repellendus, iure architecto quae enim fuga reiciendis ipsam ex necessitatibus ullam. Neque voluptatum quidem aut repellendus temporibus, obcaecati dolores distinctio consectetur eum nisi id possimus. Ex ad facilis, corporis aperiam dignissimos aliquam, cumque. Odit adipisci enim excepturi ut distinctio consequatur eum fugit! Cumque praesentium obcaecati, voluptate dolores, nihil distinctio rem consequuntur natus, tempora numquam porro error eius illum nobis laboriosam iure velit dolor nostrum doloribus nemo est placeat voluptatum. Reiciendis a asperiores, architecto temporibus, deleniti magnam fuga quibusdam voluptatibus totam nulla, consequatur quasi autem ipsa sunt. Maiores veniam dolorum id alias quisquam voluptate ducimus doloribus a quia cum vel porro soluta itaque maxime ab facere velit ipsa ratione, odit quae quam, quaerat est. Vel, quibusdam dolor animi reprehenderit minima quisquam voluptate fuga.</div>
</div>
</div>
<div class="section" style="--bg: #ce97b0;">
<div class="shape rellax" style="--size: 300px; --left: 5%; --top: 60%; --bg-color: #4aa96c" data-rellax-speed="8"></div>
<div class="shape rellax" style="--size: 500px; --right: 15%; --top: 70%; --bg-color: #ffb26b; --radius:100px;" data-rellax-speed="-5"></div>
<div class="shape rellax" style="--size: 70px; --left: 30%; --top: 50%; --bg-color: #ff7b54" data-rellax-speed="5"></div>
<div class="shape rellax" style="--size: 400px; --right: 10%; --top: 50%; --bg-color: #f55c47; --radius:48px;" data-rellax-speed="2"></div>
<div class="container">
<div class="title">Sit.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe fuga sapiente ducimus illo nihil consequuntur placeat, perspiciatis reprehenderit minus rerum, nisi ullam quae eveniet modi veritatis et ab error adipisci mollitia eos iusto temporibus omnis quasi quaerat. Fugiat quod architecto minus vero aut ullam amet expedita, soluta impedit consequatur beatae nesciunt provident placeat officiis consequuntur quam dolores iusto quas. Ullam quibusdam quos repellat tempore hic animi reiciendis cupiditate consectetur accusamus adipisci reprehenderit recusandae sunt dignissimos eum, maiores dolore tenetur, id quaerat corporis libero culpa. Quo consequatur laudantium maxime omnis explicabo et recusandae officia excepturi, quas, quidem, cumque alias porro commodi consequuntur unde, obcaecati dolore animi? Officia necessitatibus enim at nostrum, quam alias. Voluptate, nihil, ratione! Cum, veniam, numquam? Commodi minima, quasi, saepe iure ab eaque odit nam quidem officiis dicta, at nihil optio, eius accusamus. Consequatur optio, repellat iste officia porro! Odio, eligendi repudiandae. Sit aliquid odio amet, minima voluptates culpa, odit, hic minus labore neque ea suscipit? Earum ea libero iste adipisci, sequi. At alias quasi sit, mollitia consequuntur, odio rem hic soluta, eligendi esse autem. Nisi vitae debitis beatae suscipit repellat a quis ut et, molestiae nemo repudiandae unde commodi possimus fugiat minus asperiores at? In aliquam iste culpa, earum dignissimos, quibusdam officiis reiciendis praesentium at quia sint ipsam, iusto eos atque fuga id ullam nihil nisi beatae repellat rerum voluptate vel autem? Doloremque aperiam perferendis quibusdam, dolor quaerat dolores voluptatum voluptatibus eius, recusandae iure doloribus quisquam odio repudiandae magnam. Consectetur expedita laboriosam animi asperiores repellendus molestias optio, error quia nostrum voluptatum, praesentium enim, a magni aliquam ea nihil cum ex. Inventore quasi, enim et nesciunt placeat rem porro maiores nostrum corrupti in magnam quod necessitatibus totam dignissimos magni sequi, molestiae nulla repellat beatae consequatur voluptatibus velit impedit unde sunt! Fuga ipsa veritatis non voluptate tempore deserunt, minima porro error iste maxime inventore reprehenderit quo quos similique, perspiciatis quis magnam quod. Eos, iste, soluta? Asperiores quae excepturi accusantium porro incidunt eum quam blanditiis? Dolorem consequatur perspiciatis omnis, quasi, dolor quam, illo sint suscipit veniam provident, harum dignissimos! Quis aut, obcaecati praesentium quod, magni consequatur a, eum ipsam quaerat deleniti id odit itaque fuga repellat accusamus similique nisi dolore officia modi atque odio temporibus inventore est? Maxime quidem labore temporibus molestias, commodi sequi corporis perferendis accusamus repellendus, iure architecto quae enim fuga reiciendis ipsam ex necessitatibus ullam. Neque voluptatum quidem aut repellendus temporibus, obcaecati dolores distinctio consectetur eum nisi id possimus. Ex ad facilis, corporis aperiam dignissimos aliquam, cumque. Odit adipisci enim excepturi ut distinctio consequatur eum fugit! Cumque praesentium obcaecati, voluptate dolores, nihil distinctio rem consequuntur natus, tempora numquam porro error eius illum nobis laboriosam iure velit dolor nostrum doloribus nemo est placeat voluptatum. Reiciendis a asperiores, architecto temporibus, deleniti magnam fuga quibusdam voluptatibus totam nulla, consequatur quasi autem ipsa sunt. Maiores veniam dolorum id alias quisquam voluptate ducimus doloribus a quia cum vel porro soluta itaque maxime ab facere velit ipsa ratione, odit quae quam, quaerat est. Vel, quibusdam dolor animi reprehenderit minima quisquam voluptate fuga.</div>
</div>
</div>
<div class="section" style="--bg: #afb9c8;">
<div class="shape rellax" style="--size: 1500px; --left: -60%; --top: 0%; --bg-color: #ff7b54" data-rellax-speed="-10"></div>
<div class="shape rellax" style="--size: 500px; --left: 15%; --top: 50%; --bg-color: #ffb26b; --radius:100px;" data-rellax-speed="2"></div>
<div class="shape rellax" style="--size: 200px; --right: 10%; --top: 50%; --bg-color: #f55c47; --radius:48px;" data-rellax-speed="8"></div>
<div class="shape rellax" style="--size: 300px; --left: 10%; --top: 60%; --bg-color: #4aa96c" data-rellax-speed="2"></div>
<div class="shape rellax" style="--size: 50px; --right: 15%; --top: 50%; --bg-color: #ff7b54" data-rellax-speed="12"></div>
<div class="shape rellax" style="--size: 30px; --right: 30%; --top: 60%; --bg-color: #ff7b54" data-rellax-speed="8"></div>
<div class="shape rellax" style="--size: 70px; --right: 25%; --top: 40%; --bg-color: #ff7b54" data-rellax-speed="4"></div>
<div class="container">
<div class="title">Ipsum dolor.</div>
<div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe fuga sapiente ducimus illo nihil consequuntur placeat, perspiciatis reprehenderit minus rerum, nisi ullam quae eveniet modi veritatis et ab error adipisci mollitia eos iusto temporibus omnis quasi quaerat. Fugiat quod architecto minus vero aut ullam amet expedita, soluta impedit consequatur beatae nesciunt provident placeat officiis consequuntur quam dolores iusto quas. Ullam quibusdam quos repellat tempore hic animi reiciendis cupiditate consectetur accusamus adipisci reprehenderit recusandae sunt dignissimos eum, maiores dolore tenetur, id quaerat corporis libero culpa. Quo consequatur laudantium maxime omnis explicabo et recusandae officia excepturi, quas, quidem, cumque alias porro commodi consequuntur unde, obcaecati dolore animi? Officia necessitatibus enim at nostrum, quam alias. Voluptate, nihil, ratione! Cum, veniam, numquam? Commodi minima, quasi, saepe iure ab eaque odit nam quidem officiis dicta, at nihil optio, eius accusamus. Consequatur optio, repellat iste officia porro! Odio, eligendi repudiandae. Sit aliquid odio amet, minima voluptates culpa, odit, hic minus labore neque ea suscipit? Earum ea libero iste adipisci, sequi. At alias quasi sit, mollitia consequuntur, odio rem hic soluta, eligendi esse autem. Nisi vitae debitis beatae suscipit repellat a quis ut et, molestiae nemo repudiandae unde commodi possimus fugiat minus asperiores at? In aliquam iste culpa, earum dignissimos, quibusdam officiis reiciendis praesentium at quia sint ipsam, iusto eos atque fuga id ullam nihil nisi beatae repellat rerum voluptate vel autem? Doloremque aperiam perferendis quibusdam, dolor quaerat dolores voluptatum voluptatibus eius, recusandae iure doloribus quisquam odio repudiandae magnam. Consectetur expedita laboriosam animi asperiores repellendus molestias optio, error quia nostrum voluptatum, praesentium enim, a magni aliquam ea nihil cum ex. Inventore quasi, enim et nesciunt placeat rem porro maiores nostrum corrupti in magnam quod necessitatibus totam dignissimos magni sequi, molestiae nulla repellat beatae consequatur voluptatibus velit impedit unde sunt! Fuga ipsa veritatis non voluptate tempore deserunt, minima porro error iste maxime inventore reprehenderit quo quos similique, perspiciatis quis magnam quod. Eos, iste, soluta? Asperiores quae excepturi accusantium porro incidunt eum quam blanditiis? Dolorem consequatur perspiciatis omnis, quasi, dolor quam, illo sint suscipit veniam provident, harum dignissimos! Quis aut, obcaecati praesentium quod, magni consequatur a, eum ipsam quaerat deleniti id odit itaque fuga repellat accusamus similique nisi dolore officia modi atque odio temporibus inventore est? Maxime quidem labore temporibus molestias, commodi sequi corporis perferendis accusamus repellendus, iure architecto quae enim fuga reiciendis ipsam ex necessitatibus ullam. Neque voluptatum quidem aut repellendus temporibus, obcaecati dolores distinctio consectetur eum nisi id possimus. Ex ad facilis, corporis aperiam dignissimos aliquam, cumque. Odit adipisci enim excepturi ut distinctio consequatur eum fugit! Cumque praesentium obcaecati, voluptate dolores, nihil distinctio rem consequuntur natus, tempora numquam porro error eius illum nobis laboriosam iure velit dolor nostrum doloribus nemo est placeat voluptatum. Reiciendis a asperiores, architecto temporibus, deleniti magnam fuga quibusdam voluptatibus totam nulla, consequatur quasi autem ipsa sunt. Maiores veniam dolorum id alias quisquam voluptate ducimus doloribus a quia cum vel porro soluta itaque maxime ab facere velit ipsa ratione, odit quae quam, quaerat est. Vel, quibusdam dolor animi reprehenderit minima quisquam voluptate fuga.</div>
</div>
</div>
<script src="js/rellax.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Архив с примером можно скачать по ссылке
Плагин очень прост в использовании, поэтому не должно возникнуть каких-то трудностей
В дополнение к параллакс эффекту рассмотрели полезное применение CSS-переменных
Буду рад, если статья оказалась полезной
Спасибо за ваше внимание и уделённое время!
Похожие записи
Выбор диапазона значений на основе плагина noUiSlider
В статье рассмотрим один из вариантов, как сделать выбор диапазона значений, который обычно используется в фильтрах интернет-магазинов
Создаём графики на основе плагина Chart.js (обновлено 17.08.2021)
В данной статье рассмотрим вариант создания графиков на основе плагина Charts.js
