设为首页 加入收藏

TOP

用CSS3 & jQuery创建apple TV海报视差效果(三)
2017-10-13 10:49:42 】 浏览:2547
Tags:CSS3 jQuery 创建 apple 海报 效果
transform', transformPoster); /* parallax foreach layer */ /* loop thought each layer */ /* get custom parallax value */ /* apply transform */ $layer.each(function() { var $this = $(this); var offsetLayer = $this.data('offset') || 0; /* get custom parallax value, if element docent have data-offset, then its 0 */ var transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)'; $this.css('transform', transformLayer); }); });

你会发现角度值的范围是从-180到180度,以下代码修复这个问题让角度值从0-360度:

if (angle < 0) { angle = angle + 360; }

现在角度有了,就可以随着光标的移动来动态改变渐变颜色的角度值:

$shine.css('background', 'linear-gradient(' + (angle - 90) + 'deg, rgba(255,255,255,' + e.pageY / h + ') 0%,rgba(255,255,255,0) 80%)');

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!

注意 :减去90度的原因是 linear-gradient 属性的需要,如果你使用 -webkit-linear-gradient,-moz-linear-gradient属性就没有必要。

转译https://designmodo.com/apple-tv-effect/

首页 上一页 1 2 3 下一页 尾页 3/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JavaScript知识点的总结 下一篇【JQuery】jQuery中的常用方法小结

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目