Плагин FullPage — создание одностраничного сайта со скроллом по секциям

Плагин FullPage - создание одностраничного сайта со скроллом по  секциям

От автора: В данном уроке мы с Вами рассмотрим очень интересный плагин для библиотеки jQuery – FullPage.js, при помощи которого можно создать одностраничный сайт со скроллом по секциям.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

Установка плагина

Итак, для сегодняшнего урока мы будем использовать следующий тестовый сайт:

Состоит он из одного файла index.html и вот его исходный код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset='utf-8'>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Тестовый однстраничный сайт</title>

	<link rel="stylesheet" type="text/css" href="style.css" />
		
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

</head>
<body>

<ul id="menu">
	<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
	<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
</ul>

<div id="fullpage">
	<div class="section" id="section0">
		<div class="intro">
			<h1>Страница 1</h1>
			<p>Произвольный текст</p>
		</div>
	</div>
	
	<div class="section" id="section1">
	    <div class="slide" id="slide1">
			<div class="intro">
				<h1>Слайд 1</h1>
				<p>
					Для перехода к следующему слайду, нажмите по одной из кнопок панели навигации
				</p>
			</div>
		</div>

	    <div class="slide" id="slide2">
			<h1>Слайд 2</h1>
				<p>
					Для перехода к следующему слайду, нажмите по одной из кнопок панели навигации
				</p>
		</div>
		<div class="slide" id="slide2">
			<h1>Слайд 3</h1>
				<p>
					Для перехода к следующему слайду, нажмите по одной из кнопок панели навигации
				</p>
		</div>
		<div class="slide" id="slide2">
			<h1>Слайд 4</h1>
				<p>
					Для перехода к следующему слайду, нажмите по одной из кнопок панели навигации
				</p>
		</div>

	</div>
	<div class="section" id="section2">
		<div class="intro">
			
			<img src="img/used-by-fullpage.PNG" />
			<h1>Третья страница</h1>
			<p>Hello</p>
			
			
		</div>
	</div>
</div>


</body>
</html>

Обратите внимание, у меня уже подключена библиотека jQuery, которая необходима для работы плагина FullPage.js. Если у Вас данная библиотека не подключена, обязательно подключите ее.

Теперь обратите внимание на структуру html разметки. Общий контейнер div с идентификатором fullpage — это блок, в котором расположены секции. Каждая секция – это отдельный блок div с классом section. В каждой секции мы можем располагать любой необходимый нам контент. Помимо контента в секциях мы можем отобразить сладшоу, для этого необходимо в секции создать блок div с классом slide. Опять же каждый слайд может содержать произвольный контент.

Теперь перейдем на официальный сайт http://alvarotrigo.com/fullPage/ и скачаем плагин Fullpage.js:

В результате скачивания мы получаем архив, далее его необходимо распаковать и в папке полученной после распаковки мы найдем главный файл библиотеки jquery.fullPage.js. Его необходимо скопировать в папку скриптов нашего сайта и подключить. Также из папки vendors Вам может понадобиться плагин jquery.slimscroll.min.js, который используется для создания вертикальной полосы прокрутки в отдельных блоках сайта.

<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>

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

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

После подключения, файлов, выберем блок div с идентификатором fullpage, при помощи библиотеки jQuery и вызовем метод fullpage():

jQuery(document).ready(function($) {
		$("#fullpage").fullpage({
			sectionsColor:['#C63D0F','#1BBC9B','#7E8F7C']
});
})

Обратите внимание, что при вызове метода я использую настройку sectionsColor, которая позволяет задать цвет фона для каждой секции в отдельности. Теперь давайте перейдем в браузер и посмотрим, что изменилось:

Как Вы видите, все успешно работает.

Настройки плагина FullPage.js

Теперь давайте поговорим о настройках плагина, для этого добавим еще несколько настроек при вызове метода fullpage():

jQuery(document).ready(function($) {
		$("#fullpage").fullpage({
			sectionsColor:['#C63D0F','#1BBC9B','#7E8F7C'],
			anchors:['firstPage','secondPage','3rdPage'],
			menu:'#menu',
			scrollBar:false,
			scrollOverflow:true
			navigation:true,
			navigationTooltips:['Секция 1','Секция 2','Секция 3'],
			slidesNavigation:true,
			navigationPosition:'left',
			slidesNavPosition:'top'
			loopTop:true,
			loopBottom:true,
			loopHorizontal:false,
			
			afterResize:function(link,index) {
				alert('Hello');
				},
			afterLoad:function(link,index) {
				
				if(index == 3) {
					$("#section2 img").delay(2000).animate({'left':'0%'},2000);
				}
				if(link == '3rdPage') {
					$("#section2 h1").fadeIn(1500,function() {
						$("#section2 p").css({'display':'block'}).animate({'fontSize':'8em'},1000)
					});
				}
				
			}*/
			
		});
	})

А также несколько правил CSS, для контента третьего слайда:

#section2 img {
	left:130%;
	position:relative;
}
#section2 p, #section2 h1{
	display:none;
}

Пояснение настроек:

anchors – идентификаторы ссылок на секции (в виде массива), что позволит быстро переместиться к нужной секции;

menu – идентификатор меню – необходим, что бы отмечать ссылки соответствующие выбранной секции;

scrollbar – если данной настройке передать значение TRUE, будет показа вертикальная полоса прокрутки браузера;

scrollOverflow – данная настройка необходима для отображения скрола внутри секции, в том случае если контент выходит за ее границы;

navigation — если данной настройке передать значение TRUE, будет отображена навигационная панель по секциям;

navigationTooltips – массив всплывающих подсказок, для каждого элемента навигационной панели;

slidesNavigation — если данной настройке передать значение TRUE, то в секции слайдов, будет отображена навигация по слайдам;

navigationPosition – позиция навигации по секциям (поддерживаемые значения left и right);

slidesNavPosition — позиция навигации по слайдам (поддерживаемые значения bottom и top);

loopTop — если данной настройке передать значение TRUE, то перемещение по секциям, будет бесконечным (но только в направлении вверх – к первому слайду). То есть, если на первом слайде вращать колесо мыши вперед, то будет выполнено перемещение к последнему слайду.

loopBottom – аналогично предыдущей настройке, только направление вниз.

loopHorizontal – аналогично предыдущим настройкам, только работает для слайдов.

Теперь обратите внимание на настройку afterLoad – это обработчик события, и он срабатывает после загрузки секции. То есть, перемещаясь от секции к секции, данное событие будет выполняться после отображения каждой секции. Данный обработчик позволяет описать функцию, которая будет выполняться после загрузки каждой секции. Функция принимает в качестве параметров, два значения: первый – это идентификатор привязанной ссылки к текущей секции, второй – это индекс секции – ее номер, индексация секций начинается с 1. используя данное событие можно выполнять различные анимационные эффекты при переходе к определенным секциям (посмотрите как сейчас отображается третья секция).

Так же есть еще несколько обработчиков событий:

onLeave — срабатывает при перемещении к следующей секции – в момент перемещения;

afterRender — срабатывает после инициализации скрипта;

afterResize — срабатывает при изменении размеров окна браузера;

afterSlideLoad — срабатывает при перемещении от слайда к слайду, и только после полной загрузки следующего слайда;

onSlideLeave — срабатывает при перемещении к следующему слайду.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

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

Комментарии (19)

  1. Дмитрий

    Буквально на днях освоил этот скрипт.
    Думал сначала не смотреть видео, все-таки 40 минут.. Однако подробный разбор, легко преподносимые примеры открыли для меня несколько новых возможностей скрипта.

    Отличное видео! Спасибо)

  2. Александр

    с плагином вроде разобрался спасибо за описание, но не знаю как реализовать одну вещь, у меня меню и хедер прокручиваются по всем страницам, но вот на самом первом экране они не должны отображаться, через скрипт прописал им hide(0), но сначала идет загрузка страницы а потом только прячется хедер и меню, подскажите как сделать чтобы меню с хедером не появлялись на первом экране при загрузке сайта и при скролле вверх к нему???

  3. Алексей

    Переход по меню не срабатывал. data-menuanchor исправил на data-anchor

  4. Паша

    Уважаемый Виктор.
    Спасибо за полезный урок и видео.
    Собрал сайтик на этом плагине, но возникла проблема:
    невозможно прокрутить содержимое блоков, я имею ввиду когда их содержимое скрыто overflow: hidden; то скролинг перемещает нас по сайту. Хочется чтоб секция не двигалась, а содержимое блока да.
    Есть решение?

  5. Виктор Гавриленко

    Здравствуйте!
    Пожалуйста!
    В вашем случае нужно пробовать использовать настройки. Обратите внимание на настройку normalScrollElements, возможно она Вам поможет Ссылка.

  6. Марина

    Виктор, добрый день.
    Спасибо за Ваш урок и такие подробные разъяснения.

    Скажите, пожалуйста, а Вы пробовали использовать этот плагин (WP FullPage) для WordPress? Есть какие-то существенные отличия?

    • Виктор Гавриленко

      Здравствуйте, Марина!
      Честно говоря для WordPress не пробовал но думаю проблем возникнуть не должно, главное что бы тема подходила по HTML структуре.

  7. Андрей

    Здравствуйте!
    Не подскажите сработает ли данный скрипт на шаблоне Helix III от joomshaper если при создании сайта использовался SP pege builder?

  8. Александр

    Доброго времени суток, не подскажете, можно ли сделать так, чтобы при горизонтальном скролле отображались сразу по два слайда?

  9. Алексей

    Как подружить плагины WOW.js и jquery.fullPage.js? По отдельности все работает, вместе подключить — пропадает анимация WOW.js. Пробовал решение из зарубежных форумов — не помогло. Может кто-нибудь сталкивался с подобным?

    • Александр

      Попробуй повесить инициализацию wow.js на какое нибудь событие из списка
      //events
      onLeave: function(index, nextIndex, direction){},
      afterLoad: function(anchorLink, index){},
      afterRender: function(){},
      afterResize: function(){},
      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
      onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}

  10. Руслан

    Я не могу понять, почему в li прописаны data-menuanchor и ссылках id, но при этом секции указаны другим названием? Как я, нажав на якорь firstPage, попадаю на section0???

  11. Omer

    Спасибо, все понятно объяснили

  12. Анжела

    Добрый День сделала прокрутку как в демо версии apple.html — ничего не меняла — все подходит. А как ее адаптировать под мобильную версию? Пробывала прописывать
    responsiveWidth: 900,
    afterResponsive: function(isResponsive
    Тогда все вообще не работает

  13. Александр

    Я добавил в скрипт:
    responsiveHeight: 700,

    А в CSS добавил:
    @media screen and (max-width: 700px){
    #fullpage .fp-section,
    .fp-tableCell,
    .fp-scrollable {
    height: auto!important;
    }

    • Анжела

      Добавила — не решило проблему(
      У меня именно секции с этим (ниже) отображаются криво косо при мобильной версии,

      КОД

      ‘afterLoad’: function(anchorLink, index){
      if(index == 2){
      $(‘#iphone3, #iphone2, #iphone4′).addClass(‘active’);
      }
      },

      ‘onLeave’: function(index, nextIndex, direction){
      if (index == 3 && direction == ‘down’){
      $(‘.section’).eq(index -1).removeClass(‘moveDown’).addClass(‘moveUp’);
      }
      else if(index == 3 && direction == ‘up’){
      $(‘.section’).eq(index -1).removeClass(‘moveUp’).addClass(‘moveDown’);
      }

      $(‘#staticImg’).toggleClass(‘active’, (index == 2 && direction == ‘down’ ) || (index == 4 && direction == ‘up’));
      $(‘#staticImg’).toggleClass(‘moveDown’, nextIndex == 4);
      $(‘#staticImg’).toggleClass(‘moveUp’, index == 4 && direction == ‘up’);
      }
      });
      });

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree