ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Эластичный слайдер при помощи CSS + JS

Эластичный слайдер при помощи CSS + JS

Эластичный слайдер при помощи CSS + JS
Оригинален по своему дизайну слайдер, который выполнен виде колоды карт, где идет изображение, но главное курсором в ручную меняешь изображение. Безусловно это уникальный дизайн, который позволить украсить страницу или блог. Но такой формат больше подходит под одну страницу, где может быть любые данные на предмет или на данного человека. И здесь вам небольшой слайд, который преобразован виде мобильного экрана, что курсором переводишь снимку по обе стороны.

Хотя изначально написано, что он предназначен на мобильные браузеры, но смотря на demo страницу, он не так и плохо работает на большом экране. Только одно, где и как его можно разместить. Вероятно для него можно сделать красивое оформление, но не вижу в отдельном блоке го. Ведь если посмотреть на светлом фоне, то там отлично смотрятся тени, что изначально задают размер.

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

Так выглядит при смене кадров:

Оригинальный слайдер для сайта на HTML

Установка:

HTML

Код
<div class="elostichnaya_slayder">
  <div class="perevoda_slayda" ><img src="http://zornet.ru/_fr/79/s3843185.jpg" /><p>Снимок слайда</p></div>
  <div class="perevoda_slayda"><img src="http://zornet.ru/_fr/79/s1482027.jpg" /><p>Кадр из фильма</p></div>
  <div class="perevoda_slayda"><img src="http://zornet.ru/_fr/79/s8047997.jpg" /><p>Анимация стиля</p></div>
  <div class="perevoda_slayda" ><img src="http://zornet.ru/_fr/79/s3728710.jpg" /><p>Картинка слайда #1</p></div>
  </div>

CSS

Код
@-webkit-keyframes animation{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }}

@-webkit-keyframes animation2{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }}

.elostichnaya_slayder div p{color:#1c1c1c;position:absolute;bottom:-65px; font-family:font; font-size:22px;
}

.elostichnaya_slayder{
-webkit-animation:animation ease 1s;animation-delay:.8s;animation-fill-mode:backwards;
margin:60px auto 0 auto;
  height:360px;
  width:240px;
  padding:40px;
  top:100px;
  perspective:1000px;
  transition:ease-in-out .2s;
}

.perevoda_slayda img { text-align:center;width:100%; height:100%; -webkit-user-drag:none;user-drag:none;-moz-user-drag:none; border-radius:2px; }

.perevoda_slayda {
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
  position: absolute;
  height: 295px;
  width: 252px;
  box-shadow: 0px 10px 30px 0px rgba(43, 43, 43, 0.35);
  background: #f9f0f0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  text-align: center;
  border: 12px #f7f3f3 solid;
  box-sizing: border-box;
  border-bottom: 55px #ffffff solid;
  border-radius: 3px;
}
.transition {
  -webkit-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
  -moz-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
  transition: cubic-bezier(0,1.95,.49,.73) .4s ;
}

JS

Код
window.addEventListener('load', onWndLoad, false);

function onWndLoad() {
   
  var slider = document.querySelector('.elostichnaya_slayder');
  var sliders = slider.children;
  var initX = null;  
  var transX = 0;
  var rotZ = 0;
  var transY = 0;
   
  var curSlide = null;
   
  var Z_DIS = 50;
  var Y_DIS = 10;
  var TRANS_DUR = 0.4;
   
  var images=document.querySelectorAll('img');
  for(var i=0;i<images.length;i++)
  {
  images[i].onmousemove=function(e){
  e.preventDefault()
   
  }
  images[i].ondragstart=function(e){
  return false;
   
  }
  }
   
  function init() {
   
  var z = 0, y = 0;

  for (var i = sliders.length-1; i >=0; i--) {
  sliders[i].style.transform = 'translateZ(' + z + 'px) translateY(' + y + 'px)';
   
  z -= Z_DIS;
  y += Y_DIS;
  }

  attachEvents(sliders[sliders.length - 1]);

   
   
  }
  function attachEvents(elem) {
  curSlide = elem;

  curSlide.addEventListener('mousedown', slideMouseDown, false);
  curSlide.addEventListener('touchstart', slideMouseDown, false);
  }
  init();
  function slideMouseDown(e) {
   
  if (e.touches) {
  initX = e.touches[0].clientX;
  }
  else {
  initX = e.pageX;
  }
   
   
  document.addEventListener('mousemove', slideMouseMove, false);
  document.addEventListener('touchmove', slideMouseMove, false);

  document.addEventListener('mouseup', slideMouseUp, false);
  document.addEventListener('touchend', slideMouseUp, false);
  }
  var prevSlide = null;
   
  function slideMouseMove(e) {
  var mouseX;
   
  if (e.touches) {
  mouseX = e.touches[0].clientX;
  }
  else {
  mouseX = e.pageX;
  }

  transX += mouseX - initX;
  rotZ = transX / 20;

  transY = -Math.abs(transX / 15);
   
  curSlide.style.transition = 'none';
  curSlide.style.webkitTransform = 'translateX(' + transX + 'px)' + ' rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
  curSlide.style.transform = 'translateX(' + transX + 'px)' + ' rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
  var j = 1;
  //remains elements
  for (var i = sliders.length -2; i >= 0; i--) {

  sliders[i].style.webkitTransform = 'translateX(' + transX/(2*j) + 'px)' + ' rotateZ(' + rotZ/(2*j) + 'deg)' + ' translateY(' + (Y_DIS*j) + 'px)'+ ' translateZ(' + (-Z_DIS*j) + 'px)';
  sliders[i].style.transform = 'translateX(' + transX/(2*j) + 'px)' + ' rotateZ(' + rotZ/(2*j) + 'deg)' + ' translateY(' + (Y_DIS*j) + 'px)'+ ' translateZ(' + (-Z_DIS*j) + 'px)';
  sliders[i].style.transition = 'none';
  j++;
  }  
   
   
  initX =mouseX;
  e.preventDefault();
  if (Math.abs(transX) >= curSlide.offsetWidth-30) {
   
  document.removeEventListener('mousemove', slideMouseMove, false);
  document.removeEventListener('touchmove', slideMouseMove, false);
  curSlide.style.transition = 'ease 0.2s';
  curSlide.style.opacity = 0;
  prevSlide = curSlide;
  attachEvents(sliders[sliders.length - 2]);
  slideMouseUp();
  setTimeout(function () {
  slider.insertBefore(prevSlide, slider.firstChild);
   
  prevSlide.style.transition = 'none';
  prevSlide.style.opacity = '1';
  slideMouseUp();
   
  },201);
   
   
   
  return;
  }
  }
  function slideMouseUp() {
  transX = 0;
  rotZ = 0;
  transY = 0;
   
  curSlide.style.transition = 'cubic-bezier(0,1.95,.49,.73) '+TRANS_DUR+'s';

  curSlide.style.webkitTransform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
  curSlide.style.transform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + transY + 'px)';
  //remains elements
  var j = 1;
  for (var i = sliders.length - 2; i >= 0; i--) {
  sliders[i].style.transition = 'cubic-bezier(0,1.95,.49,.73) ' + TRANS_DUR / (j + 0.9) + 's';
  sliders[i].style.webkitTransform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + (Y_DIS*j) + 'px)' + ' translateZ(' + (-Z_DIS*j) + 'px)';
  sliders[i].style.transform = 'translateX(' + transX + 'px)' + 'rotateZ(' + rotZ + 'deg)' + ' translateY(' + (Y_DIS*j) + 'px)' + ' translateZ(' + (-Z_DIS*j) + 'px)';

  j++;
  }
  document.removeEventListener('mousemove', slideMouseMove, false);
  document.removeEventListener('touchmove', slideMouseMove, false);
   
  }

}

Не удивлюсь, что кто-то переделает его под информативную карту, где просто картинку удерет или добавит место под краткое описание. Ведь по умолчанию там можно прописать только одно или два небольшой ключевых слов. Но все это меняется, где в начале стилистике выставлены размеры, это сделать менее или больше.

Демонстрация
2020-06-10 Загрузок: 1 Просмотров: 295 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar