ZorNet.Ru — сайт для вебмастера » HTML и CSS » Полноэкранный слайд-шоу при помощи CSS3

Полноэкранный слайд-шоу при помощи CSS3

Приветствую всех на сайте, так как в этой статье, что посещена слайдеру, с вами собираюсь поделиться современным и прекрасным полно экранным слайд шоу с использованием стилистики CSS3. На этом полно экранном слайдере, вы получите, а точнее уведете качественную картинку, которая идет на гладком слайд переход изображений, где наверняка привлечет к себе внимание. Так как в нем прописана анимация, а это знаки, что можно изначально прописать, где они будут показываться на предоставленном снимке.

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

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

Теперь давайте код этого слайда с помощью CSS3:

HTML

Код

<ul class="psovmoteg_kisemalgen">
  <li><span>ZORNET.RU 01</span><div><h3 style="text-shadow:1px 1px 2px rgba(23, 22, 22, 0.28);color:#fdfdfd;font-size:47px;line-height:1.2em;font-weight:bold;text-align:center;max-width:800px;margin:0 auto;">Скрипты и шаблоны для сайта, плюс стилистика CSS</h3></div></li>
  <li><span>ZORNET.RU 02</span></li>
  <li><span>ZORNET.RU 03</span></li>
  <li><span>ZORNET.RU 04</span></li>
  <li><span>ZORNET.RU 05</span></li>
  <li><span>ZORNET.RU 06</span></li>
</ul>
  <div class="galiqrumopas">
  <header>
  <h1><span>ZorNet.Ru: Портал Вебмастера</span> Чистые CSS3</h1>
  </header>
</div>

CSS

Код

.galiqrumopas > header{
  padding: 28px 28px 19px 19px;
  margin: 0px 19px 9px 18px;
  position: relative;
  display: block;
  text-shadow: 1px 1px 1px rgba(27, 25, 25, 0.29);
  text-align: left;
}
.galiqrumopas > header h1{
  font-family: "helvetica neue", helvetica;
  font-size: 37px;
  line-height: 37px;
  position: relative;
  font-weight: 400;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(27, 25, 25, 0.29);
  padding: 0px 0px 4px 0px;
}
.galiqrumopas > header h1 span{

}
.galiqrumopas > header h2, p.info{
  font-size: 16px;
  font-style: italic;
  color: #f8f8f8;
  text-shadow: 1px 1px 1px rgba(27, 25, 25, 0.29);
}

.psovmoteg_kisemalgen,
.psovmoteg_kisemalgen:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.psovmoteg_kisemalgen:after {
  content: '';
  background: transparent url(..pattern.png) repeat top left;
}
.psovmoteg_kisemalgen li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 35s linear infinite 0s;
  -moz-animation: imageAnimation 35s linear infinite 0s;
  -o-animation: imageAnimation 35s linear infinite 0s;
  -ms-animation: imageAnimation 35s linear infinite 0s;
  animation: imageAnimation 35s linear infinite 0s;
}
.psovmoteg_kisemalgen li div {
  z-index: 1000;
  position: absolute;
  bottom: 28px;
  left: 0px;
  width: 100%;
  text-align: center;
  opacity: 0;
  -webkit-animation: titleAnimation 35s linear infinite 0s;
  -moz-animation: titleAnimation 35s linear infinite 0s;
  -o-animation: titleAnimation 35s linear infinite 0s;
  -ms-animation: titleAnimation 35s linear infinite 0s;
  animation: titleAnimation 35s linear infinite 0s;
}
.psovmoteg_kisemalgen li div h3 {
  font-family: "helvetica neue", helvetica;
  text-transform: uppercase;
  font-size: 78px;
  padding: 0;
  line-height: 200px;
  color: rgba(255,255,255, 0.8);
}
.psovmoteg_kisemalgen li:nth-child(1) span { background-image: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zatumousa.jpg) }
.psovmoteg_kisemalgen li:nth-child(2) span {
  background-image: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/54747.jpg);
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  -ms-animation-delay: 5s;
  animation-delay: 5s;
}
.psovmoteg_kisemalgen li:nth-child(3) span {
  background-image: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/tretij.jpg);
  -webkit-animation-delay: 11s;
  -moz-animation-delay: 11s;
  -o-animation-delay: 11s;
  -ms-animation-delay: 11s;
  animation-delay: 11s;
}
.psovmoteg_kisemalgen li:nth-child(4) span {
  background-image: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/chetvetryj.jpg);
  -webkit-animation-delay: 17s;
  -moz-animation-delay: 17s;
  -o-animation-delay: 17s;
  -ms-animation-delay: 17s;
  animation-delay: 17s;
}
.psovmoteg_kisemalgen li:nth-child(5) span {
  background-image: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/pjat.jpg);
  -webkit-animation-delay: 23s;
  -moz-animation-delay: 23s;
  -o-animation-delay: 23s;
  -ms-animation-delay: 23s;
  animation-delay: 23s;
}
.psovmoteg_kisemalgen li:nth-child(6) span {
  background-image: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/sem.jpg);
  -webkit-animation-delay: 28s;
  -moz-animation-delay: 28s;
  -o-animation-delay: 28s;
  -ms-animation-delay: 28s;
  animation-delay: 28s;
}
.psovmoteg_kisemalgen li:nth-child(2) div {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  -ms-animation-delay: 5s;
  animation-delay: 5s;
}
.psovmoteg_kisemalgen li:nth-child(3) div {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  -ms-animation-delay: 10s;
  animation-delay: 10s;
}
.psovmoteg_kisemalgen li:nth-child(4) div {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  -ms-animation-delay: 16s;
  animation-delay: 16s;
}
.psovmoteg_kisemalgen li:nth-child(5) div {
  -webkit-animation-delay: 23s;
  -moz-animation-delay: 23s;
  -o-animation-delay: 23s;
  -ms-animation-delay: 23s;
  animation-delay: 23s;
}
.psovmoteg_kisemalgen li:nth-child(6) div {
  -webkit-animation-delay: 29s;
  -moz-animation-delay: 29s;
  -o-animation-delay: 29s;
  -ms-animation-delay: 29s;
  animation-delay: 29s;
}

@-webkit-keyframes imageAnimation {
  0% {
  opacity: 0;
  -webkit-animation-timing-function: ease-in;
  }
  8% {
  opacity: 1;
  -webkit-transform: scale(1.05);
  -webkit-animation-timing-function: ease-out;
  }
  17% {
  opacity: 1;
  -webkit-transform: scale(1.1);
  }
  25% {
  opacity: 0;
  -webkit-transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
  0% {
  opacity: 0;
  -moz-animation-timing-function: ease-in;
  }
  8% {
  opacity: 1;
  -moz-transform: scale(1.05);
  -moz-animation-timing-function: ease-out;
  }
  17% {
  opacity: 1;
  -moz-transform: scale(1.1);
  }
  25% {
  opacity: 0;
  -moz-transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
  0% {
  opacity: 0;
  -o-animation-timing-function: ease-in;
  }
  8% {
  opacity: 1;
  -o-transform: scale(1.05);
  -o-animation-timing-function: ease-out;
  }
  17% {
  opacity: 1;
  -o-transform: scale(1.1);
  }
  25% {
  opacity: 0;
  -o-transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
  0% {
  opacity: 0;
  -ms-animation-timing-function: ease-in;
  }
  8% {
  opacity: 1;
  -ms-transform: scale(1.05);
  -ms-animation-timing-function: ease-out;
  }
  17% {
  opacity: 1;
  -ms-transform: scale(1.1);
  }
  25% {
  opacity: 0;
  -ms-transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@keyframes imageAnimation {
  0% {
  opacity: 0;
  animation-timing-function: ease-in;
  }
  8% {
  opacity: 1;
  transform: scale(1.05);
  animation-timing-function: ease-out;
  }
  17% {
  opacity: 1;
  transform: scale(1.1);
  }
  25% {
  opacity: 0;
  transform: scale(1.1);
  }
  100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
  0% {
  opacity: 0;
  -webkit-transform: translateY(200px);
  }
  8% {
  opacity: 1;
  -webkit-transform: translateY(0px);
  }
  17% {
  opacity: 1;
  -webkit-transform: scale(1);
  }
  19% { opacity: 0 }
  25% {
  opacity: 0;
  -webkit-transform: scale(10);
  }
  100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
  0% {
  opacity: 0;
  -moz-transform: translateY(200px);
  }
  8% {
  opacity: 1;
  -moz-transform: translateY(0px);
  }
  17% {
  opacity: 1;
  -moz-transform: scale(1);
  }
  19% { opacity: 0 }
  25% {
  opacity: 0;
  -moz-transform: scale(10);
  }
  100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
  0% {
  opacity: 0;
  -o-transform: translateY(200px);
  }
  8% {
  opacity: 1;
  -o-transform: translateY(0px);
  }
  17% {
  opacity: 1;
  -o-transform: scale(1);
  }
  19% { opacity: 0 }
  25% {
  opacity: 0;
  -o-transform: scale(10);
  }
  100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
  0% {
  opacity: 0;
  -ms-transform: translateY(200px);
  }
  8% {
  opacity: 1;
  -ms-transform: translateY(0px);
  }
  17% {
  opacity: 1;
  -ms-transform: scale(1);
  }
  19% { opacity: 0 }
  25% {
  opacity: 0;
  -webkit-transform: scale(10);
  }
  100% { opacity: 0 }
}
@keyframes titleAnimation {
  0% {
  opacity: 0;
  transform: translateY(200px);
  }
  8% {
  opacity: 1;
  transform: translateY(0px);
  }
  17% {
  opacity: 1;
  transform: scale(1);
  }
  19% { opacity: 0 }
  25% {
  opacity: 0;
  transform: scale(10);
  }
  100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .psovmoteg_kisemalgen li span{
  opacity: 1;
}
@media screen and (max-width: 1140px) {
  .psovmoteg_kisemalgen li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
  .psovmoteg_kisemalgen li div h3 { font-size: 50px }
}

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

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

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

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

24 Июля 2018 Загрузок: 2 Просмотров: 1479 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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