CSS slideshow + dynamiczne menu z jednej listy

Demo:
Demo dostępne tutaj

Mój dzisiejszy skrypt jest odpowiedzią na wiele pytań i poszukiwać w kwestii przewijania obrazów na stronie a także dodania elementów będących równocześnie kolejnymi pozycjami slideshow do np. listy menu .

Lista dla slideshow i pozycji menu

Na początek zamieszczam bardzo prosty układ HTML, który będzie zarówno elementami slidera jaki i listy li.

<ul class="ewd_slideshow">
            <li><span>Image 01</span><div><h3>Web - Design</h3></div></li>
            <li><span>Image 02</span><div><h3>CSS - tutorial</h3></div></li>
            <li><span>Image 03</span><div><h3>HTML - examples</h3></div></li>
            <li><span>Image 04</span><div><h3>jQuery - scripts</h3></div></li>
        </ul>

4 elementy, które na pierwszy rzut oka nie wyglądają jak elementy slidera, czy też mogłyby nimi być. Całość jednak animacji ma miejsce w skrypcie css, o czym za chwilę.
A więc mamy 4 elementy listy, każdy z nim posiada przypisany jeden obrazek, który będzie się animować.
Natomiast wartość znacznika H3 będzie wyświetlana w pasku bocznym w formie listy. Warto również zwrócić uwagę, że cała ta składani listy ul li nie będzie wyświetlana w tej formie.

<div class="ewd_slider">
			<ul class="ewd_slider-list">
			</ul>
		</div>

Tą składnie umieszczamy poniżej. Jak widać jest ona pusta, do niej będą dopisane elementy z znacznika H3, które za pomocą skryptu jQuery będziemy umieszczać.

Przewijanie slidów za pomocą CSS

Cała animacja przewijania zdjęć ma miejsce w skrypcie CSS. Aby w tym języku można stworzyć animację konieczne jest użycie znacznika animation. Jego zastosowanie jest kluczowe dla naszego skryptu.

.ewd_slideshow,
.ewd_slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.ewd_slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.ewd_slideshow 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 24s linear infinite 0s;
    -moz-animation: imageAnimation 24s linear infinite 0s;
    animation: imageAnimation 24s linear infinite 0s; 
}
.ewd_slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 24s linear infinite 0s;
    -moz-animation: titleAnimation 24s linear infinite 0s;
    animation: titleAnimation 24s linear infinite 0s; 
}
.ewd_slideshow li div h3 { 
    font-family: Roboto;
    font-size: 140px;
    padding: 0;
    line-height: 200px; 
	text-transform:uppercase;
}
.ewd_slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.ewd_slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    animation-delay: 6s; 
}
.ewd_slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    animation-delay: 12s; 
}
.ewd_slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    animation-delay: 18s; 
}
.ewd_slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    animation-delay: 6s; 
}
.ewd_slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    animation-delay: 12s; 
}
.ewd_slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    animation-delay: 18s; 
}
/* Animation for the slideshow images */

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

@media screen and (max-width: 600px) { 
    .ewd_slideshow li div h3 { font-size: 40px }
}

Dla nas kluczowym elementem jak już pisałem jest linia kodu:

 animation: imageAnimation 24s linear infinite 0s; 

Animacja posiada nazwę: imageAnimation, trwa 24s.
A więc tworzymy nową linię kody, w której umieszczamy właśnie naszą animacje. Polega ona wyłącznie na określaniu stopnia przezroczystości w różnych fazach trwania każdej animacji.

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

Ostatnią rzeczą jaką należy zrobić to długość i style dla każdego obrazka.

.ewd_slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.ewd_slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    animation-delay: 6s; 
}

A więc mamy pierwszy element listy: nth-child(1). Kolejno drugi, trzeci, itd. Każdy z tych elementów trwa 6s.
Na tym etapie nasz pokaz slide’ów jest gotowy. Jednak możemy również stworzyc ładnie wyglądające menu z listy, która została użyta do pokazów obrazka. Wykorzystujemy do tego jQuery oraz css.

Wyciąganie elementów do listy menu

Pewnie jest wiele sposobów na taką formę prezentacji menu. W najprostszy sposób, można tą pierwotną naszą listę o klasie (.ewd_slideshow) dobrze ostylować i równie ładnie zaprezentować. Ja jednak nie biorę tego elementu tylko zaciągam jego zawartość z znacnika H3, ładuję do tablicy i wyciągam pętlą do mojej nowej listy, która jest pusta (.ewd_slider). W teorii bardzo proste, a w praktyce równie proste.

var ewd_imaalt_array = Array();
$('h3').each(function() {
				ewd_imaalt_array.push($(this).html());
			});

Już we wcześniejszych wpisach wykorzystywałem tą metodę, która jak widać ma wiele zastosowań. (Zainteresowanych odsyłam do artykułu Przetwarzanie plików XML za pomocą PHP).
Każda zawartość znacznika H3 metodą push() ląduje w tablicy. Mając już wszystkie elementy poprzez pętle lokujemy je w naszej nowej liście.

var m;
		var mm = '4';
for (var m = 0; m < mm; m++) {
			   $('ul.ewd_slider-list').prepend("<li><span>" + ewd_imaalt_array[m] + "</span></li>" );

			}

Jeśli chodzi o skrypt to jest już wszystko gotowe. Potrzeba jedynie ostylować naszą listę, żeby wyglądała bardzo zachęcająco i nowocześnie.

.ewd_slider
{
	z-index:999;
	position:absolute;
	right:0;
	top:30%;
}
ul.ewd_slider-list li
{
	font-size:25px;
	color:#fff;
	list-style:none;
	text-align:right;
}
ul.ewd_slider-list li span
{
	padding:20px 30px;
	display:inline-block;
	transition: all .9s ease-in-out;
}
ul.ewd_slider-list li span:hover
{
	font-size:55px;
	transition: all .5s ease-in-out;
}
ul.ewd_slider-list li:nth-child(1) span
{
	background:#b24a7d;

}
ul.ewd_slider-list li:nth-child(2) span
{
	background:#76bcff;	
}
ul.ewd_slider-list li:nth-child(3) span
{
	background:#bada55;
}
ul.ewd_slider-list li:nth-child(4) span
{
	background:#6b4295;
}

2 myśli nt. „CSS slideshow + dynamiczne menu z jednej listy”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code