English | 简体中文

AlloyTouch

super tiny size touch and physical motion library

• super tiny size
• highly abstract
• real touch feedback
• independent of style layout
• simple API design
• high efficiency movement
• real physical movement trace

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(){  }, 
            touchStart:function(value){  },
            touchMove:function(value){  },
            touchEnd:function(value){  },
            animationEnd:function(value){  } 
 })

Demo(Mobile)

• Simple : http://alloyteam.github.io/AlloyTouch/
• 3D : http://alloyteam.github.io/AlloyTouch/3d.html
• Rotate : http://alloyteam.github.io/AlloyTouch/rotate.html
• Carousel : http://alloyteam.github.io/AlloyTouch/carousel.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
});

Many thanks to

• transformjs

Who is using AlloyTouch?

License

This content is released under the MIT License.