h5 实现背景左右滚动效果

方法一（用轮播插件来进行修改）：

用轮播图来进行轮播，网上一大把的轮播插件，直接拿来调试一下即可，将每个图片进行轮播样式轮播即可，不作过多介绍。

优缺点：该方法运行工作量大，图片需要单独切割，多个轮播图或多个图片，可能会导致有点卡顿。循环轮播没有闪点。

方法二（用背景图片css3 animation来进行轮播）：

下面只介绍左右滚动方法，上下滚动方法掉转即可。

将图片切成两张很长的图片，进行轮播

.box1{background: url(/img/logion/rotation01.jpg) no-repeat;background-size: auto 100%;background-repeat: repeat;-webkit-animation: scrollBad1 100s linear infinite;-moz-animation: scrollBad1 100s linear infinite;animation: scrollBad1 100s linear infinite;
}
.box2{background: url(/img/logion/rotation02.jpg) no-repeat;background-size: auto 100%;background-repeat: repeat;-webkit-animation: scrollBad2 200s linear infinite;-moz-animation: scrollBad2 200s linear infinite;animation: scrollBad2 200s linear infinite;
}@-webkit-keyframes scrollBad1 {0% {background-position: 0 0;}100% {background-position: -3700px 0;}
}
@-moz-keyframes scrollBad1 {0% {background-position: 0 0;}100% {background-position: -3700px 0;}
}
@keyframes scrollBad1 {0% {background-position: 0 0;}100% {background-position: -4700px 0;}
}
@-webkit-keyframes scrollBad2 {0% {background-position: 0 0;}100% {background-position: -4700px 0;}
}
@-moz-keyframes scrollBad2 {0% {background-position: 0 0;}100% {background-position: -4700px 0;}
}
@keyframes scrollBad2 {0% {background-position: 0 0;}100% {background-position: -4700px 0;}
}

优缺点：流畅度比轮播图效果要好，代码量少、图片整张切，但进行到100%后面重置0%会有闪烁一下效果。

h5 实现背景左右滚动效果相关推荐

教你用JavaScript制作背景图像滚动效果
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个背景图像滚动效果.滚动鼠标背景图像缩小,下方滑动出现文字.通过实战我们将学会obj ...
H5+CSS3 背景图毛玻璃效果实现方案
方案一.<img> + filter: blur() <div class="container"><img class="backgrou ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
html怎么制作固定背景,使用CSS制作的页面背景固定和滚动效果
HTML HTML结构很简单,一个class为.cd-fixed-bg的div元素用于放置固定背景图,一个class为.cd-scrolling-bg的div元素用于滚动的部分.我们可以放置多个.cd ...
html背景自动切换带滚动,利用CSS固定背景交替实现视差滚动效果
利用CSS固定背景交替实现视差滚动效果 Sponsor 视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂.没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技 ...
unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
35个立体动感的视差滚动效果网站作品
这篇文章收集了35个具有立体动感效果的视差滚动网页设计作品分享给大家.视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今 ...
html制作滚动游戏,HTML标签marquee实现滚动效果的简单方法(必看)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - 可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语 ...

h5 实现背景左右滚动效果

方法一（用轮播插件来进行修改）：

方法二（用背景图片css3 animation来进行轮播）：

h5 实现背景左右滚动效果相关推荐

最新文章

热门文章