ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайд шоу из изображений в формате 3D

Слайд шоу из изображений в формате 3D

Современный формат для слайдера, это просматривать его в 3d, где смотрится просто великолепно на любом тематическом сайте с его эффектами. При помощи CSS3, появилась отличия возможность создать такой необычный формат, где как раз можно задействовать оригинальные эффекты при переключении слайда. Также идут преобразование всех элементов, которые все изначально созданы в трехмерном пространстве. Этот слайдер использует и задействует, как раз эти свойства 3D-преобразований, где изначально допускает различные виды эффектов.

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

А сама идее будет состоять в том, чтобы создавались специальные срезы, где предназначены для трехмерной картинки, которая будет выводиться, но и не забываем про вращение по разные стороны, где также присутствует открытие следующего изображения как другую сторону трехмерного объекта. И здесь вам понадобиться как можно обновленный браузер, так как на старой версий все будет не корректно выводить, где не получите того эффекта видимости, который безусловно завораживает своим исполнением слайдера.

При заходе на сайт или открытие страницы, где находится слайдер.

Один из трюков смены картинки:

Приступаем к установке:

HTML

Код

<div class="dsaitesp-kopedsav">
  <div class="wrapper">

  <ul id="kegansako-kalevatopas" class="kegansako-kalevatopas">
  <li>
<a href="#" target="_blank"><img src="Ссылка на изображение" alt=""/></a>
  <div class="kogesason-davagopugan">
  <h3>Найти инвестора для малого бизнеса</h3>
  </div>
  </li>
  <li>
  <a href="#" target="_blank"><img src="Ссылка на изображение" alt=""/></a>
  <div class="kogesason-davagopugan">
  <h3>Лайфхак для стартапа</h3>
  </div>
  </li>
  <li>
<a href="#" target="_blank"><img src="Ссылка на изображение" alt=""/></a>
  <div class="kogesason-davagopugan">
  <h3>Инвестиции в новостройки Анапы</h3>
  </div>
  </li>
  <li>
<a href="#" target="_blank"><img src="Ссылка на изображение" alt=""/></a>
  <div class="kogesason-davagopugan">
  <h3>Инвесторы для бизнеса</h3>
  </div>
  </li>
  <li>
<a href="#" target="_blank"><img src="Ссылка на изображение" alt=""/></a>
  <div class="kogesason-davagopugan">
  <h3>Реальность и риски инвестора</h3>
  </div>
  </li>
  <li>
<a href="#" target="_blank"><img src="Ссылка на изображение" alt=""/></a>
  <div class="kogesason-davagopugan">
  <h3>Инновационный художник</h3>
  </div>
  </li>
  <li>
<a href="#" target="_blank"><img src="Ссылка на изображение" alt=""/></a>
  <div class="kogesason-davagopugan">
  <h3>Самоотверженный филантроп</h3>
  </div>
  </li>
  </ul>

  <div id="muegesoves" class="muegesoves"></div>

  <div id="nav-modonkaleva" class="nav-modonkaleva">
  <a href="#">Next</a>
  <a href="#">Previous</a>
  </div>

  </div>
</div>

CSS

Код

.kegansako-kalevatopas {
  margin: 10px auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  list-style-type: none;
  padding: 0;
}

.kegansako-kalevatopas li {
  margin: 0;
  padding: 0;
  display: none;
}

.kegansako-kalevatopas li > a {
  outline: none;
}

.kegansako-kalevatopas li > a img {
  border: none;
}

.kegansako-kalevatopas img {
  max-width: 100%;
  display: block;
}

.kogesason-davagopugan {
  padding: 20px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 1000;
  position: absolute;
  background: #CBBFAE;
  background: rgba(190,176,155, 0.4);
  border-left: 4px solid rgba(255,255,255,0.7);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  color: #fff;

  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -o-transition: all 200ms;
  -ms-transition: all 200ms;
  transition: all 200ms;
}

.kegansako-kalevatopas li.sb-current .kogesason-davagopugan {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: 1;
}

.kegansako-kalevatopas li.sb-current .kogesason-davagopugan:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
  filter: alpha(opacity=99);
  background: rgba(190,176,155, 0.7);
}

.sb-perspective {
  position: relative;
}

.sb-perspective > div {
  position: absolute;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-backface-visibility : hidden;
  -moz-backface-visibility : hidden;
  -o-backface-visibility : hidden;
  -ms-backface-visibility : hidden;
  backface-visibility : hidden;
}

.sb-side {
  margin: 0;
  display: block;
  position: absolute;

  -moz-backface-visibility : hidden;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* custom style */
.dsaitesp-kopedsav {
  margin: 30px;
}

.muegesoves {
  width: 100%;
  height: 168px;
  position: relative;
  margin-top: -110px;
  background-size: 100% 100%; /* stretches it */
  z-index: -1;
  display: none;
}

.kogesason-davagopugan h3 {
  font-size: 20px;
  text-muegesoves: 1px 1px 1px rgba(0,0,0,0.3);
}

.kogesason-davagopugan h3 a {
  color: #4a3c27;
  text-muegesoves: 0 1px 1px rgba(255,255,255,0.5);
}

.nav-modonkaleva {
  display: none;
}

.nav-modonkaleva a {
  width: 42px;
  height: 42px;
  background: #cbbfae url(https://tympanus.net/Development/Slicebox/images/nav.png) no-repeat top left;
  position: absolute;
  top: 50%;
  left: 2px;
  text-indent: -9000px;
  cursor: pointer;
  margin-top: -21px;
  opacity: 0.9;
  border-radius: 50%;
  box-muegesoves: 0 1px 1px rgba(255,255,255,0.8);
}

.nav-modonkaleva a:first-child{
  left: auto;
  right: 2px;
  background-position: top right;
}

.nav-modonkaleva a:hover {
  opacity: 1;
}

.nav-gtulopsan {
  text-align: center;
  position: absolute;
  bottom: -5px;
  height: 30px;
  width: 100%;
  left: 0;
  display: none;
}

.nav-gtulopsan span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 3px;
  background: #cbbfae;
  cursor: pointer;
  box-muegesoves:
  0 1px 1px rgba(255,255,255,0.6),
  inset 0 1px 1px rgba(0,0,0,0.1);
}

.nav-gtulopsan span.nav-dot-current {
  box-muegesoves:
  0 1px 1px rgba(255,255,255,0.6),
  inset 0 1px 1px rgba(0,0,0,0.1),
  inset 0 0 0 3px #cbbfae,
  inset 0 0 0 8px #fff;
}

.nav-websitespagep {
  width: 70px;
  height: 30px;
  position: absolute;
  right: 70px;
  bottom: 0px;
  display: none;
}

.nav-websitespagep span {
  width: 30px;
  height: 30px;
  background: #cbbfae url(https://tympanus.net/Development/Slicebox/images/options.png) no-repeat top left;
  text-indent: -9000px;
  cursor: pointer;
  opacity: 0.7;
  display: inline-block;
  border-radius: 50%;
}

.nav-websitespagep span:first-child{
  background-position: -30px 0px;
  margin-right: 3px;
}

.nav-websitespagep span:hover {
  opacity: 1;
}

Код

$(function() {
  var Page = (function() {
  var $navmodonkaleva = $( '#nav-modonkaleva' ).hide(),
  $muegesoves = $( '#muegesoves' ).hide(),
  slicebox = $( '#kegansako-kalevatopas' ).slicebox( {
  onReady : function() {
  $navmodonkaleva.show();
  $muegesoves.show();
  },
  orientation : 'r',
  cuboidsRandom : true,
  disperseFactor : 30
  } ),
  init = function() {
  initEvents();
  },
  initEvents = function() {

  $navmodonkaleva.children( ':first' ).on( 'click', function() {
  slicebox.next();
  return false;
  } );

  $navmodonkaleva.children( ':last' ).on( 'click', function() {

  slicebox.previous();
  return false;
  } );
  };

  return { init : init };
  })();
  Page.init();
});

Также можно изначально посмотреть, как реально выглядит слайд в рабочем виде.

Демонстрация

09 Декабря 2018 Загрузок: 2 Просмотров: 1025 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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