Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
paroller.js version 1.4.0 - data attributes with media queries added
- Loading branch information
Showing
8 changed files
with
769 additions
and
553 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| .idea/ | ||
| .codekit-cache/ | ||
| *.DS_Store | ||
| config.codekit | ||
| config.codekit | ||
| node_modules/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,129 @@ | ||
| # paroller.js | ||
|
|
||
| [](https://www.npmjs.com/package/paroller.js) | ||
|
|
||
| A lightweight jQuery plugin that enables parallax scrolling effect | ||
| - You can use it on elements with background property or on any other element | ||
| - While scrolling elements can move: vertical, horizontal | ||
| - Manipulated through html data-* attributes or jQuery options | ||
| - Mobile ready | ||
| - Easy to use | ||
|
|
||
| **DEMO:** [Example page](https://tgomilar.github.io/paroller.js/), [Alveus](https://alveus.si/en) | ||
|
|
||
| ## Install | ||
| Before closing ```</body>``` element include: | ||
|
|
||
| 1. [jQuery](http://jquery.com/download/) | ||
| 2. [jquery.paroller.js](https://github.com/tgomilar/paroller.js/tree/master/dist) | ||
|
|
||
|
|
||
| #### npm | ||
| ```sh | ||
| $ npm install paroller.js | ||
| ``` | ||
|
|
||
| #### Bower | ||
| ```sh | ||
| $ bower install paroller.js | ||
| ``` | ||
| #### Yarn | ||
| ```sh | ||
| $ yarn add paroller.js | ||
| ``` | ||
| ## Use | ||
| ```javascript | ||
| // initialize paroller.js | ||
| $('.my-paroller').paroller(); | ||
| // initialize paroller.js and set attributes | ||
| $("#my-element").paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' }); | ||
| ``` | ||
| ```html | ||
| <!-- select element --> | ||
| <div class="my-paroller" data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal"></div> | ||
| <div id="my-element"></div> | ||
| ``` | ||
|
|
||
| **npm and browserify** | ||
| ```sh | ||
| require('paroller.js'); | ||
| ``` | ||
|
|
||
| ## Options | ||
| ### data attributes | ||
| You can control scrolling parallax effect by setting data-paroller-* values attributes or by setting JavaScript options. | ||
|
|
||
| *data-paroller-factor* sets speed and distance of element's parallax effect on scroll. | ||
|
|
||
|
|
||
| | data-* | value | default value | | ||
| | ------ | ------ | ------ | | ||
| | data-paroller-factor | sets offset and speed. It can be positive (0.3) or negative (-0.3). Less means slower. | 0 | | ||
| | data-paroller-type | background, foreground | background | | ||
| | data-paroller-direction | vertical, horizontal | vertical | | ||
|
|
||
| ### JavaScript | ||
| ```javascript | ||
| // initialize paroller.js and set attributes for selected elements | ||
| $(".paroller, [data-paroller-factor]").paroller({ | ||
| factor: 0.3, // multiplier for scrolling speed and offset, +- values for direction control | ||
| type: 'foreground', // background, foreground | ||
| direction: 'horizontal' // vertical, horizontal | ||
| }); | ||
|
|
||
| ``` | ||
|
|
||
| License | ||
| ---- | ||
|
|
||
| MIT | ||
|
|
||
| # paroller.js | ||
| [](https://www.npmjs.com/package/paroller.js) | ||
| A lightweight jQuery plugin that enables parallax scrolling effect | ||
| - You can use it on elements with background property or on any other element | ||
| - While scrolling elements can move: vertical, horizontal | ||
| - Manipulated through html data-* attributes or jQuery options | ||
| - Mobile ready | ||
| - Easy to use | ||
|
|
||
| **DEMO:** [Example page](https://tgomilar.github.io/paroller.js/), [Alveus](https://alveus.si/en) | ||
|
|
||
| ## Install | ||
| Before closing ```</body>``` element include: | ||
|
|
||
| 1. [jQuery](http://jquery.com/download/) | ||
| 2. [jquery.paroller.js](https://github.com/tgomilar/paroller.js/tree/master/dist) | ||
|
|
||
|
|
||
| #### npm | ||
| ```sh | ||
| $ npm install paroller.js | ||
| ``` | ||
|
|
||
| #### Yarn | ||
| ```sh | ||
| $ yarn add paroller.js | ||
| ``` | ||
|
|
||
| #### Bower | ||
| ```sh | ||
| $ bower install paroller.js | ||
| ``` | ||
| #### CDN | ||
| [jsDelivr](https://www.jsdelivr.com/package/npm/paroller.js), [unpkg](https://unpkg.com/paroller.js@1.3.1/), [bundle.run](https://bundle.run/paroller.js) | ||
|
|
||
| ## Use | ||
| ```javascript | ||
| //a) initialize paroller.js | ||
| $('.my-paroller').paroller(); | ||
|
|
||
| //b) initialize paroller.js and set attributes | ||
| $(".my-element").paroller({ factor: 0.5, factorXs: 0.2, factorSm: 0.3, type: 'foreground', direction: 'horizontal' }); | ||
| ``` | ||
| ```html | ||
| <!-- a) select element and set attributes --> | ||
| <div class="my-paroller" | ||
| data-paroller-factor="0.4" | ||
| data-paroller-factor-xs="0.2" | ||
| data-paroller-factor-sm="0.3" | ||
| data-paroller-type="foreground" | ||
| data-paroller-direction="horizontal" | ||
| > | ||
|
|
||
| <!-- b) select element --> | ||
| <div class="my-element"></div> | ||
| ``` | ||
|
|
||
| **npm and browserify** | ||
| ```sh | ||
| require('paroller.js'); | ||
| ``` | ||
|
|
||
| ## Options | ||
| ### data attributes | ||
| You can control parallax effect by data-paroller-* or jQuery values. | ||
|
|
||
| | data-paroller-* | jQuery | value | default value | | ||
| | ------ |----- | ------ | ------ | | ||
| | data-paroller-factor | factor | number (+/-) | 0 | | ||
| | data-paroller-factor-xs | factorXs | number (+/-) | 0 | | ||
| | data-paroller-factor-sm | factorSm | number (+/-) | 0 | | ||
| | data-paroller-factor-md | factorMd | number (+/-) | 0 | | ||
| | data-paroller-factor-lg | factorLg | number (+/-) | 0 | | ||
| | data-paroller-type | type | background, foreground | background | | ||
| | data-paroller-direction | direction | vertical, horizontal | vertical | | ||
|
|
||
| ### data-paroller-factor | ||
| Sets speed and distance of element's parallax effect on scroll. Value can be positive (0.3) or negative (-0.3). Less means slower. Different sign (+/-) means different direction (up/down, left/right). | ||
|
|
||
| :warning: Since **factor** is multiplier **it must be set for paroller.js to have parallax effect**. | ||
|
|
||
| ### data-paroller-factor-* | ||
| Sets paroller factor for selected breakpoint. | ||
|
|
||
| | | data-paroller-factor-* | jQuery option | window width breakpoint | | ||
| | ------ | ------ | ------ | ------ | | ||
| | Extra small | data-paroller-factor-xs | factorXs | <576px | | ||
| | Small | data-paroller-factor-sm | factorSm | <=768px| | ||
| | Medium | data-paroller-factor-md | factorMd | <=1024px| | ||
| | Large | data-paroller-factor-lg | factorLg| <=1200px| | ||
| | Extra Large | data-paroller-factor-xl | factorxl| <=1920px| | ||
|
|
||
| ### JavaScript | ||
| ```javascript | ||
| // initialize paroller.js and set attributes for selected elements | ||
| $(".paroller, [data-paroller-factor]").paroller({ | ||
| factor: 0.2, // multiplier for scrolling speed and offset, +- values for direction control | ||
| factorLg: 0.4, // multiplier for scrolling speed and offset if window width is less than 1200px, +- values for direction control | ||
| type: 'foreground', // background, foreground | ||
| direction: 'horizontal' // vertical, horizontal | ||
| }); | ||
| ``` | ||
| ##### Set factor breakpoints | ||
|
|
||
| ```javascript | ||
| // initialize paroller.js and set attributes for selected elements | ||
| $(".paroller, [data-paroller-factor]").paroller({ | ||
| factor: 0.3, // +/-, if no other breakpoint factor is set this value is selected | ||
| factorXs: 0.1, // factorXs, factorSm, factorMd, factorLg, factorXl | ||
| factorSm: 0.2, // factorXs, factorSm, factorMd, factorLg, factorXl | ||
| factorMd: 0.3, // factorXs, factorSm, factorMd, factorLg, factorXl | ||
| factorLg: 0.4, // factorXs, factorSm, factorMd, factorLg, factorXl | ||
| factorXl: 0.5 // factorXs, factorSm, factorMd, factorLg, factorXl | ||
| type: 'foreground', // background, foreground | ||
| direction: 'horizontal' // vertical, horizontal | ||
| }); | ||
| ``` | ||
|
|
||
| ## :star: Show your work :star: | ||
| Interesting showcase or project? | ||
|
|
||
| Share it here: and let others see your work | ||
|
|
||
| :clap: | ||
|
|
||
| License | ||
| ---- | ||
|
|
||
| MIT |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| (function ($) { | ||
| $('body').addClass('is-loading'); | ||
| var menuSelector = $('#sidebar ul li a'); | ||
|
|
||
| $(document) | ||
| .ready(function () { | ||
| if(window.location.hash) { | ||
| $("html, body") | ||
| .removeClass('is-loading') | ||
| .animate({ scrollTop: $(window.location.hash).scrollTop() }, 1); | ||
| } else { | ||
| setTimeout(function () { | ||
| $("html, body") | ||
| .animate({scrollTop: $(document).height()}, 1) | ||
| .animate({scrollTop: $("#download").scrollTop()}, 1); | ||
| $('body').removeClass('is-loading').addClass('init-paroller'); | ||
| }, 1200); | ||
| } | ||
| $('.show-more').on('click', function () { | ||
| $(this).toggleClass('active'); | ||
| if($(this).hasClass('active')) { | ||
| $(this).next('.popover').slideDown(); | ||
| } else { | ||
| $(this).next('.popover').slideUp(); | ||
| } | ||
| }); | ||
| $('a[href^="#"]').on('click', function (e) { | ||
| e.preventDefault(); | ||
| var target = this.hash; | ||
| $target = $(target); | ||
|
|
||
| $('html, body').animate({ | ||
| 'scrollTop': $target.offset().top | ||
| }, 600, 'linear', function () { | ||
| window.location.hash = target; | ||
| $(document).on("scroll", initScroll(menuSelector)); | ||
| }); | ||
| }); | ||
| }) | ||
| .on('scroll', function () { | ||
| initScroll(menuSelector); | ||
| }); | ||
|
|
||
| function initScroll(menuSelector) { | ||
| var scrollPosition = $(document).scrollTop() + 5; | ||
|
|
||
| menuSelector.each(function () { | ||
| var currLink = $(this); | ||
| var refElement = $(currLink.attr("href")); | ||
| if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) { | ||
| menuSelector.removeClass("active"); | ||
| currLink.addClass("active"); | ||
| } | ||
| else { | ||
| currLink.removeClass("active"); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| })(jQuery); |
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.