全屏背景图片动画插件 vegas.min.js

最新推荐文章于 2024-05-15 09:46:22 发布

Bonjours

最新推荐文章于 2024-05-15 09:46:22 发布

阅读量689

点赞数

分类专栏：前端文章标签： vegas.js 背景缓动

本文链接：https://blog.csdn.net/Bonjours/article/details/103663300

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>全屏背景插件</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<link rel="stylesheet" type="text/css" href="css/vegas.min.css">

<body class="static-banner vegas-container">
<div class="vegas-slide vegas-transition-swirlRight vegas-transition-swirlRight-in" style="transition: all 2000ms ease 0s;">
<div class="vegas-slide-inner vegas-animation-kenburns" style="background-image: url('img/4.jpg'); background-color: rgb(255, 255, 255); background-position: center center; background-size: cover; animation-duration: 6000ms;"></div>
</div>

<script type="text/javascript" src='js/jquery-2.1.4.min.js'></script>
<!-- 全屏背景插件 -->
<script type="text/javascript" src='js/vegas.min.js'></script>
<script>
    $('.static-banner').vegas({
        delay: 6000,
        timer: false,
        transitionDuration: 2000,
        slides: [
            { src: 'img/4.jpg' }
        ],
        transition: 'swirlRight',
        animation: 'kenburns'
    });
</script>
</body>
</html>

最重要的就是引入基础js和vegas.js，然后定义缓动参数。

下面这两句可以不需要，它们只是为了增加炫目效果而设定的，去掉就实现了单一的图片旋转动画加载效果。

<div class="vegas-slide vegas-transition-swirlRight vegas-transition-swirlRight-in" style="transition: all 2000ms ease 0s;">
<div class="vegas-slide-inner vegas-animation-kenburns" style="background-image: url('img/4.jpg'); background-color: rgb(255, 255, 255); background-position: center center; background-size: cover; animation-duration: 6000ms;"></div>
</div>

效果：