Хаки и Скрипты Next Generation CMS

Слайдер на path-slider.js и anime.js

irbees2008 irbees2008 Опубликовано - 15 - сентября Слайдшоу и анимация
1547 - 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.

Можешь почитать и вот эту статейку "JS - Внешние объекты "

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [10]
  • Гости: [10]
  • Были сегодня : [1] Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.105сек
  • Потребление памяти: 4.951 Mb 
  •   яндекс.ћетрика