diff --git a/.gitignore b/.gitignore index 999d3a5..90368c4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .idea/ .codekit-cache/ *.DS_Store -config.codekit \ No newline at end of file +config.codekit +node_modules/ \ No newline at end of file diff --git a/README.md b/README.md index ebf14f6..18a71f8 100644 --- a/README.md +++ b/README.md @@ -1,80 +1,129 @@ -# paroller.js - -[![npm](https://img.shields.io/npm/v/paroller.js.svg)](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 `````` 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 - -
-
-``` - -**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 +[![npm](https://img.shields.io/npm/v/paroller.js.svg)](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 `````` 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 + +
+ + +
+``` + +**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 \ No newline at end of file diff --git a/assets/main.js b/assets/main.js new file mode 100644 index 0000000..a3ad7c8 --- /dev/null +++ b/assets/main.js @@ -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); \ No newline at end of file diff --git a/assets/style.css b/assets/style.css index 8e87b27..e2b3b95 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,59 +1 @@ -html { - overflow-x: hidden; -} -.logo-arrow { - position: absolute; - left: 20px; - color: transparent; - transition: 0.3s; - top: calc(50% - 7px); - padding: 10px; -} -.logo-arrow:after { - content: ''; - position: absolute; - border: 2px solid #0275d8; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 0; - height: 13px; - width: 13px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - animation: changeColor 8s linear 2s infinite alternate; - } -.logo-arrow:before{ - content: ''; - position: absolute; - width: 2px; - height: 25px; - background: #222; - top: 0; - left: 15.5px; - animation: changePosition 2s linear 2s infinite alternate; -} -nav { - border-bottom: 1px solid rgba(0,0,0,.08); -} -#vertical, -#horizontal { - padding: 50px 0; - scroll-behavior: smooth; -} -#vertical .jumbotron { - text-shadow: 0 1px 1px #000; -} -#horizontal .jumbotron { - text-shadow: 0 1px 1px #000; -} -@keyframes changeColor { - 0% {border-color: #5bc0de;} - 50% {border-color: #d9534f;} - 100% {border-color: #0275d8;} -} -@keyframes changePosition { - 0% {transform: translateY(-10px);} - 50% {transform: translateY(-5px);} - 100% {transform: translateY(0px);} -} - +@import url("https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext");a,abbr,applet,article,aside,audio,b,body,canvas,caption,center,code,details,div,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,legend,li,mark,nav,object,ol,output,p,pre,q,s,samp,section,span,summary,table,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}q{quotes:none}q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{-webkit-text-size-adjust:none}*,:after,:before{box-sizing:border-box}.\31 2u,.\31 2u\24{width:100%;clear:none;margin-left:0}.\31 1u,.\31 1u\24{width:91.6666666667%;clear:none;margin-left:0}.\31 0u,.\31 0u\24{width:83.3333333333%;clear:none;margin-left:0}.\39 u,.\39 u\24{width:75%;clear:none;margin-left:0}.\38 u,.\38 u\24{width:66.6666666667%;clear:none;margin-left:0}.\37 u,.\37 u\24{width:58.3333333333%;clear:none;margin-left:0}.\36 u,.\36 u\24{width:50%;clear:none;margin-left:0}.\35 u,.\35 u\24{width:41.6666666667%;clear:none;margin-left:0}.\34 u,.\34 u\24{width:33.3333333333%;clear:none;margin-left:0}.\33 u,.\33 u\24{width:25%;clear:none;margin-left:0}.\32 u,.\32 u\24{width:16.6666666667%;clear:none;margin-left:0}.\31 u,.\31 u\24{width:8.3333333333%;clear:none;margin-left:0}.\31 0u\24+*,.\31 1u\24+*,.\31 2u\24+*,.\31 u\24+*,.\32 u\24+*,.\33 u\24+*,.\34 u\24+*,.\35 u\24+*,.\36 u\24+*,.\37 u\24+*,.\38 u\24+*,.\39 u\24+*{clear:left}.\-11u{margin-left:91.6666666667%}.\-10u{margin-left:83.3333333333%}.\-9u{margin-left:75%}.\-8u{margin-left:66.6666666667%}.\-7u{margin-left:58.3333333333%}.\-6u{margin-left:50%}.\-5u{margin-left:41.6666666667%}.\-4u{margin-left:33.3333333333%}.\-3u{margin-left:25%}.\-2u{margin-left:16.6666666667%}.\-1u{margin-left:8.3333333333%}@-ms-viewport{width:device-width}body{-ms-overflow-style:scrollbar}@media screen and (max-width:480px){body,html{min-width:320px}}body{background:#000285}body,input,select,textarea{color:hsla(0,0%,100%,.55);font-family:Nunito,Arial,Helvetica,sans-serif;font-size:16.5pt;font-weight:400;line-height:1.75}@media screen and (max-width:1680px){body,input,select,textarea{font-size:13pt}}@media screen and (max-width:1280px){body,input,select,textarea{font-size:12pt}}@media screen and (max-width:360px){body,input,select,textarea{font-size:11pt}}a{transition:color .2s ease,border-bottom-color .2s ease;border-bottom:1px dotted hsla(0,0%,100%,.35);color:inherit;text-decoration:none}a:hover{border-bottom-color:transparent}a:hover,b{color:#fff}b{font-weight:700}em,i{font-style:italic}p{margin:0 0 2em}h1,h2,h3,h4,h5,h6{color:#fff;font-weight:700;line-height:1.5;margin:0 0 .5em}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none}h1{font-size:2.75em}h1.major{margin:0 0 1.3em;position:relative;padding-bottom:.35em}h1.major:after{background-image:linear-gradient(90deg,#fff,#b74e91);transition:max-width .2s ease;border-radius:.2em;bottom:0;content:"";height:.05em;position:absolute;right:0;width:100%}.major{margin:0 0 1.3em;position:relative;padding-bottom:.35em}.major:after{background-image:linear-gradient(90deg,#fff,#b74e91);transition:max-width .2s ease;border-radius:.2em;bottom:0;content:"";height:.05em;position:absolute;right:0;width:100%}h2{font-size:2.1em;margin:0 0 1.3em;position:relative;padding-bottom:.35em}h2:after{background-image:linear-gradient(90deg,#fff,#b74e91);transition:max-width .2s ease;border-radius:.2em;bottom:0;content:"";height:.05em;position:absolute;right:0;width:100%}h3{font-size:1.1em;margin-top:1.1em}h3,h4{margin-bottom:.5em}h4{font-size:1em;margin-top:1em}h5{font-size:.8em;margin-top:1.25em;margin-bottom:.3em}h6{font-size:.6em}@media screen and (max-width:736px){h1{font-size:2em}h2{font-size:1.58em}h3{font-size:1em}h4{font-size:.8em}h5,h6{font-size:.6em}}.title-gradient{background:linear-gradient(90deg,#fff 0,#b74e91 25%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.mega{font-size:4em;line-height:1em;text-shadow:0 1px 15px #000285}code,pre{background:hsla(0,0%,100%,.05);border-radius:.25em;border:1px solid hsla(0,0%,100%,.15);font-family:Courier New,monospace;font-size:.9em;margin:0 .25em .5em;padding:.25em .65em;overflow:auto}.alert{background:#000285;padding:1em;border-radius:.25em}.alert .fa{margin-right:1em}.jumbotron{background:hsla(0,0%,100%,.05);padding:2.5em;margin:2em auto;min-height:400px}.image{min-height:300px;padding:3em;margin:.5em;min-width:20%;border-radius:0}.block code{display:block}pre{-webkit-overflow-scrolling:touch;font-family:Courier New,monospace;font-size:.9em;margin:0 0 2em}pre code{display:block;line-height:1.75em;padding:1em 1.5em;overflow-x:auto}hr{border:0;border-bottom:1px solid hsla(0,0%,100%,.15);margin:2em 0}hr.major{margin:3em 0}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.box{border-radius:.25em;border:1px solid hsla(0,0%,100%,.15);margin-bottom:2em;padding:1.5em}.box>:last-child,.box>:last-child>:last-child,.box>:last-child>:last-child>:last-child{margin-bottom:0}.box.alt{border:0;border-radius:0;padding:0}.github,.show-more i{position:fixed;top:.6em;right:.6em;border:none;padding:.18em .4em;line-height:0;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4);background:#b74e91 linear-gradient(90deg,#fff 0,#b74e91);transition:.2s linear;color:#5e42a6;z-index:100000;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.github i,.show-more i i{line-height:normal}.github:hover,.show-more i:hover{background:#000285;color:#fff}.button,button,input[type=button],input[type=reset],input[type=submit]{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;transition:border-color .2s ease;background-color:transparent;border:1px solid!important;border-color:hsla(0,0%,100%,.15)!important;border-radius:0;color:#fff!important;cursor:pointer;display:inline-block;font-size:.6em;font-weight:700;height:calc(4.75em + 2px);letter-spacing:.1em;line-height:4.75em;outline:0;padding:0 3.75em;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:after,button:after,input[type=button]:after,input[type=reset]:after,input[type=submit]:after{-moz-pointer-events:none;-webkit-pointer-events:none;-ms-pointer-events:none;pointer-events:none;transition:width .2s ease,transform .2s ease;background:#fff;border-radius:0;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;width:0}.button.fit,button.fit,input[type=button].fit,input[type=reset].fit,input[type=submit].fit{display:block;margin:0 0 1em;width:100%}.button.special,button.special,input[type=button].special,input[type=reset].special,input[type=submit].special{background-color:#fff;color:#000285!important}.button.special:after,button.special:after,input[type=button].special:after,input[type=reset].special:after,input[type=submit].special:after{display:none}.button.disabled,.button:disabled,button.disabled,button:disabled,input[type=button].disabled,input[type=button]:disabled,input[type=reset].disabled,input[type=reset]:disabled,input[type=submit].disabled,input[type=submit]:disabled{cursor:default;opacity:.5;-moz-pointer-events:none;-webkit-pointer-events:none;-ms-pointer-events:none;pointer-events:none}.button:hover,button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{border-color:hsla(0,0%,100%,.55)!important}.button:hover:after,button:hover:after,input[type=button]:hover:after,input[type=reset]:hover:after,input[type=submit]:hover:after{opacity:.05;width:100%}.button:hover:active,button:hover:active,input[type=button]:hover:active,input[type=reset]:hover:active,input[type=submit]:hover:active{border-color:#fff!important}.button:hover:active:after,button:hover:active:after,input[type=button]:hover:active:after,input[type=reset]:hover:active:after,input[type=submit]:hover:active:after{opacity:.1}.show-more{font-weight:700;line-height:1.5;margin:0 0 .7em;font-size:1.1em;position:relative;text-align:center;z-index:1}.show-more i{position:static;height:40px;width:40px;display:-ms-inline-flexbox;display:inline-flex;padding:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}.show-more i:after{content:"";position:absolute;top:50%;width:100%;right:0;background:linear-gradient(90deg,#fff,#b74e91);transition:max-width .2s ease;border-radius:.2em;bottom:0;height:.05em;z-index:-1}.show-more.active i,.show-more:hover i{border-bottom-color:transparent;background:#000285;color:#fff}.show-more.active i:after{background:#000285;transition:.4s}.popover{background:#000285;display:none;border-radius:.25em;font-family:Courier New,monospace;font-size:.9em;margin:0 .25em .5em;padding:1em;position:relative;z-index:5}.popover .popover-inner{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between}.popover .popover-inner>div{width:50%;padding:0 1em}@media screen and (max-width:736px){.popover .popover-inner>div{width:100%}}.popover.active{height:100%}[data-paroller-factor]{position:relative;z-index:0}form{margin:0 0 2em}form .field{margin:0 0 1em}form>.actions{margin:2em 0 0!important}input[type=email],input[type=password],input[type=tel],input[type=text],select,textarea{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;background:hsla(0,0%,100%,.05);border-radius:.25em;border:none;border:1px solid hsla(0,0%,100%,.15);color:inherit;display:block;outline:0;padding:0 1em;text-decoration:none;width:100%}input[type=email]:invalid,input[type=password]:invalid,input[type=tel]:invalid,input[type=text]:invalid,select:invalid,textarea:invalid{box-shadow:none}input[type=email]:focus,input[type=password]:focus,input[type=tel]:focus,input[type=text]:focus,select:focus,textarea:focus{border-color:#fff;box-shadow:0 0 0 1px #fff}.select-wrapper{text-decoration:none;display:block;position:relative}.select-wrapper:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:FontAwesome;font-style:normal;font-weight:400;text-transform:none!important;color:hsla(0,0%,100%,.15);content:"\f078";display:block;height:2.75em;line-height:2.75em;pointer-events:none;position:absolute;right:0;text-align:center;top:0;width:2.75em}.select-wrapper select::-ms-expand{display:none}select option{background-color:#000285;color:#fff}input[type=email],input[type=password],input[type=text],select{height:2.75em}textarea{padding:.75em 1em}body.is-ie textarea{min-height:10em}input[type=checkbox],input[type=radio]{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;display:block;float:left;margin-right:-2em;opacity:0;width:1em;z-index:-1}::-webkit-input-placeholder{color:hsla(0,0%,100%,.35)!important;opacity:1}:-moz-placeholder,::-moz-placeholder{color:hsla(0,0%,100%,.35)!important;opacity:1}:-ms-input-placeholder{color:hsla(0,0%,100%,.35)!important;opacity:1}.image{border-radius:.25em;border:0;display:inline-block;position:relative}.image img{border-radius:.25em;display:block}.image.left,.image.right{max-width:40%}.image.left img,.image.right img{width:100%}.image.left{float:left;margin:0 1.5em 1em 0;top:.25em}.image.right{float:right;margin:0 0 1em 1.5em;top:.25em}.image.fit{display:block;margin:0 0 2em;width:100%}.image.fit img{width:100%}.image.main{display:block;margin:0 0 3em;width:100%}.image.main img{width:100%}ol{list-style:decimal;margin:0 0 2em;padding-left:1.25em}ol li{padding-left:.25em}ul{list-style:disc;margin:0 0 2em;padding-left:1em}ul li{padding-left:.5em}ul.alt{list-style:none;padding-left:0}ul.alt li{border-top:1px solid hsla(0,0%,100%,.15);padding:.5em 0}ul.alt li:first-child{border-top:0;padding-top:0}ul.actions{cursor:default;list-style:none;padding-left:0}ul.actions li{display:inline-block;padding:0 1em 0 0;vertical-align:middle}ul.actions li:last-child{padding-right:0}ul.actions.vertical li{display:block;padding:1em 0 0}ul.actions.vertical li:first-child{padding-top:0}ul.actions.vertical li>*{margin-bottom:0}ul.actions.fit{display:table;margin-left:-1em;padding:0;table-layout:fixed;width:calc(100% + 1em)}ul.actions.fit li{display:table-cell;padding:0 0 0 1em}ul.actions.fit li>*{margin-bottom:0}@media screen and (max-width:480px){ul.actions{margin:0 0 2em}ul.actions li{padding:1em 0 0;display:block;text-align:center;width:100%}ul.actions li>*{width:100%;margin:0!important}ul.actions li .button{padding:0}ul.actions li:first-child{padding-top:0}}article.special,section.special{text-align:center}header p{color:hsla(0,0%,100%,.35);position:relative;margin:0 0 1.5em}header h2+p{font-size:1.25em;margin-top:-1em;line-height:1.5em}header h3+p{font-size:1.1em;margin-top:-.8em;line-height:1.5em}header h4+p,header h5+p,header h6+p{font-size:.9em;margin-top:-.6em;line-height:1.5em}.split{display:-moz-flex;display:-ms-flex;display:-ms-flexbox;display:flex}.split>*{width:calc(50% - 2.5em)}.split>:nth-child(2n - 1){padding-right:2.5em;border-right:1px solid hsla(0,0%,100%,.15)}.split>:nth-child(2n){padding-left:2.5em}.split.style1>:nth-child(2n - 1){width:calc(66.66666% - 2.5em)}.split.style1>:nth-child(2n){width:calc(33.33333% - 2.5em)}@media screen and (max-width:1680px){.split>*{width:calc(50% - 2em)}.split>:nth-child(2n - 1){padding-right:2em}.split>:nth-child(2n){padding-left:2em}.split.style1>:nth-child(2n - 1){width:calc(66.66666% - 2em)}.split.style1>:nth-child(2n){width:calc(33.33333% - 2em)}}@media screen and (max-width:980px){.split{display:block}.split>*{border-top:1px solid hsla(0,0%,100%,.15);margin:4em 0 0;padding:4em 0 0;width:100%!important}.split>:nth-child(2n - 1){border-right:0;padding-right:0}.split>:nth-child(2n){padding-left:0}.split>:first-child{border-top:0;margin-top:0;padding-top:0}}@media screen and (max-width:736px){.split>*{margin:3em 0 0;padding:3em 0 0}}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}table{margin:0 0 2em;width:100%}table tbody tr{border:1px solid hsla(0,0%,100%,.15);border-left:0;border-right:0}table tbody tr:nth-child(odd){background-color:hsla(0,0%,100%,.05)}table td{padding:.75em}table th{color:#fff;font-size:1em;font-weight:700;padding:0 .75em .75em;text-align:left}table thead{border-bottom:2px solid hsla(0,0%,100%,.15)}table tfoot{border-top:2px solid hsla(0,0%,100%,.15)}table.alt{border-collapse:separate}table.alt tbody tr td{border:1px solid hsla(0,0%,100%,.15);border-left-width:0;border-top-width:0}table.alt tbody tr td:first-child{border-left-width:1px}table.alt tbody tr:first-child td{border-top-width:1px}table.alt thead{border-bottom:0}table.alt tfoot{border-top:0}.wrapper{position:relative;background-color:#5e42a6}.wrapper#demo{overflow:hidden}.wrapper>.inner{padding:5em 5em 3em;max-width:100%;width:75em}@media screen and (max-width:1680px){.wrapper>.inner{padding:4em 4em 2em}}@media screen and (max-width:1280px){.wrapper>.inner{width:100%}}@media screen and (max-width:736px){.wrapper>.inner{padding:3em 2em 1em}}.wrapper.fullscreen{display:-moz-flex;display:-ms-flex;display:-ms-flexbox;display:flex;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-moz-justify-content:center;-ms-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:100vh}body.is-ie .wrapper.fullscreen{height:100vh}@media screen and (max-width:1280px){.wrapper.fullscreen{min-height:calc(100vh - 2.5em)}body.is-ie .wrapper.fullscreen{height:calc(100vh - 2.5em)}}@media screen and (max-width:736px){.wrapper.fullscreen{padding:2em 0;min-height:0}body.is-ie .wrapper.fullscreen{height:auto}}.wrapper.fade-up>.inner{transform:translateY(0);transition:opacity 1s ease,transform 1s ease;opacity:1}body.is-loading .wrapper.fade-up>.inner{opacity:0;transform:translateY(1em)}.wrapper.fade>.inner{transition:opacity 1s ease;opacity:1}body.is-loading .wrapper.fade>.inner{opacity:0}.d-flex{-moz-justify-content:center;-ms-justify-content:center;-ms-flex-pack:center;justify-content:center}#header,.d-flex{display:-moz-flex;display:-ms-flex;display:-ms-flexbox;display:flex}#header{background-color:#5e42a6;cursor:default;padding:1.75em 2em}#header>.title{border:0;color:#fff;display:block;font-size:1.25em;font-weight:700}#header>nav{-moz-flex:1;-ms-flex:1;flex:1;text-align:right}#header>nav>ul{margin:0;padding:0}#header>nav>ul>li{display:inline-block;margin-left:1.75em;padding:0;vertical-align:middle}#header>nav>ul>li:first-child{margin-left:0}#header>nav>ul>li a{border:0;color:hsla(0,0%,100%,.35);display:inline-block;font-size:.6em;font-weight:700;letter-spacing:.1em;text-transform:uppercase}#header>nav>ul>li a:hover{color:hsla(0,0%,100%,.55)}#header>nav>ul>li a.active{color:#fff}@media screen and (max-width:736px){#header{padding:1em 2em}}@media screen and (max-width:480px){#header{display:block;padding:0 2em;text-align:left}#header .title{font-size:1.25em;padding:1em 0}#header>nav{border-top:1px solid hsla(0,0%,100%,.15);text-align:inherit}#header>nav>ul>li{margin-left:1.5em}#header>nav>ul>li a{height:6em;line-height:6em}}#sidebar+#wrapper{overflow:hidden;margin-left:18em}@media screen and (max-width:1280px){#sidebar+#wrapper{margin-left:0;padding-top:3.5em}}@media screen and (max-width:736px){#sidebar+#wrapper{padding-top:0}}#header+#wrapper>.wrapper>.inner{margin:0 auto}body{overflow-x:hidden}.paroller-img{max-width:33%;height:auto}#footer{background:#000285}#sidebar+#wrapper+#footer{margin-left:18em}@media screen and (max-width:1280px){#sidebar+#wrapper+#footer{margin-left:0}}#footer>.inner a{border-bottom-color:hsla(0,0%,100%,.15)}#footer>.inner a:hover{border-bottom-color:transparent}#header+#wrapper+#footer>.inner{margin:0 auto}#footer .signature{font-size:.6em}#footer .signature i{color:#b74e91}#sidebar{padding:2.5em 2.5em .5em;background:#000285;cursor:default;height:100vh;left:0;overflow-x:hidden;overflow-y:auto;position:fixed;text-align:right;top:0;width:18em;z-index:10000}#sidebar>.inner{display:-moz-flex;display:-ms-flex;display:-ms-flexbox;display:flex;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-moz-justify-content:center;-ms-justify-content:center;-ms-flex-pack:center;justify-content:center;transform:translateY(0);transition:opacity 1s ease;min-height:100%;opacity:1;width:100%}body.is-ie #sidebar>.inner{height:100%}#sidebar nav>ul{list-style:none;padding:0}#sidebar nav>ul>li{transform:translateY(0);transition:opacity .15s ease,transform .75s ease;margin:1.5em 0 0;opacity:1;padding:0;position:relative}#sidebar nav>ul>li:first-child{margin:0;transition-delay:.45s}#sidebar nav>ul>li:nth-child(2){transition-delay:.65s}#sidebar nav>ul>li:nth-child(3){transition-delay:.85s}#sidebar nav>ul>li:nth-child(4){transition-delay:1.05s}#sidebar nav>ul>li:nth-child(5){transition-delay:1.25s}#sidebar nav>ul>li:nth-child(6){transition-delay:1.45s}#sidebar nav>ul>li:nth-child(7){transition-delay:1.65s}#sidebar nav>ul>li:nth-child(8){transition-delay:1.85s}#sidebar nav>ul>li:nth-child(9){transition-delay:2.05s}#sidebar nav>ul>li:nth-child(10){transition-delay:2.25s}#sidebar nav>ul>li:nth-child(11){transition-delay:2.45s}#sidebar nav>ul>li:nth-child(12){transition-delay:2.65s}#sidebar nav>ul>li:nth-child(13){transition-delay:2.85s}#sidebar nav>ul>li:nth-child(14){transition-delay:3.05s}#sidebar nav>ul>li:nth-child(15){transition-delay:3.25s}#sidebar nav>ul>li:nth-child(16){transition-delay:3.45s}#sidebar nav>ul>li:nth-child(17){transition-delay:3.65s}#sidebar nav>ul>li:nth-child(18){transition-delay:3.85s}#sidebar nav>ul>li:nth-child(19){transition-delay:4.05s}#sidebar nav>ul>li:nth-child(20){transition-delay:4.25s}#sidebar nav a{transition:color .2s ease;border:0;color:hsla(0,0%,100%,.35);display:block;font-size:.9em;font-weight:700;letter-spacing:.1em;line-height:1.5;outline:0;padding:1.1em 0;position:relative;text-decoration:none}#sidebar nav a:after,#sidebar nav a:before{bottom:0;content:"";height:.12em;position:absolute;right:0;width:100%}#sidebar nav a:before{background:hsla(0,0%,100%,.55)}#sidebar nav a:after{background-image:linear-gradient(90deg,#b74e91,#fff);transition:max-width .2s ease;max-width:0}#sidebar nav a.active,#sidebar nav a:hover{color:#fff}#sidebar nav a.active:after{max-width:100%}body.is-loading #sidebar>.inner{opacity:0}body.is-loading #sidebar nav ul li{transform:translateY(2em);opacity:0}@media screen and (max-width:1280px){#sidebar{height:3.5em;left:0;line-height:3.5em;overflow:hidden;padding:0;text-align:center;top:0;width:100%}#sidebar>.inner{-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-moz-align-items:stretch;-ms-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}#sidebar>.inner,#sidebar nav,#sidebar nav ul{height:inherit;line-height:inherit}#sidebar nav ul{display:-moz-flex;display:-ms-flex;display:-ms-flexbox;display:flex;margin:0}#sidebar nav ul li{display:block;margin:0 0 0 2em}#sidebar nav a,#sidebar nav ul li{height:inherit;line-height:inherit;padding:0}#sidebar nav a:after{background-image:none;background-color:#b74e91}}@media screen and (max-width:736px){#sidebar{display:none}} \ No newline at end of file diff --git a/dist/jquery.paroller.js b/dist/jquery.paroller.js index ba36e60..3b6678d 100644 --- a/dist/jquery.paroller.js +++ b/dist/jquery.paroller.js @@ -1,5 +1,5 @@ /** - * jQuery plugin paroller.js v1.3.1 + * jQuery plugin paroller.js v1.4.0 * https://github.com/tgomilar/paroller.js * preview: https://tgomilar.github.io/paroller/ **/ @@ -44,6 +44,58 @@ } }; + var setMovement = { + factor: function (elem, width, options) { + var dataFactor = elem.data('paroller-factor'); + var factor = (dataFactor) ? dataFactor : options.factor; + + if (width < 576) { + var dataFactorXs = elem.data('paroller-factor-xs'); + var factorXs = (dataFactorXs) ? dataFactorXs : options.factorXs; + return (factorXs) ? factorXs : factor; + } + else if (width <= 768) { + var dataFactorSm = elem.data('paroller-factor-sm'); + var factorSm = (dataFactorSm) ? dataFactorSm : options.factorSm; + return (factorSm) ? factorSm : factor; + } + else if (width <= 1024) { + var dataFactorMd = elem.data('paroller-factor-md'); + var factorMd = (dataFactorMd) ? dataFactorMd : options.factorMd; + return (factorMd) ? factorMd : factor; + } + else if (width <= 1200) { + var dataFactorLg = elem.data('paroller-factor-lg'); + var factorLg = (dataFactorLg) ? dataFactorLg : options.factorLg; + return (factorLg) ? factorLg : factor; + } else if (width <= 1920) { + var dataFactorXl = elem.data('paroller-factor-xl'); + var factorXl = (dataFactorXl) ? dataFactorXl : options.factorXl; + return (factorXl) ? factorXl : factor; + } else { + return factor; + } + }, + bgOffset: function (offset, factor) { + return Math.round(offset * factor); + }, + transform: function (offset, factor, windowHeight, height) { + return Math.round((offset - (windowHeight / 2) + height) * factor); + } + }; + + var clearPositions = { + background: function (elem) { + return elem.css({'background-position': 'unset'}); + }, + foreground: function (elem) { + return elem.css({ + 'transform' : 'unset', + 'transition' : 'unset' + }); + } + }; + $.fn.paroller = function (options) { var windowHeight = $(window).height(); var documentHeight = $(document).height(); @@ -51,78 +103,109 @@ // default options var options = $.extend({ factor: 0, // - to + + factorXs: 0, // - to + + factorSm: 0, // - to + + factorMd: 0, // - to + + factorLg: 0, // - to + + factorXl: 0, // - to + type: 'background', // foreground direction: 'vertical' // horizontal }, options); return this.each(function () { - var working = false; var $this = $(this); + var width = $(window).width(); var offset = $this.offset().top; var height = $this.outerHeight(); - var dataFactor = $this.data('paroller-factor'); + var dataType = $this.data('paroller-type'); var dataDirection = $this.data('paroller-direction'); + var oldTransform = $this.css('transform'); - var factor = (dataFactor) ? dataFactor : options.factor; var type = (dataType) ? dataType : options.type; var direction = (dataDirection) ? dataDirection : options.direction; - var bgOffset = Math.round(offset * factor); - var transform = Math.round((offset - (windowHeight / 2) + height) * factor); + var factor = setMovement.factor($this, width, options); + var bgOffset = setMovement.bgOffset(offset, factor); + var transform = setMovement.transform(offset, factor, windowHeight, height); - /* Transform directive of element before paroller */ - var oldTransform = $this.css('transform'); - - if (type == 'background') { - if (direction == 'vertical') { + if (type === 'background') { + if (direction === 'vertical') { setDirection.bgVertical($this, bgOffset); } - else if (direction == 'horizontal') { + else if (direction === 'horizontal') { setDirection.bgHorizontal($this, bgOffset); } } - else if (type == 'foreground') { - if (direction == 'vertical') { + else if (type === 'foreground') { + if (direction === 'vertical') { setDirection.vertical($this, transform, oldTransform); } - else if (direction == 'horizontal') { + else if (direction === 'horizontal') { setDirection.horizontal($this, transform, oldTransform); } } - var scrollAction = function () { - working = false; - }; + $(window).on('resize', function () { + var scrolling = $(this).scrollTop(); + width = $(window).width(); + offset = $this.offset().top; + height = $this.outerHeight(); + factor = setMovement.factor($this, width, options); - $(window).on('scroll', function () { - if (!working) { - var scrolling = $(this).scrollTop(); - documentHeight = $(document).height(); - - bgOffset = Math.round((offset - scrolling) * factor); - transform = Math.round(((offset - (windowHeight / 2) + height) - scrolling) * factor); - - if (type == 'background') { - if (direction == 'vertical') { - setDirection.bgVertical($this, bgOffset); - } - else if (direction == 'horizontal') { - setDirection.bgHorizontal($this, bgOffset); - } + if (type === 'background') { + clearPositions.background($this); + } + else if ((type === 'foreground') && (scrolling <= documentHeight)) { + clearPositions.foreground($this); + } + + bgOffset = Math.round(offset * factor); + transform = Math.round((offset - (windowHeight / 2) + height) * factor); + + if (type === 'background') { + clearPositions.background($this); + if (direction === 'vertical') { + setDirection.bgVertical($this, bgOffset); + } + else if (direction === 'horizontal') { + setDirection.bgHorizontal($this, bgOffset); + } + } + else if ((type === 'foreground') && (scrolling <= documentHeight)) { + clearPositions.foreground($this); + if (direction === 'vertical') { + setDirection.vertical($this, transform); } - else if ((type == 'foreground') && (scrolling <= documentHeight)) { - if (direction == 'vertical') { - setDirection.vertical($this, transform, oldTransform); - } - else if (direction == 'horizontal') { - setDirection.horizontal($this, transform, oldTransform); - } + else if (direction === 'horizontal') { + setDirection.horizontal($this, transform); } + } + }); + + $(window).on('scroll', function () { + var scrolling = $(this).scrollTop(); + documentHeight = $(document).height(); + + bgOffset = Math.round((offset - scrolling) * factor); + transform = Math.round(((offset - (windowHeight / 2) + height) - scrolling) * factor); - window.requestAnimationFrame(scrollAction); - working = true; + if (type === 'background') { + if (direction === 'vertical') { + setDirection.bgVertical($this, bgOffset); + } + else if (direction === 'horizontal') { + setDirection.bgHorizontal($this, bgOffset); + } + } + else if ((type === 'foreground') && (scrolling <= documentHeight)) { + if (direction === 'vertical') { + setDirection.vertical($this, transform, oldTransform); + } + else if (direction === 'horizontal') { + setDirection.horizontal($this, transform, oldTransform); + } } - }).trigger('scroll'); + }) }); }; }); \ No newline at end of file diff --git a/dist/jquery.paroller.min.js b/dist/jquery.paroller.min.js index 0e3772f..836afcd 100644 --- a/dist/jquery.paroller.min.js +++ b/dist/jquery.paroller.min.js @@ -1 +1 @@ -!function(r){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=r(require("jquery")):r(jQuery)}(function($){"use strict";var r={bgVertical:function(r,t){return r.css({"background-position":"center "+-t+"px"})},bgHorizontal:function(r,t){return r.css({"background-position":-t+"px center"})},vertical:function(r,t,o){return"none"===o?o="":!0,r.css({"-webkit-transform":"translateY("+t+"px)"+o,"-moz-transform":"translateY("+t+"px)"+o,transform:"translateY("+t+"px)"+o,transition:"transform linear","will-change":"transform"})},horizontal:function(r,t,o){return"none"===o?o="":!0,r.css({"-webkit-transform":"translateX("+t+"px)"+o,"-moz-transform":"translateX("+t+"px)"+o,transform:"translateX("+t+"px)"+o,transition:"transform linear","will-change":"transform"})}};$.fn.paroller=function(t){var o=$(window).height(),n=$(document).height(),t=$.extend({factor:0,type:"background",direction:"vertical"},t);return this.each(function(){var a=!1,e=$(this),i=e.offset().top,c=e.outerHeight(),l=e.data("paroller-factor"),s=e.data("paroller-type"),u=e.data("paroller-direction"),f=l?l:t.factor,d=s?s:t.type,h=u?u:t.direction,p=Math.round(i*f),g=Math.round((i-o/2+c)*f),m=e.css("transform");"background"==d?"vertical"==h?r.bgVertical(e,p):"horizontal"==h&&r.bgHorizontal(e,p):"foreground"==d&&("vertical"==h?r.vertical(e,g,m):"horizontal"==h&&r.horizontal(e,g,m));var b=function(){a=!1};$(window).on("scroll",function(){if(!a){var t=$(this).scrollTop();n=$(document).height(),p=Math.round((i-t)*f),g=Math.round((i-o/2+c-t)*f),"background"==d?"vertical"==h?r.bgVertical(e,p):"horizontal"==h&&r.bgHorizontal(e,p):"foreground"==d&&n>=t&&("vertical"==h?r.vertical(e,g,m):"horizontal"==h&&r.horizontal(e,g,m)),window.requestAnimationFrame(b),a=!0}}).trigger("scroll")})}}); \ No newline at end of file +!function(r){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=r(require("jquery")):r(jQuery)}(function(r){"use strict";var t={bgVertical:function(r,t){return r.css({"background-position":"center "+-t+"px"})},bgHorizontal:function(r,t){return r.css({"background-position":-t+"px center"})},vertical:function(r,t,o){return"none"!==o||(o=""),r.css({"-webkit-transform":"translateY("+t+"px)"+o,"-moz-transform":"translateY("+t+"px)"+o,transform:"translateY("+t+"px)"+o,transition:"transform linear","will-change":"transform"})},horizontal:function(r,t,o){return"none"!==o||(o=""),r.css({"-webkit-transform":"translateX("+t+"px)"+o,"-moz-transform":"translateX("+t+"px)"+o,transform:"translateX("+t+"px)"+o,transition:"transform linear","will-change":"transform"})}},o={factor:function(r,t,o){var n=r.data("paroller-factor"),a=n||o.factor;if(t<576){var e=r.data("paroller-factor-xs"),i=e||o.factorXs;return i||a}if(t<=768){var c=r.data("paroller-factor-sm"),f=c||o.factorSm;return f||a}if(t<=1024){var l=r.data("paroller-factor-md"),u=l||o.factorMd;return u||a}if(t<=1200){var s=r.data("paroller-factor-lg"),d=s||o.factorLg;return d||a}if(t<=1920){var g=r.data("paroller-factor-xl"),h=g||o.factorXl;return h||a}return a},bgOffset:function(r,t){return Math.round(r*t)},transform:function(r,t,o,n){return Math.round((r-o/2+n)*t)}},n={background:function(r){return r.css({"background-position":"unset"})},foreground:function(r){return r.css({transform:"unset",transition:"unset"})}};r.fn.paroller=function(a){var e=r(window).height(),i=r(document).height(),a=r.extend({factor:0,factorXs:0,factorSm:0,factorMd:0,factorLg:0,factorXl:0,type:"background",direction:"vertical"},a);return this.each(function(){var c=r(this),f=r(window).width(),l=c.offset().top,u=c.outerHeight(),s=c.data("paroller-type"),d=c.data("paroller-direction"),g=c.css("transform"),h=s||a.type,p=d||a.direction,b=o.factor(c,f,a),m=o.bgOffset(l,b),v=o.transform(l,b,e,u);"background"===h?"vertical"===p?t.bgVertical(c,m):"horizontal"===p&&t.bgHorizontal(c,m):"foreground"===h&&("vertical"===p?t.vertical(c,v,g):"horizontal"===p&&t.horizontal(c,v,g)),r(window).on("resize",function(){var s=r(this).scrollTop();f=r(window).width(),l=c.offset().top,u=c.outerHeight(),b=o.factor(c,f,a),"background"===h?n.background(c):"foreground"===h&&s<=i&&n.foreground(c),m=Math.round(l*b),v=Math.round((l-e/2+u)*b),"background"===h?(n.background(c),"vertical"===p?t.bgVertical(c,m):"horizontal"===p&&t.bgHorizontal(c,m)):"foreground"===h&&s<=i&&(n.foreground(c),"vertical"===p?t.vertical(c,v):"horizontal"===p&&t.horizontal(c,v))}),r(window).on("scroll",function(){var o=r(this).scrollTop();i=r(document).height(),m=Math.round((l-o)*b),v=Math.round((l-e/2+u-o)*b),"background"===h?"vertical"===p?t.bgVertical(c,m):"horizontal"===p&&t.bgHorizontal(c,m):"foreground"===h&&o<=i&&("vertical"===p?t.vertical(c,v,g):"horizontal"===p&&t.horizontal(c,v,g))})})}}); \ No newline at end of file diff --git a/index.html b/index.html index 0cecb08..8880770 100644 --- a/index.html +++ b/index.html @@ -5,165 +5,165 @@ + content="paroller.js,jquery plugin,parallax,scrolling,parallax effect,jQuery,paroller,scroller,scrolling,paroller js,paroller jquery, paroller plugin"> paroller.js - - + + - - -
-
-
-

Download

-

paroller.js is a lightweight jQuery plugin that enables parallax scrolling - effect on selected elements.

-
    +
+ + +
+ + +
+
+

paroller.js

+

paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected + elements.

+
  • 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.
    • +
  • Manipulated through html data-* attributes or jQuery options.
  • Mobile ready.
  • Easy to use.
-

- - GitHub - - - Download - -

-

Previous versions

- - Download v1.2.9 - -
-

Install

+ + +
+
+ + +
+
+

Install

-

Before closing </body> element include:

-
-
1. jQuery library
-
- jQuery - <script src="jquery-3.1.1.min.js"></script> -
-
2. jquery.paroller.js
-
- Paroller - <script src="jquery.paroller.min.js"></script> -
-
3. Use
-
-
-
- - // initialize paroller.js
- $('.my-paroller').paroller(); - -
-
-
-
- - // initialize paroller.js and set attributes
- $("#my-element").paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' }); - -
+

Before closing </body> element include jQuery and paroller.js. +

+ +

1. jQuery library

+ <script src="jquery-3.1.1.min.js"></script> + +

2. jquery.paroller.js

+ <script src="jquery.paroller.min.js"></script> + +

3. Use

+
// define element
+ + + + + + + + + + +
a)
+ + <div class="my-paroller" data-paroller-factor="0.3" data-paroller-type="foreground" + data-paroller-direction="horizontal"></div> +
-
-
- - // define element
- <div class="my-paroller" data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal"></div> -

- <div id="my-element"></div> - -
+
b)
+ <div id="my-element"></div>
- - -
npm
-
-
- $ npm install paroller.js

-
npm and browserify
- require('paroller.js'); -
-
-
Bower
-
-
- $ bower install paroller.js -
-
-
Yarn
-
-
- $ yarn add paroller.js -
-
+
+ +
// initialize paroller.js
+ + + + + + + + + +
a)$('.my-paroller').paroller();
b) $("#my-element").paroller({ factor: 0.5, factorXs: 0.2, type: 'foreground', direction: 'horizontal' });
+ +

npm

+ $ npm install paroller.js
+ require('paroller.js'); + +

Yarn

+ $ yarn add paroller.js + +

Bower

+ $ bower install paroller.js
-
-
-

Usage

-

- To use paroller.js parallax scrolling effect you can use data-paroller-* - attributes on selected elements or set values via jQuery. - 'factor' sets speed and distance of element's parallax effect on scroll. -

-
-
- 
-                    <div class="paroller"> Awesome element with parallax effect </div>
+
+    
+    

+        

+            
Usage

+            

+                

+                    To enable parallax scrolling effect you can use data-paroller-*
+                    attributes on selected elements or set values via jQuery.

+                    'factor' sets speed and distance of element's parallax effect on scroll.
+                

+                

+                     Since 'factor' is multiplier it must be set for paroller.js to have parallax effect.
+                

+                
+                    <div class="paroller">Awesome element with parallax effect</div>
 
                     // initialize paroller.js and set attributes for selected elements
                     $(".paroller, [data-paroller-factor]").paroller({
                         factor: 0.3,            // multiplier for scrolling speed and offset
+                        factorXs: 0.1,           // multiplier for scrolling speed and offset
                         type: 'foreground',     // background, foreground
                         direction: 'horizontal' // vertical, horizontal
                     });
                     

-                

-            

-            

-            

-                

-                    
+
+                
                     <div data-paroller-factor="-0.1"
+                        data-paroller-factor-xs="0.1"
                         data-paroller-type="foreground"
                         data-paroller-direction="vertical">
                         Awesome element with parallax effect
@@ -171,287 +171,368 @@ 
Usage

 
                     // initialize paroller.js
                     $("[data-paroller-factor]").paroller();
-                    

-                

-            

-            

-            
Via data attributes

-            

-                

-                    
data-paroller-factor

-                    

-                        This attribute sets elements offset and speed. It can be positive (0.3) or negative (-0.3).
-                        Less means slower. 

-                        <div data-paroller-factor="0.3"></div>
-                    

-
-                    
data-paroller-type

-                    

-                        This attribute has two values background and foreground.

-                        If not used the default value is set to: background. 

-                        <div data-paroller-factor="0.3" data-paroller-type="foreground"></div>
-                    

-
-                    
data-paroller-direction

-                    

-                        This attribute hsd two values: vertical, horizontal.

-                        If not used the default value is set to: vertical. 

-                        <div data-paroller-factor="0.3" data-paroller-direction="horizontal"></div>
-                    

-                

-            

-            

-            
Via JavaScript

-            

-                

-                       
-                        // initialize paroller.js and set attributes for selected elements
-
-                        $(".paroller, [data-paroller-factor]").paroller({
-                            factor: 0.3,            // multiplier for scrolling speed and offset
-                            type: 'foreground',     // background, foreground
-                            direction: 'horizontal' // vertical, horizontal
-                        });
-                        

-                

+
+
+ +

Via data attributes

+ + + + + + + + + + + + + +
data-paroller-factorSets elements offset and speed. It can be positive (0.3) + or negative (-0.3). + Less means slower.
+ <div data-paroller-factor="0.3"></div> +
data-paroller-type This attribute has two values background and foreground.
+ If not set the default value is background.
+ <div data-paroller-factor="0.3" + data-paroller-type="foreground"></div> +
data-paroller-directionThis attribute hsd two values: vertical, horizontal.
+ If not used the default value is set to: vertical.
+ <div data-paroller-factor="0.3" data-paroller-direction="horizontal"></div> +
+ +
+

Via JavaScript

+ + 
+            // initialize paroller.js and set attributes for selected elements
+
+            $(".paroller, [data-paroller-factor]").paroller({
+                factor: 0.3,            // multiplier for scrolling speed and offset
+                factorXs: 0.1,          // multiplier for scrolling speed and offset if window width is <576px
+                factorSm: 0.2,          // multiplier for scrolling speed and offset if window width is <=768px
+                factorMd: 0.2,          // multiplier for scrolling speed and offset if window width is <=1024px
+                factorLg: 0.3,          // multiplier for scrolling speed and offset if window width is <=1200px
+                type: 'foreground',     // background, foreground
+                direction: 'horizontal' // vertical, horizontal
+            });
+
-
-
-

Hello Parallax!

-

data-paroller-factor="0.5"

-
-
-

Scrolling is fun!

-

data-paroller-factor="-0.15"

-
-
-
-
- Card image cap -
-

Card vertical

-

- $('.paroller').paroller({ - factor: 0.4, - type: 'foreground' - }); -

+ + +
+
+

Demo

+ +
+ 👋 Heola! こんにちは! Ahoj! Cześć! Olá! +
+
+
+
+
+
html
+ class="mega my-element"
+ data-paroller-factor="0.5"
+ data-paroller-factor-lg="0.4"
+ data-paroller-factor-md="0.3"
+ data-paroller-factor-sm="-0.2"
+ data-paroller-factor-xs="-0.1"
+ data-paroller-type="foreground"
+ data-paroller-direction="horizontal"
-
-
-
-
- Card image cap -
-

Card vertical

-

- data-paroller-factor="0.1" data-paroller-type="foreground" -

+
+
js
+ $('.my-element').paroller();
-
-
- Card image cap -
-

Card vertical

-

- data-paroller-factor="-0.4" data-paroller-type="foreground" -

+ +
+ გამარჯობა! Hello! Zdravo! Ciao! Привет! 你好! Ciao! !مرحبا Hallå! Χαίρετε! ¡Hola! 👋 +
+
+
+
+
+
html
+ class="paroller-example"
-
-
-
-
-
-
- Card image cap -
-

Card vertical

-

- data-paroller-factor="0.9" data-paroller-type="foreground" - data-paroller-direction="vertical" -

+
+
js
+ $('.paroller-example').paroller({
+ factorXs: 0.1,
+ factorSm: 0.1,
+ factorMd: -0.4,
+ factorLg: -0.5,
+ factorXl: -0.6,
+ factor: -0.4,
+ type: 'foreground',
+ direction: 'horizontal'
+ });
-
-
- Card image cap -
-

Card vertical

-

- data-paroller-factor="0.15" data-paroller-type="foreground" - data-paroller-direction="vertical" -

+ +
+
+
+
+
+
+
html
+ class="jumbotron" + style="background: url('https://unsplash.it/1920/800?image=950') no-repeat center;
+ background-size: cover;"
+ data-paroller-factor="0.5"
+ data-paroller-factor-xs="0.2" +
+
+
js
+ $('.jumbotron').paroller();
-
-
- Card image cap -
-

Card vertical

-

- data-paroller-factor="-0.1" data-paroller-type="foreground" - data-paroller-direction="vertical" -

+ +
+
+
+
+
+
+
html
+ class="jumbotron" + style="background: url('https://unsplash.it/1920/800?image=152') repeat center; background-size: + cover;"
+ data-paroller-factor="-0.5"
+ data-paroller-factor-sm="-0.2"
+ data-paroller-factor-xs="-0.1" +
+
+
js
+ $('.jumbotron').paroller();
-
-
-
-
- Card image cap -
-

Card vertical

+ +
+
+
+
+
+
+
html
+ class="jumbotron" + style="background: url('https://unsplash.it/1920/500?image=974') no-repeat center; + background-size: cover;"
+ data-paroller-factor="-0.2" +
+
+
js
+ $('.jumbotron').paroller();
-
-
- Card image cap -
-

Card vertical

-
+ +
+
+
+ +
+
+ +
-
-
-
-
-

Hola, horizontal Parallax!

-

data-paroller-factor="0.5"

-
-
-

Maybe some horizontal scrolling with repeated background?

-

data-paroller-factor="-0.75"

-
-
-
-
- Card image cap -
-

Card horizontal

-

- data-paroller-factor="-0.3" data-paroller-type="foreground" - data-paroller-direction="horizontal" - -

+
+
+
+
+
html
+ class="image" + style="background: url('https://unsplash.it/400/800?image=889') repeat center; background-size: + cover;"
+ data-paroller-factor="0.5"
+ data-paroller-factor-md="0.3"
+ data-paroller-factor-sm="0.2"
+ data-paroller-factor-xs="0.1" +
+ class="image" + style="background: url('https://unsplash.it/400/800?image=889') repeat center; background-size: + cover;"
+ data-paroller-factor="-0.4" +
+ class="image" + style="background: url('https://unsplash.it/400/800?image=889') repeat center; background-size: + cover;"
+ data-paroller-factor="-0.1" +
+
+
js
+ $('.image').paroller(); +
+ $('.image').paroller(); +
+ $('.image').paroller();
-
-
- Card image cap -
-

Card horizontal

-

- data-paroller-factor="-0.1" data-paroller-type="foreground" - data-paroller-direction="horizontal" -

+ +
+
+
+
+
+
+
html
+ class="jumbotron" + style="background: url('https://unsplash.it/1920/500?image=867') no-repeat center; + background-size: cover;"
+ data-paroller-factor="-0.15"
+ data-paroller-direction="horizontal" +
+
+
js
+ $('.jumbotron').paroller();
-
-
- Card image cap -
-

Card horizontal

-

- data-paroller-factor="0.1" data-paroller-type="foreground" - data-paroller-direction="horizontal" -

+ +
+
+
+
+
+
+
html
+ class="jumbotron" + style="background: url('https://unsplash.it/1920/1200?image=249') repeat bottom; + background-size: cover;"
+ data-paroller-factor="0.3"
+ data-paroller-direction="horizontal" +
+
+
js
+ $('.jumbotron').paroller();
-
-
-
-
- Card image cap -
-

Card horizontal

+ +
+
+
+
+
+
+
html
+ class="jumbotron" + style="background: url('https://unsplash.it/1920/900?image=888') no-repeat center; + background-size: cover;"
+ data-paroller-factor="-0.5"
+ data-paroller-direction="horizontal" +
+
+
js
+ $('.jumbotron').paroller();
-
-
- Card image cap -
-

Card horizontal

+ +
+ Scrolling is fun ✌️ +
+
+
+
+
+
html
+ class="mega align-center" data-paroller-factor="0.1" data-paroller-type="foreground" +
+
+
js
+ $('.mega').paroller();
-
-