Skip to content

lnowave/parallaxTilt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

parallaxTilt

一个使html元素呈视觉差倾斜的jQuery插件(支持移动端重力感应效果)
A jQuery plug-in, tilt the picture with parallax.(support the deviceorientation event on mobile.)

demo

使用parallaxTilt需要引入jQuery和parallaxTilt.js。

<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/parallaxTilt.js"></script>

Javascript初始化

$('.tilter_image').parallaxTilt({
  //options
})

Options设置及默认值

{
  parallaxMultiple: 0.1,//视觉差系数
  tiltMultiple: 0.05,//倾斜程度
  duration: 500,//运动过程时间
  easing:'easeOutExpo'//动画类型
}

为了更流畅的动画效果,建议给需要运动的元素加上以下css

.tilter_image{
  transition: .5s ease-out;
  transform: translate3d(0,0,0);
}

About

A jQuery plug-in, tilt the picture with parallax

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published