yangruoyang / alloytouch Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alloyteam/phytouch

Smooth scrolling, rotation, pull to refresh and any motion for the web 　　　You can touch this →

License: MIT License

JavaScript 99.86% CSS 0.14%

alloytouch's Introduction

English | 简体中文

AlloyTouch

Smooth scrolling, rotation, pull to refresh and any motion for the web.

Install

npm install alloytouch

API

new AlloyTouch({
            touch:"#wrapper",
            vertical: true,
            target: target, 
            property: "translateY", 
            min: 100, 
            max: 2000, 
            sensitivity: 1,
            factor: 1,
            spring: true,
            step: 45,
            change:function(value){  },
            touchStart:function(evt, value){  },
            touchMove:function(evt, value){  },
            touchEnd:function(evt, value){  },
            tap:function(evt, value){  },
			pressMove:function(evt, value){  },
            animationEnd:function(value){  } 
 })

Demo(Mobile)

Simple : http://alloyteam.github.io/AlloyTouch/
3D : http://alloyteam.github.io/AlloyTouch/example/3d.html
Rotate : http://alloyteam.github.io/AlloyTouch/example/rotate.html
Carousel : http://alloyteam.github.io/AlloyTouch/example/carousel.html
Carousel2 : http://alloyteam.github.io/AlloyTouch/example/carousel2.html
Three.js : http://alloyteam.github.io/AlloyTouch/example/threejs/

Vue1 & Vue2 Version

Demo(Mobile)

ScrollList Vue1: http://alloyteam.github.io/AlloyTouch/vue/example/
ScrollList Vue2: http://alloyteam.github.io/AlloyTouch/vue/example/

<div id="wrapper" v-alloytouch="{options: options, methods:{animationEnd: onAnimationEnd}}">
      <div id="scroller" class="alloytouch-target">
            <ul>
            ...  
            </ul>
      </div>
</div>

new Vue({
      el: '#page',
      data: {
            options: {
                  touch:"",//dom for touching
                  target: '#scroller', //dom for transform
                  vertical: true,
                  property: "translateY",  
                  sensitivity: 1,
                  factor: 1,
                  min: window.innerHeight - 45 - 48 - 2000, 
                  max: 0, 
                  step: 40
            }
      },
      methods: {
            onAnimationEnd(){
                  console.log('onAnimationEnd')
            }
      },
      //dynamic set property
      //min: xxx,
      //max: xxx
});