网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款花哨的jQuery洗牌动画布局插件。CSS网格布局的响应式设计。
1. 添加卡片布局。
<div class="layoutContainer">
<div class="layoutContent imgMiddle">
<div class="layoutContent shuffle item__Card">
<div class="layoutCard layoutContentCenter item__Card firstCol">
<div>
<img src="1.png"/>
</div>
</div>
<div class="layoutCard layoutContentCenter item__Card fifthCol">
<div>
<img src="2.png"/>
</div>
</div>
<div class="layoutCardRow2 layoutContentCenter item__Card secondColOne">
<div>
<img src="3.png"/>
</div>
</div>
<div class="layoutCardRow2 layoutContentCenter item__Card secondColTwo">
<div>
<img src="4.png"/>
</div>
</div>
<div class="layoutCardRow2 layoutContentCenter item__Card thirdColTwo">
<div>
<img src="5.png"/>
</div>
</div>
<div class="layoutCardRow2 layoutContentCenter item__Card thirdColOne">
<div>
<img src="5.png"/>
</div>
</div>
<div class="layoutCardRow2 layoutContentCenter item__Card thirdColThree">
<div>
<img src="6.png"/>
</div>
</div>
<div class="layoutCardRow2 layoutContentCenter item__Card fourthColOne">
<div>
<img src="7.png"/>
</div>
</div>
<div class="layoutCardRow2 layoutContentCenter item__Card fourthColTwo">
<div>
<img src="8.png"/>
</div>
</div>
</div>
</div>
</div>
2. 在页面中加载布局css样式文件。
<link rel="stylesheet" type="text/css" href="css/homepage.css">
3. 在页面中加载jquery库和插件文件。
<script src="jquery.slim.min.js"></script>
<script src="TweenMax.min.js"></script>
4.创建触发显示效果的JavaScript代码。
$(document).ready(function () {
TweenLite.from('.firstCol', 2.5, {
ease: Power2.easeOut,
x: 400
});
TweenLite.to('.firstCol', 0, {
ease: Power2.easeOut,
x: 0
});
TweenLite.from('.fifthCol', 2.5, {
ease: Power3.easeOut,
x: -400
});
TweenLite.to('.fifthCol', 0, {
ease: Power3.easeOut,
x: 100
});
TweenLite.from('.secondColOne', 2.5, {
ease: Power3.easeOut,
x: 300,
y: 100
});
TweenLite.to('.secondColOne', 0, {
ease: Power3.easeOut,
x: 100,
y: 100
});
TweenLite.from('.secondColTwo', 2.5, {
ease: Power3.easeOut,
x: 300,
y: 0
});
TweenLite.to('.secondColTwo', 0, {
ease: Power3.easeOut,
x: 100,
y: 100
});
TweenLite.from('.thirdColOne', 2.5, {
ease: Power3.easeOut,
x: 0,
y: 300
});
TweenLite.to('.thirdColOne', 0, {
ease: Power3.easeOut,
x: 100,
y: 100
});
TweenLite.from('.thirdColThree', 2.5, {
ease: Power3.easeOut,
x: 0,
y: -300
});
TweenLite.to('.thirdColThree', 0, {
ease: Power3.easeOut,
x: 100,
y: 100
});
TweenLite.from('.fourthColOne', 2.5, {
ease: Power3.easeOut,
x: -300,
y: 300
});
TweenLite.to('.fourthColOne', 0, {
ease: Power3.easeOut,
x: 100,
y: 100
});
TweenLite.from('.fourthColTwo', 2.5, {
ease: Power3.easeOut,
x: -300,
y: 0
});
TweenLite.to('.fourthColTwo', 0, {
ease: Power3.easeOut,
x: 100,
y: 100
});
});
转载请注明来源:jQuery响应式洗牌动画布局插件
本文永久链接地址:https://www.moyouyouw.cn/code/855.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论