Full page jQuery plugin scrolling

Раньше мы рассматривали как получить высоту экрана, а сегодня рассмотрим Full page плагин ссылка — https://alvarotrigo.com/fullPage/, который делает это самостоятельно.

Очень полезный плагин для того чтобы реализовать сайт в полный экран с прокруткой до блока.

Документация на русском языке

Как работает Full page плагин:

1. Для начала скачиваем последнюю версию плагина с официального сайта.

2. Нас интересует 2 файла — jquery.fullpage.min.css и jquery.fullpage.min.js

3. Кладем файлы в нужные папки и подключаем скрипты к нашему сайту:

4. Далее в коде где будем использовать создаем такую структуру

<div class="scroll_slider">
	<div class="section" data-anchor="slide1">
		<div class="slide slide1">1</div>
		<div class="slide slide2">2</div>
	</div>
	<div class="section" data-anchor="slide2">
		<div class="slide slide1">2</div>
	</div>
</div>

5. И последнее подключаем скрипт к контейнеру:

jQuery(document).ready(function () {
     jQuery('.scroll_slider').fullpage();
});

Готово, наш скрипт работает.

Если нужно поменять селекторы контейнеров делаем это так:

jQuery('.scroll_slider').fullpage({
 sectionSelector: '.section',
 slideSelector: '.slide'
});

Полный список параметров:

jQuery(document).ready(function() {
 jQuery('.scroll_slider').fullpage({
 //Navigation
 menu: '#menu',
 lockAnchors: false,
 anchors:['firstPage', 'secondPage'],
 navigation: false,
 navigationPosition: 'right',
 navigationTooltips: ['firstSlide', 'secondSlide'],
 showActiveTooltip: false,
 slidesNavigation: false,
 slidesNavPosition: 'bottom',

 //Scrolling
 css3: true,
 scrollingSpeed: 700,
 autoScrolling: true,
 fitToSection: true,
 fitToSectionDelay: 1000,
 scrollBar: false,
 easing: 'easeInOutCubic',
 easingcss3: 'ease',
 loopBottom: false,
 loopTop: false,
 loopHorizontal: true,
 continuousVertical: false,
 continuousHorizontal: false,
 scrollHorizontally: false,
 interlockedSlides: false,
 dragAndMove: false,
 offsetSections: false,
 resetSliders: false,
 fadingEffect: false,
 normalScrollElements: '#element1, .element2',
 scrollOverflow: false,
 scrollOverflowReset: false,
 scrollOverflowOptions: null,
 touchSensitivity: 15,
 normalScrollElementTouchThreshold: 5,
 bigSectionsDestination: null,

 //Accessibility
 keyboardScrolling: true,
 animateAnchor: true,
 recordHistory: true,

 //Design
 controlArrows: true,
 verticalCentered: true,
 sectionsColor : ['#ccc', '#fff'],
 paddingTop: '3em',
 paddingBottom: '10px',
 fixedElements: '#header, .footer',
 responsiveWidth: 0,
 responsiveHeight: 0,
 responsiveSlides: false,
 parallax: false,
 parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

 //Custom selectors
 sectionSelector: '.section',
 slideSelector: '.slide',

 lazyLoading: true,

 //events
 onLeave: function(index, nextIndex, direction){},
 afterLoad: function(anchorLink, index){},
 afterRender: function(){},
 afterResize: function(){},
 afterResponsive: function(isResponsive){},
 afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
 onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
 });
});

Если у вас есть дополнения или новые идеи к этой статье, пишите их в комментариях. Также для того чтобы написать на нашем сайте свою статью — у нас открыта регистрация по ссылке http://wiki.pwodev.com/wp-admin