Full page jQuery plugin scrolling | Wiki | PWODEV
, 04.12.2017 11:56

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. Кладем файлы в нужные папки и подключаем скрипты к нашему сайту:
    <link rel="stylesheet" type="text/css" media="all" href="css/jquery.fullpage.min.css">
    <script type="text/javascript" src="js/jquery.fullpage.min.js"></script>
  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>
    </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


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