【波浪动态特效】基于jquery实现页面底部波浪动画效果(附完整源码下载)
文章目录
- 写在前面
- 涉及知识点
- 实现效果
- 1、搭建页面
-
- 1.1、创建两个片区
- 1.2、创建波浪区域
- 1.3、静态页面源码
- 2、JS实现波浪效果
-
- 2.1 动画原理
- 2.2 动画源码
- 3、源码分享
-
- 3.1 百度网盘
- 3.2 123云盘
- 3.3 邮箱留言
- 总结
写在前面
想必搭建过企业官网的大多数对这个效果不陌生吧，尤其是现在这么卷的前端行业，很多特效是眼花缭乱，各种组件也是层出不穷，不得不让很多人望而却步，因此我马不停蹄的出了这旷世之作。只望大家能学有所长，接下来请听我娓娓道来。
涉及知识点
Jquery如何实现底部波浪动画，如何实现网站底部动态波浪效果，js实现页面波浪效果，前端页面实现网站底部波浪动态背景，jQuery网站底部动态波浪背景动画特效。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
实现效果
这个主要为了给大家一个最终实现效果的反馈，文尾附完整代码包的分享链接。
1、搭建页面
1.1、创建两个片区
创建两个div容器，分别用于存放不同效果的盒子，我采用的是相对布局的方式，主要通过设置样式和html，其中效果如下所示：
其中html结构如下所示：
<body>
<div style="margin-top: 100px">div>
<div class="wave-box">
div>
<div class="footer">
div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>p>
<p>p>
div>
body>
1.2、创建波浪区域
其实在A部分我们就已经创建好了两个div，然后就是针对波浪区域添加波浪效果，当然这里核心还是用背景图片，但是不是想象的那种大图，我用了两张图片，为的是两张图片动态效果，来回滚动形成一种波浪的效果。
首先放一个波浪效果（底部颜色改成灰色方便区分）：
此时创建好了一个波浪，设置背景图即可。
采用相对布局的方式再添加一个效果如下：
当我们最后底色再设置成和其中一组波浪相同的话就有波浪的效果啦。
到最后就是丰富元素的过程啦。具体代码我先贴出，当然也可以完整的包在文尾下载。
最终丰富后静态页面效果（不带波浪）如下：
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
1.3、静态页面源码
Html代码所示
<div style="margin-top: 100px">div>
<div class="wave-box">
<div class="marquee-box marquee-up" id="marquee-box">
<div class="marquee">
<div class="wave-list-box" id="wave-list-box1">
<ul>
<li><img height="60" alt="波浪" src="images/wave_02.png">li>
ul>
div>
<div class="wave-list-box" id="wave-list-box2">
<ul>
<li><img height="60" alt="波浪" src="images/wave_02.png">li>
ul>
div>
div>
div>
<div class="marquee-box" id="marquee-box3">
<div class="marquee">
<div class="wave-list-box" id="wave-list-box4">
<ul>
<li><img height="60" alt="波浪" src="images/wave_01.png">li>
ul>
div>
<div class="wave-list-box" id="wave-list-box5">
<ul>
<li><img height="60" alt="波浪" src="images/wave_01.png">li>
ul>
div>
div>
div>
div>
<div class="footer">
<div class="auto clearfix">
<div class="five-superiority">
<ul class="five-superiority-list clearfix">
<li class="compensate_ico">
<a href="#compensate">
<span class="superiority-icon">span>
<span>100倍故障赔偿span>
a>
li>
<li class="retreat_ico">
<a href="#refund">
<span class="superiority-icon">span>
<span>5天无理由退款span>
a>
li>
<li class="technology_ico">
<a class="superiority-text" href="#afterService">
<span class="superiority-icon">span>
<span>7x24小时技术支持span>
a>
li>
<li class="prepare_ico">
<a href="#ico">
<span class="superiority-icon">span>
<span>0元快速备案span>
a>
li>
<li class="service_ico">
<a href="#secret">
<span class="superiority-icon">span>
<span>1V1专席秘书span>
a>
li>
ul>
div>
<div class="footer-floor1">
<div class="footer-list">
<ul>
<li class="flist-title">产品与服务li>
<li><a href="#"><strong>弹性云服务器strong>a>li>
<li><a href="#"><strong>服务器托管strong>a>li>
<li><a href="#"><strong>云虚拟主机strong>a>li>
<li><a href="#"><strong>某公司管家strong>a>li>
<li><a href="#"><strong>某公司监控strong>a>li>
ul>
<ul>
<li class="flist-title">云解决方案li>
<li><a href="#">金融解决方案a>li>
<li><a href="#">电商解决方案a>li>
<li><a href="#">移动解决方案a>li>
<li><a href="#">游戏解决方案a>li>
<li><a href="#">网站解决方案a>li>
ul>
<ul>
<li class="flist-title">技术与支持li>
<li><a href="#" target="user/">工单系统a>li>
<li><a href="#">意见反馈a>li>
<li><a href="">会员服务a>li>
<li><a href="#">IDC公司a>li>
<li><a href="#">帮助中心a>li>
ul>
<ul class="flist-4">
<li class="flist-title">关于某公司li>
<li><a href="#">公司简介a>li>
<li><a href="#">新闻动态a>li>
<li><a href="#">加入我们a>li>
<li><a href="#">服务协议a>li>
<li><a href="#">友情链接a>li>
ul>
<div class="clear-float">div>
div>
<div class="footer-right">
<div class="telephone" title="服务热线">
<span>span>
<div class="tel-number">400-688-3065div>
div>
<div class="official-plat">
<p class="weixin" style="background-image: "><span id="wx-corner">span>p>
<p class="weibo" style="background-image: "><span id="wb-corner">span>p>
<ul>
<li><a href="#a_null"><span class="weixin-logo">span>某公司官方微信a>li>
<li title="点击打开官方微博"><a href="#" target="_blank"><span class="weibo-logo">span>某公司官方微博a>
li>
<li title="点击打开官方客服"><a href="http://www.baofumeng.cn/inithdd/#/rewordData"><span
class="qq-logo">span>某公司官方客服a>li>
ul>
div>
div>
<div class="clear-float">div>
div>
div>
<div class="footer-floor2">
<p>更多内容可关注CSDN博主《拄杖盲学轻声码》.p>
<p>来源：<a href="http://www.baofumeng.cn/inithdd/#/rewordData" target="_blank">技术英雄榜a>p>
div>
div>
CSS代码所示
/* 更多请关注CSDN博主-《拄杖盲学轻声码》*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none
}
body {
font-family: "Microsoft Yahei";
min-width: 1000px
}
a {
outline: 0;
text-decoration: none
}
strong {
font-weight: 400
}
.strong {
font-weight: 700
}
::selection {
background: #1EACDF;
color: #fff
}
img {
border: 0
}
::-moz-selection {
background: #1EACDF;
color: #fff
}
::-webkit-selection {
background: #1EACDF;
color: #fff
}
.autoWidth {
margin: 0 auto;
min-width: 1000px;
max-width: 1200px
}
.auto {
margin: 0 auto;
min-width: 1000px;
max-width: 1200px
}
@media screen and (max-width:1233px) {
.auto {
padding-left: 10px
}
}
.clearfix:after,
.clearfix:before {
display: table;
line-height: 0;
content: ""
}
.clearfix:after {
clear: both
}
.clear-float {
clear: both
}
.footer {
width: 100%;
background-color: #009fd9;
font-family: "Microsoft Yahei"
}
.footer-floor1 {
width: 100%;
padding: 36px 0 60px
}
.footer-list {
width: 69%;
height: 100%;
float: left
}
.footer-list ul {
float: left;
margin-right: 13%
}
.footer-list .flist-4 {
margin-right: 0
}
.footer-list li {
line-height: 32px
}
.footer-list li a {
color: #b6e2f2;
font-size: 12px;
text-decoration: none
}
.footer-list li a:hover {
text-decoration: underline;
color: #fff
}
.footer-list .flist-title {
font-size: 16px;
color: #fff;
margin-bottom: 15px
}
.footer-floor2 {
width: 100%;
border-top: 1px solid #4cc3ed;
padding: 20px 0;
text-align: center
}
.footer-floor2 p {
text-align: center;
color: #b6e2f2;
font-size: 12px;
line-height: 30px
}
.footer-floor2 p span {
font-family: PingFangSC-Light, 'helvetica neue', 'hiragino sans gb', tahoma, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif
}
.footer-floor2 a {
color: #b6e2f2
}
.footer-floor2 a:hover {
color: #a8d0e0;
text-decoration: underline
}
.foot-link {
margin: 0 15px;
text-decoration: none;
color: #b6e2f2
}
.foot-link:hover {
text-decoration: underline
}
.footer-right {
width: 300px;
float: right
}
.telephone {
width: 100%;
height: 32px;
line-height: 32px;
color: #fff
}
.telephone span {
display: inline-block;
width: 32px;
height: 32px;
float: left;
background: url(../images/phone_32px.png);
margin-left: 16%
}
.telephone .tel-number {
font-size: 30px;
font-weight: 400;
text-align: right
}
.official-plat {
width: 100%;
height: 100%;
margin-top: 20px;
position: relative
}
.official-plat ul {
float: right;
margin-top: 7px
}
.official-plat ul li span {
display: inline-block;
width: 32px;
height: 32px;
background: url(../images/plat_icon.png) no-repeat 0 0;
line-height: 32px;
float: left;
margin-right: 12px
}
.official-plat ul li .weibo-logo {
background: url(../images/plat_icon.png) no-repeat -32px 0
}
.official-plat ul li .qq-logo {
background: url(../images/plat_icon.png) no-repeat -64px 0
}
.official-plat ul li {
height: 45px
}
.official-plat ul a {
display: inline-block;
height: 32px;
width: 100%;
line-height: 32px;
color: #fff;
text-decoration: none;
font-size: 12px
}
.official-plat>p {
display: inline-block;
width: 132px;
height: 132px;
border: 1px solid #ddd;
background-color: #fff
}
.official-plat .weixin {
position: absolute;
top: 0;
left: 10px;
background-image: url(../images/plat_qrcode.png);
background-repeat: no-repeat;
background-position: 0 0
}
.official-plat .weibo {
position: absolute;
top: 0;
left: 10px;
background-image: url(../images/plat_qrcode.png);
background-repeat: no-repeat;
background-position: -132px 0;
display: none
}
#wx-corner {
border: 10px solid transparent;
border-left: 10px solid #fff;
position: absolute;
top: 12px;
right: -20px;
z-index: 10
}
#wb-corner {
border: 10px solid transparent;
border-left: 10px solid #fff;
position: absolute;
top: 58px;
right: -20px;
z-index: 10
}
.five-superiority {
width: 100%;
border-bottom: 1px solid #27aede;
padding: 10px 0 20px
}
.five-superiority-list li {
float: left;
width: 20%;
height: 36px;
text-align: center;
border-left: 1px solid #27aede
}
.five-superiority-list li:first-child {
border-left: none
}
.five-superiority-list li a {
display: inline-block;
position: relative;
width: 100%;
height: 36px;
line-height: 36px;
background: no-repeat 2% center;
text-indent: 2em;
color: #fff;
font-size: 16px
}
.five-superiority-list li a:hover {
color: #bfe7f5
}
.five-superiority-list li a.superiority-text {
text-indent: 4em
}
.superiority-icon {
position: absolute;
width: 40px;
height: 40px;
left: 10%;
background-repeat: no-repeat;
background-image: url(../images/footer_youshi.png)
}
.compensate_ico .superiority-icon {
background-position: 0 0
}
.compensate_ico:hover .superiority-icon {
background-position: 0 -50px
}
.retreat_ico .superiority-icon {
background-position: 0 -100px
}
.retreat_ico:hover .superiority-icon {
background-position: 0 -150px
}
.technology_ico .superiority-icon {
background-position: 0 -200px
}
.technology_ico:hover .superiority-icon {
background-position: 0 -250px
}
.prepare_ico .superiority-icon {
background-position: 0 -300px
}
.prepare_ico:hover .superiority-icon {
background-position: 0 -350px
}
.service_ico .superiority-icon {
background-position: 0 -400px
}
.service_ico:hover .superiority-icon {
background-position: 0 -450px
}
.marquee-box {
overflow: hidden;
width: 100%;
position: absolute;
left: 0;
top: 0
}
.marquee {
width: 8000%;
height: 60px
}
.wave-list-box {
float: left
}
.wave-list-box ul {
float: left;
height: 60px;
overflow: hidden;
zoom: 1
}
.wave-list-box ul li {
height: 60px;
width: 100%;
float: left;
line-height: 30px;
list-style: none
}
.wave-box {
width: 100%;
position: relative;
height: 60px;
}
2、JS实现波浪效果
2.1 动画原理
其实这个地方是我们的核心动画代码，前面页面搭建就是为效果提供基础的保障，这个就是为页面提供灵魂性的东西，核心知识点在于jquery scrollLeft动画，因为scrollLeft主要用于获取或设置元素的水平滚动位置，通过定时器调整他的位置从而实现一种横向滚动的效果，别的也不多说，我直接贴代码吧。
2.2 动画源码
//波浪动画
$(function () {
var marqueeScroll = function (id1, id2, id3, timer) {
var $parent = $("#" + id1);
var $goal = $("#" + id2);
var $closegoal = $("#" + id3);
$closegoal.html($goal.html());
function Marquee() {
if (parseInt($parent.scrollLeft()) - $closegoal.width() >= 0) {
$parent.scrollLeft(parseInt($parent.scrollLeft()) - $goal.width());
}
else {
$parent.scrollLeft($parent.scrollLeft() + 1);
}
}
setInterval(Marquee, timer);
}
var marqueeScroll1 = new marqueeScroll("marquee-box", "wave-list-box1", "wave-list-box2", 20);
var marqueeScroll2 = new marqueeScroll("marquee-box3", "wave-list-box4", "wave-list-box5", 40);
});
3、源码分享
3.1 百度网盘
链接：https://pan.baidu.com/s/1uqsY7WCa_tleJVR4w88FBg
提取码：hdd6
3.2 123云盘
链接：https://www.123pan.com/s/ZxkUVv-11I4.html
提取码：hdd6
3.3 邮箱留言
评论区留下您的邮箱账号，博主看到第一时间发给您，祝您生活愉快！
总结
以上就是今天要讲的内容，本文主要介绍了如何实现网站底部动态波浪效果，js实现页面波浪效果，前端页面实现网站底部波浪动态背景，jQuery网站底部动态波浪背景动画特效，也期待大家一起进步哈，2023年一起加油！！！
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。