Scrolling Layout with waypoints

W dzisiejszym poradniku — “Scrolling Layout with waypoints”, czyli jak zrobić stronę one-page, czyli przewijaną stronę z nawigacją. W tym przypadku będzie to nawigacja w postaci kółeczek po prawej stronie ekranu. Jeśli jesteś zainteresowany wykonaniem takiej strony, to zapraszam Cię do przeczytania tego poradnika.

Jeśli chcesz zobaczyć, co będziemy robić, w linku poniżej umieściłem gotową stronę do poglądu.

[button url=”http://demo.wojtek1150.com/ScrollingLayout/" target=”blank” size=”5" center=”yes” icon=”icon: flask”]DEMO[/button]

Zanim zaczniemy pobierz sobie 3 skrypty JavaScript. Będą one potrzebne przy tworzeniu strony:

• modernizr.custom.js
• jquery.easing.min.js
• waypoints.min.js

Wszystkie te pliczki znajdziesz w katalogu js w źródłach, które są zamieszczone na końcu artykułu. Jeśli już masz wszystko gotowe, to zaczynamy.

Najpierw HTML, bo bez tego ani rusz :P

<div id="scroller" class="scroller">
	<nav>
		<a href="#niebieski" class="aktywny">Section 1</a>
		<a href="#fioletowy">Section 2</a>
		<a href="#bordowy">Section 3</a>
		<a href="#zielony">Section 4</a>
		<a href="#drugi-zielony">Section 5</a>
	</nav>
	<section id="niebieski"></section>
	<section id="fioletowy"></section>
	<section id="bordowy"></section>
	<section id="zielony"></section>
	<section id="drugi-zielony"></section>
</div>

Kolejną rzeczą jaką potrzebujemy będzie CSS, który również znajdziesz poniżej.

/* Ustawienie na pełną wysokość */
html, body, 
.container,
.scroller,
.scroller section { 
	height: 100%; 
}
/* Ustawinie pozycji dla kropeczek */
.scroller > nav {
	position: fixed;
	z-index: 9999;
	right: 100px;
	top: 50%;
	width: 18px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.scroller > nav a {
	display: block;
	position: relative;
	z-index: 9999;
	color: transparent;
	width: 18px;
	height: 18px;
	outline: none;
	margin: 25px 0;
	border-radius: 50%;
	border: 4px solid #fff;
}
.no-touch .scroller > nav a:hover {
	background: rgba(255,255,255,0.6);
}
.scroller > nav a.aktywny {
	background: #fff;
}
#niebieski {
	background: #0054A6;
}
#fioletowy {
	background: #6900A6;
}
#bordowy {
	background: #A60046;
}
#zielony {
	background: #4EA600;
}
#drugi-zielony {
	background: #00A646;
}
Na sam koniec JavaScript:
var ScrollLayout = (function() {
var config = {
		// Jakie sekcje pobierać (uwaga! musisz linkować do wszystkich sekcji które wybierzesz)
		$sections : $( '#scroller > section' ),
		// Gdzie jest nawigacja
		$navlinks : $( '#scroller > nav:first > a' ),
		// Wskaźniki bierzącej sekcji / linku
		currentLink : 0,
		// body element
		$body : $( 'html, body' ),
		// prędkość animacji
		animspeed : 650,
		// jaka animacja ma być wykorzystana (jquery easing)
		animeasing : 'easeInOutExpo'
	};
function init() {
// Kliknij na link nawigacji: strona jest przewijana do pozycji odpowiedniej sekcji
		config.$navlinks.on( 'click', function() {
			scrollAnim( config.$sections.eq( $( this ).index() ).offset().top );
			return false;
		} );
// 2 waypointy są zdefiniowane:
		// Pierwszy, kiedy scrollujem w dół: Link w nawigacji jest zaktualizowany. "Nowy rozdział" zostanie osiągnięty, gdy zajmuje więcej niż 70% ekranu
		// Drugi, kiedy scrollujemy w górę: Link w nawigacji jest zaktualizowany. "Nowy rozdział" zostanie osiągnięty, gdy zajmuje więcej niż 70% ekranu
		config.$sections.waypoint( function( direction ) {
			if( direction === 'down' ) { changeNav( $( this ) ); }
		}, { offset: '30%' } ).waypoint( function( direction ) {
			if( direction === 'up' ) { changeNav( $( this ) ); }
		}, { offset: '-30%' } );
}
// Aktualizacja linku - czyli dodajemy kropeczce kolorów ^^
	function changeNav( $section ) {
		config.$navlinks.eq( config.currentLink ).removeClass( 'aktywny' );
		config.currentLink = $section.index( 'section' );
		config.$navlinks.eq( config.currentLink ).addClass( 'aktywny' );
	}
// Funkcja, która odpowiada za animacje i scrollowanie
	function scrollAnim( top ) {
		config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing );
	}
return { init : init };
})();
Nie widzę potrzeby omawiania w artykule wszystkich opcji po kolei, bo po pierwsze czytając ten wpisz zapewne masz jakiekolwiek pojęcie na temat tworzenia stron, więc nie muszę omawiać co to jest. Jeśli nie, to zapraszam do kursu HTML, który znajdziesz na blogu i który również w najbliższych dniach ruszy dalej :)
Dla tych co nie mogli sobie poradzić z implementacją kodu, pliki źródłowe:
[wpdm_file id=6]
Mam nadzieję, że pomogłem. Pytania, oceny? PISZCIE!  ;-)