如何在http://metalab.co/projects/swivl/ 上创建跟随浏览器的动画元素?
How to create animated element that follows browser like on http://metalab.co/projects/swivl/?
如何创建像 http://metalab.co/projects/swivl/ 一样跟随浏览器的动画元素?
我试着查看那里的 html 代码,但 div 上只有一个过渡,它包含 ipad 背景图像。
我一直无法弄清楚是什么 css/ js 导致了这种效果,使得 ipad 转向并跟随访问者的鼠标位置(左右平移)
您可以通过在 mousemove 上设置元素的变换 属性 来做到这一点。
像这样:
var $window = $(window),
$box = $('#box')
rotation = 0;
$window.on('mousemove', function(event){
rotation = (event.pageX/$window.width()*90) - 45;
$box.css('transform', 'perspective( 600px ) rotateY(' + rotation + 'deg)');
});
它将在最新的 chrome 和 ff 中工作。请注意,您可以为转换属性使用浏览器前缀(-webkit-、-moz- ...)。这取决于您支持的浏览器。
如何创建像 http://metalab.co/projects/swivl/ 一样跟随浏览器的动画元素?
我试着查看那里的 html 代码,但 div 上只有一个过渡,它包含 ipad 背景图像。 我一直无法弄清楚是什么 css/ js 导致了这种效果,使得 ipad 转向并跟随访问者的鼠标位置(左右平移)
您可以通过在 mousemove 上设置元素的变换 属性 来做到这一点。
像这样:
var $window = $(window),
$box = $('#box')
rotation = 0;
$window.on('mousemove', function(event){
rotation = (event.pageX/$window.width()*90) - 45;
$box.css('transform', 'perspective( 600px ) rotateY(' + rotation + 'deg)');
});
它将在最新的 chrome 和 ff 中工作。请注意,您可以为转换属性使用浏览器前缀(-webkit-、-moz- ...)。这取决于您支持的浏览器。