pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections. http://alvarotrigo.com/pagePiling/

Last update: Dec 29, 2022

Overview

pagePiling.js

Pile your sections one over another and access them scrolling or by URL!

Invite me to a coffee

Customizations of the plugin available upon request for some reasonable price. Contact me.

Would you like to have a website using pilePage.js functionality but you don't know how to use it? I can do it for you for a reasonable price. Contact me.

Introduction

Suggestion are more than welcome, not only for feature requests but also for coding style improvements. Let's make this a great plugin to make people's lives easier!

Compatibility

pagePiling.js is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 8, 9, Opera 12, etc. It works with browsers with CSS3 support and with the ones which don't have it, making it ideal for old browsers compatibility.

It is also designed to work on touch devices such as mobile phones or tablets.

Special thanks to Browserstack for supporting pagePiling.js.

Usage

As you can see in the example files, you will need to include the JavaScript file jquery.pagepiling.js (or the minified version jquery.pagepiling.min.js) and the css file jquery.pagepiling.css of the plugin, as well as jQuery. Optionally, you can add the jQuery UI library in case you want to use other easing effects apart from the ones included in the jQuery library which are the linear or swing effects.

Install using bower:

Optionally, you can install pagePiling.js with bower: Terminal:

bower install pagepiling.js

Including files:

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>

Optional use of CDN

If you prefer to use a CDN to load the needed files, pagePiling.js is in CDNJS: https://cdnjs.com/libraries/pagePiling.js

Required HTML structure

Each section will be defined with a div containing the section class. The active section by default will be the first section, which is taken as the home page.

<div id="pagepiling">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

Initialization

All you need to do is call the plugin inside a $(document).ready function:

$(document).ready(function() {
	$('#pagepiling').pagepiling();
});

A more complex initialization with all options set could look like this:

$(document).ready(function() {
	$('#pagepiling').pagepiling({
	    menu: null,
        direction: 'vertical',
        verticalCentered: true,
        sectionsColor: [],
        anchors: [],
        scrollingSpeed: 700,
        easing: 'swing',
        loopBottom: false,
        loopTop: false,
        css3: true,
        navigation: {
            'textColor': '#000',
            'bulletsColor': '#000',
            'position': 'right',
            'tooltips': ['section1', 'section2', 'section3', 'section4']
        },
       	normalScrollElements: null,
        normalScrollElementTouchThreshold: 5,
        touchSensitivity: 5,
        keyboardScrolling: true,
        sectionSelector: '.section',
        animateAnchor: false,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
	});
});

Accesing sections

In order to create links to a certain section, you can use a normal URL link if you are using pagePiling.js with anchor links (using the anchors option), then you will be able to use anchor links also to navigate directly to a certain section. For example: http://alvarotrigo.com/pagePiling/#page2

Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).

Using a menu

To link the menu with the active section you will have to use the menu option and make use of anchor links (#) as explained below in the options section.

Creating a scrollable section

In case you want to have a section with large content and therefore create an scroll bar for that section, you can do it by adding the class pp-scrollable to that section:

<div class="section pp-scrollable"></div>

Options

verticalCentered: (default true) Vertically centering of the content within sections.
scrollingSpeed: (default 700) Speed in milliseconds for the scrolling transitions.
sectionsColor:(default none) Define the CSS background-color property for each section: Example:

$('#pagepiling').pagepiling({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

anchors: (default []) Defines the anchor links (#example) to be shown on the URL for each section. Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section. Be careful! if you use anchors, they can not have the same value as any ID element on the site (or NAME element for IE).

Important It is helpful to understand that the values in the anchors option array correlate directly to the element with the class of .section by it's position in the markup.

easing: (default swing) Defines the transition effect to use for the vertical scrolling. It requires jQuery UI in order to use any other transition other than swing and linear. Other libraries could be used instead.
loopTop: (default false) Defines whether scrolling up in the first section should scroll to the last one or not.
loopBottom: (default false) Defines whether scrolling down in the last section should scroll to the first one or not.
css3: (default true). Defines wheter to use JavaScript or CSS3 transforms to scroll within sections. Useful to speed up the movement in tablet and mobile devices with browsers supporting CSS3. If this option is set to true and the browser doesn't support CSS3, a jQuery fallback will be used instead.
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2')
normalScrollElementTouchThreshold : (default 5) Defines the threshold for the number of hops up the html node tree pagePiling will test to see if normalScrollElements is a match to allow scrolling functionality on divs on a touch device. (For example: normalScrollElementTouchThreshold: 3)
keyboardScrolling: (default true) Defines if the content can be navigated using the keyboard
touchSensitivity: (default 5) Defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next section.
animateAnchor: (default true) Defines whether the load of the site when given an anchor (#) will scroll with animation to its destination or will directly load on the given section.
direction: (default vertical) Defines if the scroll is vertical or horizontal.
menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. Example:

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

$('#pagepiling').pagepiling({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

Note: the menu element should be placed outside the pagePiling wrapper in order to avoid problem when using css3:true. Otherwise it will be appended to the body by the plugin itself.

navigation: (default false) If set to true, it will show a navigation bar made up of small circles.
sectionSelector: (default .section) Defines the jQuery selector used for the plugin sections. It might need to be changed sometimes to avoid problem with other plugins using the same selectors as pagePiling.js..

Methods

moveSectionUp()

Scrolls one section up:

$.fn.pagepiling.moveSectionUp();

moveSectionDown()

Scrolls one section down:

$.fn.pagepiling.moveSectionDown();

moveTo(section)

Scrolls the page to the given section.

/*Scrolling to the section with the anchor link `firstSection`  */
$.fn.pagepiling.moveTo('firstSection');

//Scrolling to the 3rd section in the site
$.fn.pagepiling.moveTo(3);

//Which is the same as
$.fn.pagepiling.moveTo(3);

setAllowScrolling(boolean)

Adds or remove the possibility of scrolling through sections by using the mouse wheel/trackpad or touch gestures (which is active by default).

$.fn.pagepiling.setAllowScrolling(false);

setKeyboardScrolling(boolean)

Adds or remove the possibility of scrolling through sections by using the keyboard arrow keys (which is active by default).

$.fn.pagepiling.setKeyboardScrolling(false);

setScrollingSpeed(milliseconds)

Defines the scrolling speed in milliseconds.

$.fn.pagepiling.setScrollingSpeed(700);

Callbacks

afterLoad (`anchorLink`, `index`)

Callback fired once the sections have been loaded, after the scrolling has ended. Parameters:

anchorLink: anchorLink corresponding to the section.
index: index of the section. Starting from 1.

In case of not having anchorLinks defined in the plugin the index parameter would be the only one to use.

Example:

	$('#pagepiling').pagepiling({
		anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

		afterLoad: function(anchorLink, index){
			//using index
			if(index == 3){
				alert("Section 3 ended loading");
			}

			//using anchorLink
			if(anchorLink == 'secondPage'){
				alert("Section 2 ended loading");
			}
		}
	});

onLeave (`index`, `nextIndex`, `direction`)

This callback is fired once the user leaves a section, in the transition to the new section.

Parameters:

index: index of the leaving section. Starting from 1.
nextIndex: index of the destination section. Starting from 1.
direction: it will take the values up or down depending on the scrolling direction.

Example:

	$('#pagepiling').pagepiling({
		onLeave: function(index, nextIndex, direction){
			//after leaving section 2
			if(index == 2 && direction =='down'){
				alert("Going to section 3!");
			}

			else if(index == 2 && direction == 'up'){
				alert("Going to section 1!");
			}
		}
	});

afterRender()

This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).

Example:

	$('#pagepiling').pagepiling({
		afterRender: function(){
			alert("The resulting DOM structure is ready");
		}
	});

Resources

CSS Easing Animation Tool - Matthew Lein

Who is using pagePiling.js

If you want your page to be listed here. Please contact me with the URL.

Donations

Donations would be more than welcome :)

License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments

Problem using the horizontal navigation plugin in Firefox

I'm having trouble using the plugin in firefox browser. When the user scrolls horizontally, the browser blinks between sections. I noticed that it is only in firefox that this happens.

I tested it with the same thing and the same thing happens.

I used a project that is late and now I do not know what to do.

Example
bug

opened by aporreado 15
Firefox 63 flicker

Every slide transition flickers on Firefox 63 (Win7 and OSX High Sierra/El Capitan). Other main browsers seems to be fine. The effect is visible on the main page piling demo site.

update: just realised this sounds similar to #167.
bug

opened by elemdeso 11
Difference between pagePiling and fullPage?

I guess you meant pagePiling.js

Just out of curiosity, what's the difference between pagePiling.js and fullPage.js?

https://github.com/alvarotrigo/fullPage.js

Are there use cases for when I'd use one over the other?

Wondering if the READMEs should mention each other as they look similar in functionality; it might be cool to have a section that gives use cases, like:

This project is based on XXXX; you would use pagePiling.js if you want to do ZZZZ, otherwise use fullPage.js to do YYYYY

… or something like that. :smile: :+1:

In other words, I'd be curious to know which came first and why you decided to branch them into two different code bases.

Awesome plugins btw, thanks!

opened by mhulse 9
added horizontal scrolling ability

Related to issue #9. Since i had the same needs, i thought that maybe other people, would like to have this option available :)

I took the liberty of changing the keyboard bindings of the left and right arrows. For example : $.fn.pagepiling.moveSlideLeft() to $.fn.pagepiling.moveSectionUp()
enhancement

opened by mikesaidani 9
normalScrollElements not working

Hi, building a site where we have several divs that have overflow content to allow scrolling. I've added their ID's to "normalScrollElements" in the initialization of the script, but evne when we scroll on them ,either via touch or via scrollwheel, it still fires the next page transition.

opened by BenComicGraphics 9

noAnchors active state

I would like to hide the anchors, but do need the menu. So I came to the idea to use a function. (see below) But then the active state doesn't work anymore. Is there a better solution to hide the anchors, use the menu and keep the active states?

<script>
    function one() {$.fn.pagepiling.moveTo(1);}
    function two() {$.fn.pagepiling.moveTo(2);}
    function three() {$.fn.pagepiling.moveTo(3);}
</script>

<div class="menu">  
    <div class="active"><a href="javascript:void()" onclick="one()">Wie</a></div>
    <div><a href="javascript:void()" onclick="two()">Wie extra</a></div>
    <div><a href="javascript:void()" onclick="three()">Wat</a></div>
</div>

reproduction required

opened by fourroses666 8

Timers and AutoPlay
Awesome library - thanks!

I was wondering if you have had anyone asking for an autoplay option? So basically you can get rid of the menu and let it play through the pile of pages automatically. If this is done, then you obviously need another option for autoplayDuration which is the amount of time it stays on each page before navigating to the next.

This can then be used in conjunction with the loop option to setup a fullpage slideshow of sorts that can be displayed on a monitor.

Further to this, you could setup different durations per page/section, so that you could have a video clip on a page that plays for 30 seconds and then moves onto the next page, while other pages only show for 10 seconds as they might only have static images.

Something like this:

$('#pagepiling').pagePiling({ loopBottom: true, autoPlay: true, autoPlayDuration: [10000, 20000, 5000, 10000] });
question
opened by bradvin 8
Pages wont change sometimes on the phone

If you go here https://www.andrejoljaca.com/#about on your phone, sometimes the scrolling doesn't work and you have to use the hamburger icon to switch between pages, how do I fix this?

I tried normalScrollElementTouchThreshold: 1, touchSensitivity: 10,

but it did not work.

It works when I scroll in the responsive mode set to iPhone in the chrome browser and works when I refresh the page and then scroll on the phone.

Thanks
reproduction required

opened by aoljaca 7
.htaccess does not allows the folder be readed by apache

I downloaded the project using NPM. Every time when I was trying read the file, my project was saying "File not Found" and giving error 500. The problem was solved when I deletet the .htaccess file inside folder pagepiling.js
question

opened by kalilmaciel 7
Animation effect

First of all - Love your work!!

Its very neat and clean and does what it say. I was just wondering if it would be possible to invert the overlay effect? For example, instead of moving the section upwards, load one from bottom on to top?
enhancement

opened by hassanasad 7
Is it possible to see the sections that are scrolled when you click on an anchor in the menu?
Hello,

I have written the menu of anchors and my pilling JS set-up.

If I click on the anchor #3, when anchor #1 is active (that is, when I'm in the section #1), I would want to reach the section #3 but only after having seen the section #2 scrolling. Is it possible?

For the moment, what PagePiling does is: (anchor #1 -> anchor #3 ; section #1 -> section #3). What I would want is: (anchor #1 -> anchor #3 ; section #1 -> section #2 -> section #3). Or, if you want: (anchor #1 -> anchor #2 -> anchor #3 ; section #1 -> section #2 -> section #3).

Note: the same behavior would be used for when the user clicks on a navigation bullet.

My code:

<ul id="myMenu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li> </ul> <div id="pagepiling"> <div class="section">1 section</div> <div class="section">2 section</div> <div class="section">3 section</div> </div>

body { margin: 0; } .section { height: 100vh; } #myMenu { float: left; }

jQuery(document).ready(function() { jQuery('#pagepiling').pagepiling({ sectionsColor: ['blue', 'red', 'black'], anchors: ['firstPage', 'secondPage', 'thirdPage'], }); });

Thank you! Have a nice day. Best regards,
question
opened by Jars-of-jam-Scheduler 6
Bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.

Changelog

Sourced from qs's changelog.

6.5.3

[Fix] parse: ignore __proto__ keys (#428)

[Fix] utils.merge: avoid a crash with a null target and a truthy non-array source

[Fix] correctly parse nested arrays

[Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)

[Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided

[Fix] when parseArrays is false, properly handle keys ending in []

[Fix] fix for an impossible situation: when the formatter is called with a non-string value

[Fix] utils.merge: avoid a crash with a null target and an array source

[Refactor] utils: reduce observable [[Get]]s

[Refactor] use cached Array.isArray

[Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)

[Refactor] parse: only need to reassign the var once

[Robustness] stringify: avoid relying on a global undefined (#427)

[readme] remove travis badge; add github actions/codecov badges; update URLs

[Docs] Clean up license text so it’s properly detected as BSD-3-Clause

[Docs] Clarify the need for "arrayLimit" option

[meta] fix README.md (#399)

[meta] add FUNDING.yml

[actions] backport actions from main

[Tests] always use String(x) over x.toString()

[Tests] remove nonexistent tape option

[Dev Deps] backport from main

Commits

298bfa5 v6.5.3

ed0f5dc [Fix] parse: ignore __proto__ keys (#428)

691e739 [Robustness] stringify: avoid relying on a global undefined (#427)

1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs

12ac1c4 [meta] fix README.md (#399)

0338716 [actions] backport actions from main

5639c20 Clean up license text so it’s properly detected as BSD-3-Clause

51b8a0b add FUNDING.yml

45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...

f814a7f [Dev Deps] backport from main

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes

Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1

Switch to GitHub workflows 76abc93

Fix issue where decode throws - fixes #6 746ca5d

Update license (#1) 486d7e2

Tidelift tasks a650457

Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

Commits

a0eea46 0.2.2

980e0bf Prevent overwriting previously decoded tokens

3c8a373 0.2.1

76abc93 Switch to GitHub workflows

746ca5d Fix issue where decode throws - fixes #6

486d7e2 Update license (#1)

a650457 Tidelift tasks

66e1c28 Meta tweaks

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump minimatch and gulp
Bumps minimatch to 3.1.2 and updates ancestor dependency gulp. These dependencies need to be updated together.

Updates minimatch from 0.2.14 to 3.1.2

Commits

699c459 3.1.2

2f2b5ff fix: trim pattern

25d7c0d 3.1.1

55dda29 fix: treat nocase:true as always having magic

5e1fb8d 3.1.0

f8145c5 Add 'allowWindowsEscape' option

570e8b1 add publishConfig for v3 publishes

5b7cd33 3.0.6

20b4b56 [fix] revert all breaking syntax changes

2ff0388 document, expose, and test 'partial:true' option

Additional commits viewable in compare view

Maintainer changes

This version was pushed to npm by isaacs, a new releaser for minimatch since your current version.

Updates gulp from 3.9.1 to 4.0.2

Release notes

Sourced from gulp's releases.

v4.0.2

Fix

Bind src/dest/symlink to the gulp instance to support esm exports (5667666) - Ref standard-things/esm#797

Docs

Add notes about esm support (4091bd3) - Closes #2278

Fix the Negative Globs section & examples (3c66d95) - Closes #2297

Remove next tag from recipes (1693a11) - Closes #2277

Add default task wrappers to Watching Files examples to make runnable (d916276) - Closes #2322

Fix syntax error in lastRun API docs (ea52a92) - Closes #2315

Fix typo in Explaining Globs (5d81f42) - Closes #2326

Build

Add node 12 to Travis & Azure (b4b5a68)

v4.0.1

Fix

Temporary workaround for facebook/Docusaurus#257 (9f4a2e9) - Closes facebook/Docusaurus#257

Docs

Fix error in ES2015 usage example (a4e8d48) - Closes #2099 #2100

Add temporary notice for 4.0.0 vs 3.9.1 documentation (126423a) - Closes #2121

Improve recipe for empty glob array (45830cf) - Closes #2122

Reword standard to default (b065a13)

Fix recipe typo (86acdea) - Closes #2156

Add front-matter to each file (d693e49) - Closes #2109

Rename "Getting Started" to "Quick Start" & update it (6a0fa00)

Add "Creating Tasks" documentation (21b6962)

Add "JavaScript and Gulpfiles" documentation (31adf07)

Add "Working with Files" documentation (50fafc6)

Add "Async Completion" documentation (ad8b568)

Add "Explaining Globs" documentation (f8cafa0)

Add "Using Plugins" documentation (233c3f9)

Add "Watching Files" documentation (f3f2d9f)

Add Table of Contents to "Getting Started" directory (a43caf2)

Improve & fix parts of Getting Started (84b0234)

Create and link-to a "docs missing" page for LINK_NEEDED references (2bd75d0)

Redirect users to new Getting Started guides (53e9727)

Temporarily reference gulp@next in Quick Start (2cecf1e)

Fixed a capitalization typo in a heading (3d051d8) - Closes #2242

Use h2 headers within Quick Start documentation (921312c) - Closes #2241

Fix for nested directories references (4c2b9a7)

Add some more cleanup for Docusaurus (6a8fd8f)

Temporarily point LINK_NEEDED references to documentation-missing.md (df7cdcb)

API documentation improvements based on feedback (0a68710)

... (truncated)

Changelog

Sourced from gulp's changelog.

gulp changelog

4.0.0

Task system changes

replaced 3.x task system (orchestrator) with new task system (bach)

removed gulp.reset

removed 3 argument syntax for gulp.task

gulp.task should only be used when you will call the task with the CLI

added gulp.series and gulp.parallel methods for composing tasks. Everything must use these now.

added single argument syntax for gulp.task which allows a named function to be used as the name of the task and task function.

added gulp.tree method for retrieving the task tree. Pass { deep: true } for an archy compatible node list.

added gulp.registry for setting custom registries.

CLI changes

split CLI out into a module if you want to save bandwidth/disk space. you can install the gulp CLI using either npm install gulp -g or npm install gulp-cli -g, where gulp-cli is the smaller one (no module code included)

add --tasks-json flag to CLI to dump the whole tree out for other tools to consume

added --verify flag to check the dependencies in package.json against the plugin blacklist.

vinyl/vinyl-fs changes

added gulp.symlink which functions exactly like gulp.dest, but symlinks instead.

added dirMode param to gulp.dest and gulp.symlink which allows better control over the mode of the destination folder that is created.

globs passed to gulp.src will be evaluated in order, which means this is possible gulp.src(['*.js', '!b*.js', 'bad.js']) (exclude every JS file that starts with a b except bad.js)

performance for gulp.src has improved massively

gulp.src(['**/*', '!b.js']) will no longer eat CPU since negations happen during walking now

added since option to gulp.src which lets you only match files that have been modified since a certain date (for incremental builds)

fixed gulp.src not following symlinks

added overwrite option to gulp.dest which allows you to enable or disable overwriting of existing files

Commits

069350a Release: 4.0.2

b4b5a68 Build: Add node 12 to Travis & Azure

5667666 Fix: Bind src/dest/symlink to the gulp instance to support esm exports (ref s...

4091bd3 Docs: Add notes about esm support (closes #2278)

3c66d95 Docs: Fix the Negative Globs section & examples (closes #2297)

1693a11 Docs: Remove next tag from recipes (closes #2277)

d916276 Docs: Add default task wrappers to Watching Files examples to make runnable (...

ea52a92 Docs: Fix syntax error in lastRun API docs (closes #2315)

5d81f42 Docs: Fix typo in Explaining Globs (#2326)

ea3bba4 Release: 4.0.1

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
option to disable on small screens

It works perfectly on PC but is not so good on mobile phones as simple touch causes scroll. Is it possible to disable auto scrolling on small screens and keep parallax effect.
enhancement question

opened by malik-jahangir 1
Scrolling causes images to 'glitch' when I have more than 10 pages piled. (On Chrome, Mac)

Hi. My portfolio page with pagepiling recently stopped working. It's now really glitchy (see video attached). It was working fine before, which makes me think it's to do with Chrome's last update. (There's no issue in Safari). I also tested it with the Lewis themeforest template by inspecting the code on this page. When I add more than 10 pages to the pile, it starts glitching, just like my portfolio page does.

https://user-images.githubusercontent.com/93086139/138598469-2d0536a3-a868-4d6a-b0f0-cb18fc58f41f.mov

Is there a way to stop it glitching for more than 10 pages?

Many thanks
reproduction required

opened by Micko1989 5
Timeout

Hello, alvarotrigo. I've just found one more interesting thing. So we have - var autoPlayDuration = 1000; But first slide (when page load ) change much faster than 1000. After that everything is ok. Do you have any ideas how to fix that? Because it's really to fast (just first slide)

opened by AntonHonchar 6

Releases(1.5.6)

1.5.6(Jan 29, 2019)
Fixed bug: Firefox flicker #168 #167

Documentation: added version number

Updated version and dist files

Source code(tar.gz)
Source code(zip)
1.5.5(Mar 7, 2018)

Source code(tar.gz)
Source code(zip)
1.5.4(Jan 18, 2017)
Added gulp and dist files

Added package.json file

Added gitignore

Improved credits in CSS and JS files

Source code(tar.gz)
Source code(zip)
1.5.3(Feb 23, 2016)
Fixed bug when scrolling with an Apple trackpad #87

Improved scrolling detection so it won’t scroll when scrolling horizontally on Apple trackpads.

Improved scrolling to prevent double scroll when scrolling very fast on Apple trackpad or kinetic scrolling devices

Improved comments so they won’t get deleted on minification.

Source code(tar.gz)
Source code(zip)
1.5.1(Mar 31, 2015)
Fixed bug with verticalCentered:true and pp-scrollable #41

JSLint validation

Source code(tar.gz)
Source code(zip)
1.5(Mar 30, 2015)
Improved scrollable feature

Source code(tar.gz)
Source code(zip)
1.4(Mar 24, 2015)
Added new feature to create an scrollable section by using the class pp-scrollable.

Source code(tar.gz)
Source code(zip)
1.3(Feb 22, 2015)
Fixed bug with tooltips

Source code(tar.gz)
Source code(zip)
1.2(Feb 18, 2015)
Solved problem with navigation bullets #38

Added compatibility for IE 11 touch screen #34

Source code(tar.gz)
Source code(zip)
1.0(Dec 5, 2014)
Solved bug with IE 11 for Windows Phone

Added easeInQuart effect inside the plugin

Added new feature: a class is added to the body on section change

Source code(tar.gz)
Source code(zip)
0.0.9(Nov 12, 2014)

Fixed bug causing afterLoad not to be fired when css3:false #24
Source code(tar.gz)
Source code(zip)
0.0.7(Oct 22, 2014)

Source code(tar.gz)
Source code(zip)
0.0.6(Oct 22, 2014)

Source code(tar.gz)
Source code(zip)
0.0.5(Oct 21, 2014)
Added horizontal scrolling

Source code(tar.gz)
Source code(zip)
0.0.4(Oct 20, 2014)

Source code(tar.gz)
Source code(zip)