Nagłówek jest chyba najważniejszą częścią strony internetowej. To na nim najpierw skupia się wzrok osoby odwiedzającej stronę. Dobry nagłówek powinien zawierać logo, slogan oraz ewentualnie nawigację. Wszystko inne uważane było za zbędne odciąganie uwagi użytkownika od treści strony. Do niedawna.
Moda na strony z dużymi nagłówkami zapanowała na dobre. Taki nagłówek to idealne miejsce, by w atrakcyjny sposób przedstawić produkty firmy, czy wybrane prace z portfolio. W dzisiejszym artykule, pokażę Wam sposób na stworzenie interaktywnego nagłówka, który nie tylko pozwoli na stworzenie strony wyróżniającej się na tle innych. Dzięki niemu będziecie mogli zaspokoić odwieczne marzenia klientów o ruszającej się stronie. Całość nie będzie wcale taka trudna. Jeśli więc upał lub katar alergiczny skutecznie zniechęcają Cię do wyjścia z domu, zabieraj się do roboty!
Co planujemy uzyskać?
Naszym efektem końcowym będą trzy slajdy, każdy będzie reagował na ruch kursora myszy, gdy się nad nim znajdzie. Aby to osiągnąć, każdy slajd musimy podzielić na warstwy, zaczynając od tła, a kończąc na elementach, które na tym tle mają się ruszać. Ilość tych elementów uzależniona jest tylko od potrzeb osoby projektującej dany slajd. Ja użyję czterech elementów.
Każdy slajd będzie automatycznie przewijał się co określony odstęp czasu. Dodamy również nawigację, aby użytkownik mógł sam poruszać się pomiędzy nimi.
Zaczynamy
Do wykonania wyznaczonego efektu, będziemy potrzebowali dwóch darmowych pluginów do jQuery:
- jParallax – pozwoli nam na wprawienie elementów nagłówka w ruch;
- jQuery Cycle – dzięki niemu, stworzymy klasyczny slider.
Do stworzenia pliku demonstracyjnego, użyłem Twitter Bootstrap, który pozwolił mi na zaoszczędzenie czasu na pisanie kodu CSS. Nie jest on oczywiście wymagany. Zacząłem od następującego kodu HTML, który posłużył mi jako szkielet:
<!DOCTYPE html>
<html dir="ltr" lang="pl">
<head>
<meta charset="UTF-8" />
<title>Slider z animacją reagującą na kursor myszy</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header class="container">
<div class="row">
<div class="span4">
<h1><a href="http://lab.fixweb.pl/oldgrafmag"><img src="http://lab.fixweb.pl/oldgrafmag/wp-content/themes/grafmag/img/logo.png" alt="Grafmag" /></a></h1>
</div>
<div class="span8">
<blockquote class="pull-right">
<p>Strona przedstawiająca działanie slidera z animacją reagującą na kursor myszy.<br />Aby zobaczyć efekt, przesuń kursorem po obrazku.</p>
</blockquote>
</div>
</div>
</header>
<section id="slider-container">
</section>
<section id="content" class="container">
<div class="row">
<div class="span4">
<h3>Lorem ipsum</h3>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
</div>
<div class="span4">
<h3>Lorem ipsum</h3>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
</div>
<div class="span4">
<h3>Lorem ipsum</h3>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
</div>
</div>
</section>
<footer class="container">
<a href="http://lab.fixweb.pl/oldgrafmag">grafmag.pl</a>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jparallax.min.js"></script>
<script src="js/jquery.cycle.js"></script>
<script src="js/tools.js"></script>
</body>
</html>Wyjściowy plik CSS o nazwie style.css wyglądał następująco:
@import url('http://fonts.googleapis.com/css?family=Dosis:500,200');
header {
padding: 50px 0px;
}
header blockquote {
margin: 0px;
}
footer {
margin-top: 20px;
border-top: 1px solid #EEEEEE;
text-align: right;
padding: 10px;
}
Od tego momentu, fragmenty kodu, które będę przedstawiał, będą pochodziły z elementu o identyfikatorze slider-container. Kod CSS natomiast, należy dopisywać do pliku style.css, a cały JavaScript trzeba będzie umieścić w pliku tools.js.
Tworzymy slajdy
Listę slajdów stworzymy za pomocą elementu listy nieuporządkowanej. Każdy element <li> odpowiadał będzie jednemu slajdowi. Wewnątrz slajdu zostanie umieszczona kolejna lista, tym razem z ruchomymi elementami. Kod mojego pierwszego slajdu wygląda następująco:
<ul id="slider">
<!-- początek slajdu -->
<li id="slide-1">
<ul>
<!-- początek listy elementów -->
<li style="width: 2020px; height: 616px; margin-left: -1010px; margin-top: -308px;">
<img src="img/slides/1/bg.jpg" alt="" class="cont" style="left: 0px; top: 0px; width: 2020px; height: 616px;" />
</li>
<li style="width: 421px; height: 296px; margin-left: -210.5px; margin-top: -148px;">
<img src="img/slides/1/back-bird.png" alt="" class="cont" style="left: 640px; top: 50px; width: 421px; height: 296px;" />
</li>
<li style="width: 367px; height: 625px; margin-left: -183.5px; margin-top: -312.5px;">
<img src="img/slides/1/woman.png" alt="" class="cont" style="left: 300px; top: 90px; width: 367px; height: 625px;" />
</li>
<li style="width: 451px; height: 451px; margin-left: -225.5px; margin-top: -225.5px;">
<div class="cont circle green" style="left: -282px; top: 91px; width: 451px; height: 451px;">
<h2>Lato</h2>
<h3>z Grafmagiem</h3>
</div>
</li>
<li style="width: 580px; height: 451px; margin-left: -290px; margin-top: -225.5px;">
<img src="img/slides/1/front-bird.png" alt="" class="cont" style="left: -210px; top: -190px; width: 580px; height: 451px;" />
</li>
<!-- koniec listy elementów -->
</ul>
</li>
<!-- koniec slajdu -->
</ul>Żeby całość wyglądała poprawnie, musimy zaaplikować jeszcze następujący fragment kodu CSS:
#slider-container {
position: relative;
width: 100%;
height: 516px;
margin-bottom: 17px;
}
#slider {
overflow: hidden;
width: 100%;
height: 516px;
margin: 0px;
}
#slider li {
position: relative;
overflow: hidden;
width: 100%;
height: 516px;
list-style-type: none;
}
#slider li ul {
margin: 0px;
}
#slider li ul li {
position: absolute;
left: 50%;
top: 50%;
overflow: visible;
list-style-type: none;
}
#slider li ul li .cont {
position: absolute;
display: block;
}Już spieszę z wyjaśnieniami, skąd to się wszystko wzięło. Elementowi #slider-container nadajemy taką szerokość i wysokość, jaką chcemy uzyskać dla naszego slidera. Pozycjonowanie relatywne przyda się w kolejnym etapie, kiedy będziemy dodawali nawigację. Element #slider stylujemy podobnie, z tym, że nadajemy mu overflow: hidden;, aby na raz zawsze widoczny był tylko jeden slajd. Podobnie postępujemy z elementami dla poszczególnych slajdów (#slider li). Teraz czas na polecenia dla warstw, które będą się ruszały reagując na położenie myszy. Aby prawidłowo je spozycjonować, będą nam potrzebne dwa elementy HTML (w moim kodzie to #slider li ul li oraz #slider li ul li .cont). Obu tym elementom nadajemy position: absolute;, natomiast pierwszemu z nich dodatkowo dodajemy left: 50%; top: 50%;, aby jego prawy górny róg znajdował się zawsze na środku slajdu. overflow: visible; jest niezbędne, aby elementy z klasą cont mogły wystawać poza swojego rodzica.
Teraz skupimy się na kodzie CSS umieszczonym w atrybutach style. W elementach <li> wpisałem wielkość warstwy (z reguły jest to wielkość obrazka, który ma się poruszać) oraz wyśrodkowałem element względem slajdu za pomocą ujemnego marginesu górnego i lewego (w górny margines należy wpisać połowę wysokości, a w lewy – połowę szerokości, co razem z wcześniej w arkuszu stylów ustawionym left: 50%; top: 50%; daje nam dokładne wyśrodkowanie). W samym elemencie warstwy wpisałem znów jej wymiary i za pomocą top i left umieściłem warstwę we właściwej pozycji na slajdzie. Na tym polega cały sekret. Element <li> jest zawsze na środku, podczas gdy element wewnątrz jest odpowiednio spozycjonowany względem środka. Skrypt Parallax będzie poruszał element <li> stosownie do ruchu kursora myszy. Zaraz ten ruch dodamy.
Dodajemy ruch
Czas teraz na odrobinę JavaScriptu. Aby wprawić w ruch warstwy na pierwszym slajdzie, potrzebny nam będzie taki oto kod:
$(function() {
$('#slide-1 li').parallax({
mouseport: $('#slider-container'),
decay: 0
}, {
xparallax: '50px',
yparallax: '50px'
}, {
xparallax: '20px',
yparallax: '20px'
}, {
xparallax: '70px',
yparallax: '70px'
}, {
xparallax: '10px',
yparallax: '10px'
}, {
xparallax: '40px',
yparallax: '40px'
});
});Powyższy kod konfiguruje plugin Parallax dla pierwszego slajdu. Konfiguracja dla poszczególnych warstw zawarta jest w klamrach (z wyjątkiem klamry pierwszej, która odpowiada za konfigurację całości) i oddzielona przecinkami, więc jeśli mamy więcej lub mniej warstw, należy dodać lub usunąć klamry. W pierwszej klamrze odpowiadającej za całość, w poleceniu mouseport podajemy element, względem którego ruch myszy ma być badany. Polecenie decay odpowiada za czas (w milisekundach), w którym warstwy mają ustawić się w odpowiednim miejscu, gdy najedziemy na element podany w poleceniu mouseport. W klamrach odpowiadających za konfigurację warstw, użyłem dwóch poleceń xparallax oraz yparallax. To tam podajemy, jak bardzo dana warstwa ma się przesuwać – o ile pikseli w osi X i w osi Y. Bardziej dociekliwi znajdą zapewne więcej opcji konfiguracyjnych, ja użyłem tylko tych.
Dodajemy kolejne slajdy
Analogicznie postępujemy z następnymi slajdami. Ja dodałem trzy, każdy po pięć warstw i mój końcowy kod HTML wygląda następująco:
<section id="slider-container">
<ul id="slider">
<li id="slide-1">
<ul>
<li style="width: 2020px; height: 616px; margin-left: -1010px; margin-top: -308px;">
<img src="img/slides/1/bg.jpg" alt="" class="cont" style="left: 0px; top: 0px; width: 2020px; height: 616px;" />
</li>
<li style="width: 421px; height: 296px; margin-left: -210.5px; margin-top: -148px;">
<img src="img/slides/1/back-bird.png" alt="" class="cont" style="left: 640px; top: 50px; width: 421px; height: 296px;" />
</li>
<li style="width: 367px; height: 625px; margin-left: -183.5px; margin-top: -312.5px;">
<img src="img/slides/1/woman.png" alt="" class="cont" style="left: 300px; top: 90px; width: 367px; height: 625px;" />
</li>
<li style="width: 451px; height: 451px; margin-left: -225.5px; margin-top: -225.5px;">
<div class="cont circle green" style="left: -282px; top: 91px; width: 451px; height: 451px;">
<h2>Lato</h2>
<h3>z Grafmagiem</h3>
</div>
</li>
<li style="width: 580px; height: 451px; margin-left: -290px; margin-top: -225.5px;">
<img src="img/slides/1/front-bird.png" alt="" class="cont" style="left: -210px; top: -190px; width: 580px; height: 451px;" />
</li>
</ul>
</li>
<li id="slide-2">
<ul>
<li style="width: 2020px; height: 616px; margin-left: -1010px; margin-top: -308px;">
<img src="img/slides/2/bg.jpg" alt="" class="cont" style="left: 0px; top: 0px; width: 2020px; height: 616px;" />
</li>
<li style="width: 514px; height: 448px; margin-left: -257px; margin-top: -224px;">
<img src="img/slides/2/yellow-splatter.png" alt="" class="cont" style="left: 270px; top: 100px; width: 514px; height: 448px;" />
</li>
<li style="width: 342px; height: 665px; margin-left: -171px; margin-top: -332.5px;">
<img src="img/slides/2/drink.png" alt="" class="cont" style="left: 410px; top: 75px; width: 342px; height: 665px;" />
</li>
<li style="width: 451px; height: 451px; margin-left: -225.5px; margin-top: -225.5px;">
<div class="cont circle pink" style="left: -282px; top: -100px; width: 451px; height: 451px;">
<h2>Lato</h2>
<h3>z Grafmagiem</h3>
</div>
</li>
<li style="width: 915px; height: 684px; margin-left: -457.5px; margin-top: -342px;">
<img src="img/slides/2/pink-splatter.png" alt="" class="cont" style="left: -410px; top: -10px; width: 915px; height: 684px;" />
</li>
</ul>
</li>
<li id="slide-3">
<ul>
<li style="width: 2020px; height: 616px; margin-left: -1010px; margin-top: -308px;">
<img src="img/slides/3/bg.jpg" alt="" class="cont" style="left: 0px; top: 0px; width: 2020px; height: 616px;" />
</li>
<li style="width: 219px; height: 345px; margin-left: -257px; margin-top: -224px;">
<img src="img/slides/3/mail.png" alt="" class="cont" style="left: 530px; top: -150px; width: 219px; height: 345px;" />
</li>
<li style="width: 451px; height: 451px; margin-left: -225.5px; margin-top: -225.5px;">
<div class="cont circle brown" style="left: -172px; top: 23px; width: 451px; height: 451px;">
<h2>Lato</h2>
<h3>z Grafmagiem</h3>
</div>
</li>
<li style="width: 574px; height: 686px; margin-left: -287px; margin-top: -343px;">
<img src="img/slides/3/man.png" alt="" class="cont" style="left: 287px; top: 108px; width: 574px; height: 686px;" />
</li>
<li style="width: 1131px; height: 318px; margin-left: -565.5px; margin-top: -159px;">
<img src="img/slides/3/plane.png" alt="" class="cont" style="left: -773px; top: -78px; width: 1131px; height: 318px;" />
</li>
</ul>
</li>
</ul>
</section>Warstwą może być dowolny element HTML, w moim przykładzie w większości są to obrazki, ale zdecydowałem się również na użycie <div>, aby dodać kółka z tekstem. Kod CSS reprezentujący ich wygląd, przedstawia się następująco:
#slider li ul li .circle {
border-radius: 451px;
}
#slider li ul li .circle h2 {
font-family: Dosis;
font-weight: 200;
font-size: 142px;
line-height: 1em;
text-align: center;
text-transform: uppercase;
margin-top: 116px;
color: #f6f7f7;
}
#slider li ul li .circle h3 {
font-family: Dosis;
font-weight: 500;
font-size: 54px;
line-height: 1em;
text-align: center;
}
#slider li ul li .circle.green {
background-color: #1ec8c9;
}
#slider li ul li .circle.green h3 {
color: #074c51;
}
#slider li ul li .circle.pink {
background-color: #ec639b;
}
#slider li ul li .circle.pink h3 {
color: #8e0940;
}
#slider li ul li .circle.brown {
background-color: #c5ad8a;
}
#slider li ul li .circle.brown h3 {
color: #524743;
}Warstwy w każdym slajdzie mogą poruszać się inaczej, stąd uzupełniłem mój kod JavaScript następująco:
$(function() {
$('#slide-1 li').parallax({
mouseport: $('#slider-container'),
decay: 0
}, {
xparallax: '50px',
yparallax: '50px'
}, {
xparallax: '20px',
yparallax: '20px'
}, {
xparallax: '70px',
yparallax: '70px'
}, {
xparallax: '10px',
yparallax: '10px'
}, {
xparallax: '40px',
yparallax: '40px'
});
$('#slide-2 li').parallax({
mouseport: $('#slider-container'),
decay: 0
}, {
xparallax: '50px',
yparallax: '50px'
}, {
xparallax: '20px',
yparallax: '20px'
}, {
xparallax: '70px',
yparallax: '70px'
}, {
xparallax: '10px',
yparallax: '10px'
}, {
xparallax: '40px',
yparallax: '40px'
});
$('#slide-3 li').parallax({
mouseport: $('#slider-container'),
decay: 0
}, {
xparallax: '50px',
yparallax: '50px'
}, {
xparallax: '20px',
yparallax: '20px'
}, {
xparallax: '10px',
yparallax: '10px'
}, {
xparallax: '70px',
yparallax: '70px'
}, {
xparallax: '40px',
yparallax: '40px'
});
});Tworzymy slider
Gdy mamy już przygotowany kod, sprawienie, by slajdy się zmieniały, to już bułka z masłem. Wystarczy wykorzystać do tego plugin jQuery Cycle. Oto kod, który należy wstawić między znakami });, a });, pod koniec pliku tools.js:
$('#slider').cycle({
fx: 'scrollLeft',
pause: true,
timeout: 8000,
pager: '#slider-pagination',
pauseOnPagerHover: true,
activePagerClass: 'active'
});Powyższy kod konfiguruje działanie jQuery Cycle. Polecenie fx informuje o tym, jaki efekt przewijania slajdów ma zostać użyty. pause sprawia, by zmienianie slajdów zostało zatrzymane, gdy kursor myszy się nad nimi znajduje. timeout określa czas, co jaki slajdy mają się zmieniać (w milisekundach). Następne trzy polecenia odnoszą się do nawigacji, którą zaraz utworzymy. Określają one, w jakim elemencie ma zostać ona utworzona, informują, że zmiana slajdów ma zostać zatrzymana, gdy kursor myszy znajduje się nad nawigacją i określają nazwę klasy dodawaną do aktywnego elementu.
Ponieważ mój slider zajmuje całą szerokość przeglądarki, skrypt musi przeliczyć jego szerokość za każdym razem, gdy okno przeglądarki zmienia swoje wymiary. Poniższy kod nie jest więcej potrzebny tym z Was, którzy zdecydują się zrobić podobny slider o stałej szerokości. Wstawiamy go zaraz pod tym, który podałem powyżej. Pierwsza część kodu niszczy poprzedni slider, a kolejna tworzy go na nowo, dlatego musi być ona identyczna z powyższym fragmentem.
$(window).resize(function() {
$('#slider').cycle('destroy');
$('#slider-pagination').empty();
$('#slider').cycle({
fx: 'scrollLeft',
pause: true,
timeout: 8000,
pager: '#slider-pagination',
pauseOnPagerHover: true,
activePagerClass: 'active'
});
});Dodajemy nawigację
Przed chwilą powiedzieliśmy skryptowi, w którym miejscu ma wstawić nawigację, teraz musimy wstawić do naszego HTMLa wymagany element. Powinien się on znaleźć #slider-container, zaraz przed jego końcem:
</ul>
<div id="slider-pagination"></div>
</section>jQuery Cycle automatycznie wygeneruje w nim hiperłącza, naszym zadaniem będzie jedynie nadać im odpowiedni wygląd. Odpowiada za to poniższy kod CSS:
#slider-pagination {
position: absolute;
width: 936px;
height: 13px;
bottom: 33px;
left: 50%;
margin-left: -468px;
z-index: 10;
}
#slider-pagination a {
font-size: 1px;
line-height: 1em;
display: block;
float: left;
width: 10px;
height: 10px;
border: 3px solid #ffffff;
background-color: #535353;
text-indent: -11985px;
margin-right: 10px;
border-radius: 10px;
}
#slider-pagination a:hover, #slider-pagination a.active {
background-color: #ec639b;
}Zrozumienie powyższego kodu nie powinno sprawiać trudności. W #slider-pagination ustawiamy pozycję nawigacji. W elemencie a musimy jedynie usunąć cyferki, które skrypt generuje. Do tego służą polecenia text-indent ustawione na dużą ujemną liczbę. Reszta to jedynie ustawienie wyglądu odnośników.
Zakończenie
W tym momencie możemy już rozkoszować się pięknym, interaktywnym sliderem, jaki udało nam się wykonać. Liczba modyfikacji, jakie można w nim zastosować, zależna jest jedynie od Waszej wyobraźni. Dodatkowe opcje konfiguracji znajdziecie w dokumentacji jParallax oraz dokumentacji jQuery Cycle. Możecie również eksperymentować z ilością slajdów i warstw, a także z wymiarami całego slidera. Jeśli uda Wam się stworzyć własny slider z wykorzystaniem tego artykułu, nie wahajcie się nim pochwalić w komentarzu.
Nie ukrywam, że do wykonania tego efektu potrzebna jest przynajmniej średnia wiedza zakresu kaskadowych arkuszy stylów (CSS) i HTML. Jeśli dopiero zaczynasz bawić się w tworzenie stron internetowych, spróbuj zacząć od czegoś łatwiejszego.
Niektóre ze zdjęć wykorzystanych podczas tworzenia tego artykułu pochodzą z banku zdjęć Depositphotos, więc nie można z nich korzystać w swoich pracach.
