From 7b74fbe3d1ef4942d05ac16f6be68a8c05984d4c Mon Sep 17 00:00:00 2001 From: darumock Date: Sun, 15 Sep 2019 01:23:30 +0900 Subject: [PATCH 1/2] Rewrite README.md --- readme.md | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/readme.md b/readme.md index d6da166..03914ca 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,4 @@ -Simple and minimal size scroll library. +Simple and lightweight size scroll library. # Installing ~~~ @@ -6,35 +6,49 @@ npm install plainScroll ~~~ # Usage -PlainScroll is easy to usage. Insert the following code into your project. +PlainScroll is simple to usage. Insert the following code into your project. ~~~ import PlainScroll from 'plainScroll'; ~~~ -Next, create a instance. You can set options at the same time. Each default parameter has a trigger of 'plainScroll' as class name to start scrolling, duration of 1000 milliseconds as time at animation, easing of 'easeOut' as animation effect, you can set either for 'linear', 'easeIn', 'easeOut', 'easeInOut'. +Next, create a instance. ~~~ new PlainScroll(); // or set option new PlainScroll({ - trigger: 'plainScroll', + trigger: '.plain-scroll', duration: 1000, easing: 'easeOut' + onScrollStart: () => console.log('start'), + onScrollEnd: () => console.log('end') }); ~~~ Finally, attach the trigger name to anchor tag, prepare the element you want to scroll. ~~~ - - -
+ +
~~~ +# Option +You can set options at the same time you create an instance. +## trigger +Class name for starting scrolling, set to anchor tag. + Default set is '.plain-scroll'. +## duration +It is time to scroll to the destination. Default set is 1000 milliseconds. +## easing +Add inertia to the scroll. You can set either for 'linear', 'easeIn', 'easeOut', 'easeInOut'. Default set is 'easeOut'. +## callback +You can run any function at start and end of scroll. + # Support Borwser +Support for stable version in the modern browsers and Internet Explorer 11. - Chrome - Firefox - Safari -- Internet Explorer 11 - Edge +- Internet Explorer 11 # License MIT @darumock \ No newline at end of file From d6e06304370e26af034324dfbe4a33d1758aca5e Mon Sep 17 00:00:00 2001 From: darumock Date: Sun, 15 Sep 2019 01:29:03 +0900 Subject: [PATCH 2/2] Some changes --- .gitignore | 3 ++- dist/plain-scroll.min.esm.js | 1 - playground/index.html | 33 --------------------------------- rollup.config.js | 4 ---- 4 files changed, 2 insertions(+), 39 deletions(-) delete mode 100644 dist/plain-scroll.min.esm.js delete mode 100644 playground/index.html diff --git a/.gitignore b/.gitignore index 91dfed8..d21eb09 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store -node_modules \ No newline at end of file +node_modules +playground \ No newline at end of file diff --git a/dist/plain-scroll.min.esm.js b/dist/plain-scroll.min.esm.js deleted file mode 100644 index 533cb09..0000000 --- a/dist/plain-scroll.min.esm.js +++ /dev/null @@ -1 +0,0 @@ -var ease={linear:function(t){return t},easeIn:function(t){return t*t},easeOut:function(t){return t*(2-t)},easeInOut:function(t){return t<.5?2*t*t:(4-2*t)*t-1}},PlainScroll=function(){function t(t){var n=void 0===t?{}:t,e=n.trigger,i=void 0===e?".plain-scroll":e,o=n.duration,r=void 0===o?1e3:o,s=n.easing,a=void 0===s?"easeOut":s,l=n.onScrollStart,c=void 0===l?function(){}:l,u=n.onScrollEnd,d=void 0===u?function(){}:u,f=this;this.options={trigger:i,duration:r,easing:a,onScrollStart:c,onScrollEnd:d},this.start={position:0,time:0},this.end={position:0},this.ease=ease;var p=document.querySelectorAll(this.options.trigger);Array.from(p).forEach(function(t){var n=document.getElementById(t.getAttribute("href").replace("#",""));t.addEventListener("click",function(t){t.preventDefault(),f.options.onScrollStart(),f.start.time=(new Date).getTime(),f.start.position=window.scrollY,f.end.position=f.getOffset(n).top-f.start.position,f.animate()})})}return t.prototype.animate=function(){var t=this,n=(new Date).getTime()-this.start.time,e=n>=this.options.duration,i=n/this.options.duration;i=i>1?1:i;var o=this.ease[this.options.easing](i)*this.end.position+this.start.position;window.scrollTo(0,o),e?(window.cancelAnimationFrame(this.requestFrame),this.options.onScrollEnd()):this.requestFrame=window.requestAnimationFrame(function(){return t.animate()})},t.prototype.getOffset=function(t){var n=t.getBoundingClientRect();return{top:n.top+window.pageYOffset-document.documentElement.clientTop,left:n.left+window.pageXOffset-document.documentElement.clientLeft}},t}();export default PlainScroll; diff --git a/playground/index.html b/playground/index.html deleted file mode 100644 index e8ba365..0000000 --- a/playground/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - Document - - - スクロール1 - スクロール2 -
-
- - - - - \ No newline at end of file diff --git a/rollup.config.js b/rollup.config.js index 2310bb2..06bdfc9 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -44,10 +44,6 @@ export default () => { file: 'dist/plain-scroll.min.js', name: 'PlainScroll', format: 'umd' - }, - { - file: 'dist/plain-scroll.min.esm.js', - format: 'esm' } ], plugins: [