Article directory
written in front
Presumably most of the people who have built the official website of the enterprise are familiar with this effect, especially in the front-end industry with such a volume now, many special effects are dazzling, and various components are also emerging in endlessly, which has to discourage many people, so I created this masterpiece without stopping. made. I just hope that everyone can learn something, and please listen to me next.
Knowledge points involved
How does Jquery realize the bottom wave animation, how to realize the dynamic wave effect at the bottom of the website, js realizes the page wave effect, the front-end page realizes the dynamic background of the wave at the bottom of the website, and the dynamic wave background animation effect at the bottom of the jQuery website.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
achieve effect
This is mainly to give you a feedback on the final implementation effect, and the sharing link of the complete code package is attached at the end of the article.
1. Build the page
1.1. Create two areas
Create two div containers, which are used to store boxes with different effects. I adopt a relative layout method, mainly by setting styles and html, and the effects are as follows:
The html structure is as follows:
<body>
<div style="margin-top: 100px"></div>
<!-- 更多请关注CSDN博主-《拄杖盲学轻声码》 -->
<!-- footer -->
<div class="wave-box">
<!-- 存放波浪 -->
</div>
<div class="footer">
<!-- 存放底部导航 -->
</div>
<!-- footer end -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p></p>
<p></p>
</div>
</body>
1.2. Create wave area
In fact, in part A, we have already created two divs, and then added wave effects to the wave area. Of course, the core here is to use the background image, but it is not the big image imagined. I used two images for the purpose of The dynamic effect of the two pictures, scrolling back and forth to form a wave effect.
First put a wave effect (the bottom color is changed to gray for easy distinction):
At this point, a wave is created, just set the background image.
Add another effect in the way of relative layout as follows:
When we finally set the background color to be the same as one of the waves, there will be a wave effect.
In the end, it is the process of enriching elements. I will post the specific code first, and of course you can download the complete package at the end of the article.
The final enriched static page effect (without waves) is as follows:
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
1.3. Static page source code
Html code as shown
<div style="margin-top: 100px"></div>
<!-- footer -->
<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">
<!-- footer主要-->
<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="http://icp.niaoyun.com/">备案中心</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-3065</div>
</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 code shown
/* 更多请关注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 realizes wave effect
2.1 Principles of animation
In fact, this place is our core animation code. The previous page construction is to provide a basic guarantee for the effect. This is to provide the soul for the page. The core knowledge point lies in the jquery scrollLeft animation, because scrollLeft is mainly used to obtain or set the level of elements Scrolling position, adjust its position through the timer to achieve a horizontal scrolling effect, not much else to say, I will post the code directly.
2.2 Animation source code
// wave animation
$(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. Source code sharing
3.1 Baidu Netdisk
Link: https://pan.baidu.com/s/1uqsY7WCa_tleJVR4w88FBg
Extraction code: hdd6
3.2 123 cloud disk
Link: https://www.123pan.com/s/ZxkUVv-11I4.html
Extraction code: hdd6
3.3 Email message
Leave your email account in the comment area, and the blogger will send it to you as soon as he sees it. I wish you a happy life!
Summarize
The above is what I want to talk about today. This article mainly introduces how to realize the dynamic wave effect at the bottom of the website. JS realizes the wave effect of the page. , Come on in 2023! ! !
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。