diff --git a/README.md b/README.md index 0f4a6df..327c1e8 100644 --- a/README.md +++ b/README.md @@ -2,45 +2,40 @@   -Pile your sections one over another and access them scrolling or by URL! -- [Live demo](http://alvarotrigo.com/pagePiling/) -- [Creating hugeinc.com website with pagePiling.js](http://www.onextrapixel.com/2015/04/09/how-to-create-a-beautiful-fullscreen-single-scrolling-page-like-huge-inc/) -- [Who is using it](https://github.com/alvarotrigo/pagePiling.js#who-is-using-pagepilingjs) - -Invite me to a coffee -[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=BEK5JQCQMED4J&lc=GB&item_name=pagePiling%2ejs¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted) -Customizations of the plugin available upon request for some reasonable price. Contact me. +Pile your sections one over another and access them by scrolling, via URL, a navigation, or programatically! -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. +- **[Live demo](http://alvarotrigo.com/pagePiling/)** +- [Resources and tutorials](#resources--tutorials) +- [Who is using pagePiling.js?](#who-is-using-pagepilingjs) -## Introduction -Suggestion are more than welcome, not only for feature requests but also for coding style improvements. +##Introduction +Suggestions 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 +##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. +It is also designed to work on touch devices like smartphones or tablets. -## Usage +##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](http://jquery.com/). Optionally, you can add the [jQuery UI library](http://jqueryui.com/) 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: -```shell -bower install pagepiling.js -``` - -###Including files: +###Including files ```html - - + + +``` + +###Install using Bower +Optionally, you can install pagePiling.js using Bower: +Terminal: +```shell +bower install pagepiling.js ``` ###Required HTML structure @@ -99,7 +94,7 @@ $(document).ready(function() { }); ``` -### Accesing sections +### Accessing 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 @@ -115,7 +110,7 @@ In case you want to have a section with large content and therefore create an sc
``` -## Options +##Options - `verticalCentered`: (default `true`) Vertically centering of the content within sections. @@ -301,9 +296,10 @@ Example: }); ``` -## Resources +##Resources & Tutorials -[CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) +- [CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) +- [Creating hugeinc.com website with pagePiling.js](http://www.onextrapixel.com/2015/04/09/how-to-create-a-beautiful-fullscreen-single-scrolling-page-like-huge-inc/) ## Who is using pagePiling.js @@ -321,11 +317,12 @@ If you want your page to be listed here. Please Hire me! ## License diff --git a/examples/backgrounds.html b/examples/backgrounds.html index bfd3cc9..0eae365 100644 --- a/examples/backgrounds.html +++ b/examples/backgrounds.html @@ -1,5 +1,5 @@ - + diff --git a/examples/demoPage.html b/examples/demoPage.html index 3697437..5d5aae6 100644 --- a/examples/demoPage.html +++ b/examples/demoPage.html @@ -1,5 +1,5 @@ - + diff --git a/examples/horizontalScroll.html b/examples/horizontalScroll.html index be3c93a..5860e5e 100644 --- a/examples/horizontalScroll.html +++ b/examples/horizontalScroll.html @@ -1,5 +1,5 @@ - + @@ -27,7 +27,7 @@ sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'], navigation: { 'position': 'right', - 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4'] + 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4'] }, afterRender: function(){ $('#pp-nav').addClass('custom'); diff --git a/examples/noAnchors.html b/examples/noAnchors.html index 392f7a8..846d56b 100644 --- a/examples/noAnchors.html +++ b/examples/noAnchors.html @@ -1,5 +1,5 @@ - + @@ -22,7 +22,7 @@ sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'], navigation: { 'position': 'right', - 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4'] + 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4'] } }); }); diff --git a/examples/scrollingSpeed.html b/examples/scrollingSpeed.html index 62b96bb..954353e 100644 --- a/examples/scrollingSpeed.html +++ b/examples/scrollingSpeed.html @@ -1,5 +1,5 @@ - + @@ -24,7 +24,7 @@ sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'], navigation: { 'position': 'right', - 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4'] + 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4'] } }); });