• 266
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Всем привет. Вот нашел довольно интересную реализацию слайдера, реализованного с помощью path-slider.js и anime.js.
Как видно из демо примера он впишется практически в любой дизайн.

И так приступим
1 . Вот исходники если кому нужно Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2. Туда где нам нужен слайдер в шаблоне добавлем саму структуру шаблона

Код:
<!-- Path Slider Container -->
<div class="path-slider">
<!-- Slider items -->
<a href="#" class="path-slider__item path-slider__item--1"><div class="item__circle"></div></a>
<a href="#" class="path-slider__item path-slider__item--2"><div class="item__circle"></div></a>
<a href="#" class="path-slider__item path-slider__item--3"><div class="item__circle"></div></a>
<a href="#" class="path-slider__item path-slider__item--4"><div class="item__circle"></div></a>
<a href="#" class="path-slider__item path-slider__item--5"><div class="item__circle"></div></a>
</div>
3. Далее в файл стилей добавляем стили для нашего слайдера
Код:
// This slider will be full screen
// The `background-image` will be set using Javascript
.path-slider {
position: relative;
width: 100%;
height: 100%;
background-position: center;

&:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 220px;
background-color: rgba(0, 0, 0, 0.1);
transform: translate(-50%, -50%);
border-radius: 100%;
}
}

// We also need this extra element (generated with Javascript) to fade the images smoothly
.path-slider__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
}

svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.path-slider__path {
stroke-width: 10px;
stroke: rgba(0, 0, 0, 0.5);
fill: none;
}

.path-slider__item {
position: absolute;
left: -100px;
top: -100px;
cursor: pointer;
z-index: 1;
}

.item__circle {
display: inline-block;
width: 160px;
height: 160px;
background-position: center;
border-radius: 100%;
transform: scale(0.5);
transition: 0.5s transform;
border: 20px solid rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.3);
}

.path-slider__current-item {
z-index: 2;

.item__circle {
transform: scale(1);
}
}

// Defining images

.path-slider__item--1 .item__circle {
background-image: url("https://cdn.rawgit.com/lmgonzalves/path-slider/aafa43d3/images/img1.jpg");
}

.path-slider__item--2 .item__circle {
background-image: url("https://cdn.rawgit.com/lmgonzalves/path-slider/aafa43d3/images/img2.jpg");
}

.path-slider__item--3 .item__circle {
background-image: url("https://cdn.rawgit.com/lmgonzalves/path-slider/aafa43d3/images/img3.jpg");
}

.path-slider__item--4 .item__circle {
background-image: url("https://cdn.rawgit.com/lmgonzalves/path-slider/aafa43d3/images/img4.jpg");
}

.path-slider__item--5 .item__circle {
background-image: url("https://cdn.rawgit.com/lmgonzalves/path-slider/aafa43d3/images/img5.jpg");
}
Для того чтобы изображения растягивались на весь экран нужно прописать к классу .path-slider__background еще два свойства: background-repeat: no-repeat; background-size: cover;

4. Ну и последнее это скрипты

Код:
<script src='https://rawgit.com/juliangarnier/anime/master/anime.min.js'></script>
<script src='https://rawgit.com/lmgonzalves/path-slider/master/dist/path-slider.min.js'></script>
<script>
// Function to get a path (string) similar to sin function. Can accept following options that you can use for customization:
// - width: Width to draw the path
// - height: Height to draw the path
// - addWidth: Additional width to overflow actual width
// - controlSep: Bigger values of this parameter will add more curvature, and vice versa
// - curves: Number of curves (iterations) to draw

function getSinPath(options) {
var _options = options || {};
var _width = _options.width || window.innerWidth;
var _height = _options.height || window.innerHeight;
var _addWidth = _options.addWidth || 100;
var _controlSep = _options.controlSep || 50;
var _curves = _options.curves || 2;

var x = - _addWidth;
var y = _height / 2;
var amplitudeX = (_width + _addWidth * 2) / _curves; // X distance among curve points
var amplitudeY = _height / 3; // Y distance between points and control points

var path = [];
path.push('M', x, y);
var alternateY = true;
var controlY;
for (var i = 0; i < _curves; i++) {
controlY = alternateY ? y - amplitudeY : y + amplitudeY;
if (i === 0) {
path.push('C', x + (amplitudeX / 2 - _controlSep), controlY);
} else {
path.push('S');
}
path.push(x + (amplitudeX / 2 + _controlSep), controlY);
path.push(x + amplitudeX, y);
x += amplitudeX;
alternateY = !alternateY;
}

return path.join(' ');
}

(function () {

// Creating SVG and path elements and insert to DOM

var svgNS = 'http://www.w3.org/2000/svg';
var svgEl = document.createElementNS(svgNS, 'svg');

var pathEl = document.createElementNS(svgNS, 'path');
// The `getSinPath` function return the `path` in String format
pathEl.setAttribute('d', getSinPath());
pathEl.setAttribute('class', 'path-slider__path');

svgEl.appendChild(pathEl);
document.body.appendChild(svgEl);

// Changing `background-image`
// Firstly, saving the computed `background` of each item, as these are defined in CSS
// When item is selected, the `background` is set accordingly

var items = document.querySelectorAll('.path-slider__item');
var images = [];
for (var j = 0; j < items.length; j++) {
images.push(getComputedStyle(items[j].querySelector('.item__circle')).getPropertyValue('background-image'));
}

var imgAnimation;
var lastIndex;
var setImage = function (index) {
if (imgAnimation) {
imgAnimation.pause();
sliderContainer.style['background-image'] = images[lastIndex];
sliderContainerBackground.style['opacity'] = 0;
}
lastIndex = index;
sliderContainerBackground.style['background-image'] = images[index];
imgAnimation = anime({
targets: sliderContainerBackground,
opacity: 1,
easing: 'linear'
});
};

// Adding the extra element needed to fade the images smoothly
// Also set the image for the initial current item (the first one)

var sliderContainer = document.querySelector('.path-slider');
var sliderContainerBackground = document.createElement('div');
sliderContainerBackground.setAttribute('class', 'path-slider__background');
setImage(0);
sliderContainer.appendChild(sliderContainerBackground);

// Initializing the slider

var options = {
startLength: 'center',
paddingSeparation: 100,
easing: 'easeOutCubic',
begin: function (params) {
// Item get selected, then set the `background` accordingly
if (params.selected) {
setImage(params.index);
}
}
};

var slider = new PathSlider(pathEl, '.path-slider__item', options);

// Regenerate the SVG `path` and update items position on `resize` event (responsive behavior)

window.addEventListener('resize', function() {
pathEl.setAttribute('d', getSinPath());
slider.updatePositions();
});</script>
Ну код скрипта можно вынести в отдельный файл или дописать в файл .js.

Можешь почитать и вот эту статейку "Палитра цветов 2"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element