html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效。该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错。
使用方法
HTML结构
该幻灯片的HTML结果由两部分组成:一个ul.cd-slider用于制作幻灯片,ol.cd-slider-navigation则用于制作幻灯片的导航。它们都被包裹在div.cd-slider-wrapper容器中。
Slide Number 1
需要注意的是幻灯片的导航元素ol.cd-slider-navigation不是直接插入到DOM中的,而是通过jQuery来动态添加的。
CSS样式
在小屏幕设备中(视口小于900px),幻灯片的结果非常简单:.cd-slider元素使用相对定位,它的所有
子元素都采用绝对定位,开始时位于左上角的位置。
所有的列表项都通过translateX(100%)被移动到右侧屏幕之外。另外.is-visibleclass类用于将它们移动会屏幕中间(使用translateX(0))。
.cd-slider {
position: relative;
height: 100%;
overflow: hidden;
}
.cd-slider li {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: translateX(100%);
transition: transform 0.6s;
}
.cd-slider li.is-visible {
transform: translateX(0);
}
在大屏幕设备中,列表项通过translateX(0)移动会视口中,而他的两个子元素.cd-half-block.content和.cd-half-block.image被移动到屏幕的右侧,分别是translateX(200%)和translateX(100%)。
当前被选择的幻灯片项被添加了.is-visible class之后,这两个.cd-half-block元素会被使用translateX(0)移动会屏幕中间。
这里的动画都使用了CSS3 Transitions过渡动画效果。对于.cd-half-block.content元素,设置了0.6秒的transition-duration和0秒的transition-delay,而.cd-half-block.image元素则设置了0秒的transition-duration和0.3秒的transition-delay,这样,当.cd-half-block.content元素动画过渡进行到一半的时候,.cd-half-block.image元素就会立刻移动回屏幕的中间。可以通过下面的这张GIF图片来观察这个动画过程。
@media only screen and (min-width: 900px) {
.cd-slider li {
transform: translateX(0);
}
.cd-slider .cd-half-block {
height: 100%;
width: 50%;
float: right;
}
.cd-slider .cd-half-block.content {
transform: translateX(200%);
transition: transform 0.6s 0s ease-in-out;
}
.cd-slider .cd-half-block.image {
transform: translateX(100%);
transition: transform 0s 0.3s;
}
.cd-slider li.is-visible .cd-half-block.content,
.cd-slider li.is-visible .cd-half-block.image {
transform: translateX(0%);
}
.cd-slider li.is-visible .cd-half-block.content {
transition: transform 0.6s 0s ease-in-out;
}
}
JavaScript
该幻灯片特效中使用jQuery来动态插入幻灯片的导航按钮。
// sliderContainer = $('.cd-slider-wrapper')
var sliderPagination = createSliderPagination(sliderContainer);
function createSliderPagination(container){
var wrapper = $('
');
container.children('.cd-slider').find('li').each(function(index){
var dotWrapper = (index == 0) ? $('
')
: $('
'),
dot = $('').appendTo(dotWrapper);
dotWrapper.appendTo(wrapper);
var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;
dot.text(dotText);
});
wrapper.appendTo(container);
return wrapper.children('li');
}
另外还使用jQuery来实现了基本的幻灯片功能,包括滑动触摸和幻灯片导航功能。
html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效相关推荐
- 全屏响应式html5+jquery幻灯片轮播特效,纯CSS3超酷全屏响应式幻灯片特效
这是一款效果非常炫酷的纯CSS3全屏幻灯片特效.该幻灯片特效的效果类似于全屏水平方向的单页滚动效果.该幻灯片效果使用纯CSS3制作,代码仅有100多行,非常的小巧. 制作方法 HTML结构 整个幻灯片 ...
- 使用 jQuery Deferred 和 Promise 创建响应式应用程序
这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...
- html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片 带进度条 图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
- html图片使用glide,jQuery响应式幻灯片插件jquery.glide.js(支持触摸轻量级)
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效
这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...
- 手机html轮播图,jquery支持移动手机的响应式轮播图插件
这是一款支持移动手机的响应式jquery轮播图插件.它具有跨平台,响应式,支持移动设备等特点,并且在使用CSS3制作过渡动画,效果非常炫酷. 使用方法 在页面中引入jquery,hammer.min. ...
- html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
- html5 jq图片效果,HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面
CSS 语言: CSSSCSS 确定 /*CLEARFIX*/ body{margin: 0;} .clearfix:after { content: "."; display: ...
- # 前端初学html+css+js+bootstrap4+jquery部分后的简单响应式静态网页编写(漫威主题个人博客)
关于学习 自上次写博客已过了1个月左右时间.当时刚看完html继续学习css中. 而现在也接触到了jquery的一些东西(虽然大佬们都说jquery已过时,不过拿来入手应该不错).于是这一个月在学这些 ...
最新文章
- 多线程番外之真假*程
- 七牛云删除图片接口_图片基本处理(imageView2)
- matlab相机畸变校正csdn,android广角相机畸变校正算法和实现示例
- Vue 页面加载闪现出现{{xxx}}问题
- centos 安装java sdk_Linux——CentOS7使用yum命令安装Java SDK
- [LeetCode] Best Time to Buy and Sell Stock 买卖股票的最佳时间
- Android Studio出现cannot resolve symbol httpclient解决方法
- select 下拉框的选中项的change事件
- lisp类似常青藤菜单_在autocad里面,我编写了很多lisp命令,我想新增一个菜单工具栏(如:文件(F),编辑(E),视图(V)......),然...
- 国二c语言题库 word,国家二级计算机考试MS-Office历年真题题库及答案
- jquery,Ajax判断验证码是否正确,不正确阻止提交
- 这里除了安全,什么都不会发生!Docker镜像P2P加速之路
- CODEVS 2491 玉蟾宫
- 胡瑜 简介中科院计算机所,胡瑜--中科院计算所计算机体系结构国家重点实验室...
- 生鲜配送公司面临的几大痛点,你知道多少?
- 全网最精减、安装最简单、无头疼配置的Katago教程,大小才168M,职业水平,散仙订制版
- 一文弄懂责任链设计模式
- 微服务网关搭建(podman+kong+konga)
- Qt向MySQL中插入图片
- Android 监听屏幕唤醒和关闭的广播
热门文章
- 2022-2028年中国儿童保健品行业市场研究及前瞻分析报告
- java action dao_java中Action层、Service层和Dao层的功能区分
- Go 学习笔记(78)— Go 标准库 net/http 创建服务端(接收 GET、POST 请求)
- 2022-2028年中国微滤膜行业市场发展调研及投资前景分析报告
- 快速删除c/c++语言中的注释
- 一个隐马尔科夫模型的应用实例:中文分词
- 合肥工业大学—SQL Server数据库实验三:SQL语句创建和删除基本表
- Atomic Layer Deposition原子层沉积技术
- 使用Runtime执行推理(C++)
- Yolov4性能分析(上)