酷毙了!三种风格的全屏幻灯片效果【附源码下载】

  今天,我们想向您展示如何创建平铺背景图像的幻灯片效果。其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看。

  这个幻灯片效果是由四个区域的独立移动构成,通过画面分割,同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。除了这种效果我们也将添加两个更多的变化,我们的宗旨是实现超流畅的交互体验。

  温馨提示:为保证最佳的效果,请在 IE10 、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

 

 

源码下载      在线演示

 

  对于幻灯片,我们需要一个特殊的 HTML 结构来实现四个不同的页面区域,每个区域都使用相同的图像,但用了不同的定位,让四个区域拼起来刚好是一张完整的背景图片。我们需要确保内容充满整个页面,因为这是一个全屏幻灯片效果。

  我们先定义一个简单的初始结构,能够指定在每个面板(或幻灯片)中哪张图像会显示,然后创建我们的重复结构的片段。所以,最初我们希望是这样的:

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

  为了能够通过把图片分解成片段来实现动画效果,我们将需要为每个面板定义下面这样的结构:

div id="boxgallery" class="boxgallery" data-effect="effect-1">
<div class="panel current">
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
</div>
<div class="panel">
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
</div>
<div class="panel">
<!-- ... -->
</div>
<div class="panel">
<!-- ... -->
</div>
<nav>
<span class="prev"><i></i></span>
<span class="next"><i></i></span>
</nav>
</div>

  当然,你可能看上面的结构可能会问为什么不使用背景图片而用图像元素?其实在尝试使用各种方式对比之后,我们在试验后得出结论,使用背景图像与设置背景大小的方式可能会导致过渡效果有问题。例如使用 background-size: cover 会导致转换动画出现颤抖现象。

  我们还需要添加一个导航,这样我们就可以通过面板进行浏览。上面我们还用到了数据属性,里面设置了动画的效果。下面,让我们添加一些样式到这个效果中。需要注意的是,这里演示的 CSS 将不包含任何浏览器的前缀,但在源码文件是有的。

  首先,我们在全屏模式,所以为了让我们的页面布满窗口,需要设置如下:

html, body, .container {
height: 100%;
}

  主容器和子元素都将绝对定位,面板将占据所有的宽度和高度:

.js .boxgallery,
.js .boxgallery div {
position: absolute;
}
.js .boxgallery,
.js .panel {
top: 0;
left: 0;
width: 100%;
height: 100%;
}

  由于我们的效果将可能有元素超出自己的区域,我们还需要确保不会溢出:

.js .boxgallery,
.bg-tile,
.bg-img {
overflow: hidden;
}

  这个例子有三种效果,下面是用于第一效果的 CSS 动画效果代码:

.boxgallery[data-effect="effect-1"] .panel.active .bg-tile,
.boxgallery[data-effect="effect-2"] .panel.active .bg-tile {
animation: scaleDown 1.1s ease-in-out;
}
@keyframes scaleDown {
from { transform: translate3d(0,0,380px); }
to { transform: translate3d(0,0,0); }
}

 

源码下载      在线演示

 

您可能感兴趣的相关文章
  • 太赞了!超炫的页面切换动画效果【附源码下载】
  • 创意无限!一组网页边栏过渡动画【附源码下载】
  • 好东西!动感的页面加载动画效果【附源码下载】
  • 使用 CSS3 实现3D图片滑块效果【附源码下载】
  • 时尚设计!三种奇特网格加载效果【附源码下载】

 

本文链接:如何创建平铺背景的四格幻灯片效果 via Codrops

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/】


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365276.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VMware卸载有残留,再安装时报错提示MSI Failed

引用自吾爱破解论坛&#xff1a;https://www.52pojie.cn/thread-455779-1-1.html 解决方法&#xff1a;软件自动清理法&#xff1b; 软件 地址&#xff1a;下载地址1&#xff1a;链接&#xff1a;http://pan.baidu.com/s/1ntzAR7j 密码&#xff1a;a8ug备用&#xff1a;http://…

基本函数依赖和候选键_[总结]关系数据库设计基础(函数依赖、无损连接性、保持函数依赖、范式、……)...

联系(Relationship)1:1联系&#xff1a;如果实体集E1中的每个实体最多只能和实体集E2中一个实体有联系&#xff0c;反之亦然&#xff0c;那么实体集E1对E2的联系成为一对一联系&#xff0c;记为1:1&#xff1b;1&#xff1a;N联系&#xff1a;一对多&#xff0c;记为1&#xff…

使用Mockito模拟自动装配的字段

依赖注入是诸如Spring和EJB之类的Control容器反转的非常强大的功能。 将注入的值封装到私有字段中总是一个好主意。 但是&#xff0c;自动连线字段的封装会降低可测试性。 我喜欢Mockito解决此问题以模拟自动装配字段的方式。 将在示例中进行解释。 &#xff08;此博客文章希望…

西游之路——python全栈——CRM项目之表结构设计

一、表结构设计 1 from django.db import models2 from django.contrib.auth.models import User3 4 """自带验证"""5 class UserProFile(models.Model):6 """用户信息表"""7 user models.OneToOneField…

你见过吗?9款超炫的复选框(Checkbox)效果

复选框&#xff08;Checkbox&#xff09;在各个浏览器中的效果不一致&#xff0c;因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框&#xff08;Checkbox&#xff09;效果&#xff0c;纯 CSS3 实现&#xff0c;未使…

系统制成docker镜像_docker镜像原理 镜像制作 dockerfile

为什么一个centos镜像只有两百多兆&#xff0c;而tomcat镜像五百多兆1.先说说操作系统操作系统组成部分&#xff1a;进程调度子系统进程通信子系统内存管理子系统设备管理子系统文件管理子系统网络通信子系统作业控制子系统Linux文件系统由bootfs和rootfs两部分组成bootfs&…

linux的vi命令详解,Linux上Vi命令详解

Linux下Vi命令详解补充一点&#xff1a;在vi中使用命令的方法是&#xff1a;冒号命令回车&#xff0c;如:q 回车代表退出。这里有一本0分下载关于Vi详细介绍的书&#xff1a;http://download.csdn.net/detail/zqiang_55/4399731文本编辑器是所有计算机系统中最常用的一种工具。…

jpg、gif、png-8、png-24的区别

一、gif格式的特点 1、透明性。gif是一种布尔透明类型&#xff0c;即它可以是全透明&#xff0c;也可以是全不透明&#xff0c;但是没有半透明 2、动画。gif支持动画 3、无损耗性。gif是一种无损耗的图像格式&#xff0c;这意味着你可以对gif图片做任何操作也不会使图片质量产生…

Java依赖注入选项

我想花一些时间来总结一些流行的Java依赖注入&#xff08;DI&#xff09;框架。 这是可用功能的高级概述。 首先&#xff0c;什么是依赖注入&#xff1f; “依赖注入是一种软件设计模式&#xff0c;可以删除硬编码的依赖&#xff0c;并可以在运行时或编译时更改它们。” – 维…

实用技巧:使用 Google Analytics 跟踪 JS 错误

Google Analytics&#xff08;谷歌分析&#xff09;不仅仅是一个流量统计工具&#xff0c;你还可以用它来测量广告活动的有效性&#xff0c;跟踪用户多远到所需的页面流&#xff08;从点击广告到购物车到结账页面&#xff09;获取&#xff0c;并基于用户的信息设置浏览器和语言…

从Ubuntu 14.04 LTS版升级到Ubuntu 16.04 LTS

Ubuntu 16.04 (Xerial Xerus) Long Term Support版于最近发布了。要想了解它的新功能和新特性&#xff0c;就必须升级或安装这个新系统。 本文讲述怎样一步步从Ubuntu 14.04 LTS版升级到Ubuntu 16.04 LTS版。要注意在升级前做好重要数据的备份&#xff0c;以免造成数据损失。因…

finditerable 转list_java – 通过拆分和运行将ListenableFuture转换为Iterable

(替代my original answer)但是,如果转型是缓慢的,或者某些输入可能会失败但是对其他输入成功会怎么样&#xff1f;在这种情况下,我们希望单独转换每个输出.另外,我们希望确保转换只发生一次.我们的集合转换方法不能保证这一点.因此,在您的示例代码中,输出上的每次迭代都会向执行…

linux 的date命令详解,linux之date命令详解

时间方面 :% : 印出% %n : 下一行%t : 跳格%H : 小时(00..23)%I : 小时(01..12)%k : 小时(0..23)%l : 小时(1..12)%M : 分钟(00..59)%p : 显示本地 AM 或 PM%r : 直接显示时间 (12 小时制&#xff0c;格式为 hh:mm:ss [AP]M)%s : 从 1970 年 1 月 1 日 00:00:00 UTC 到目前为止…

Java 8:对集合中的值进行排序

意识到Java 8将在接下来的几周内发布其GA版本之后&#xff0c;我认为现在是时候来看看它了&#xff0c;在过去的一周里&#xff0c;我一直在阅读Venkat Subramaniam的书 。 我要讲的是第3章&#xff0c;其中涉及对人员集合进行排序。 Person类的定义大致如下&#xff1a; sta…

html的table弹窗_Js弹出基于Table的可关闭浮动层

可以拖动和隐藏的层&#xff0c;替代弹出窗口isIEdocument.all;isNN!document.all&&document.getElementById;isN4document.layers;isHotfalse;function ddInit(e){topDogisIE ? "BODY" : "HTML";whichDogisIE ? document.all.theLayer : docume…

Linux装ntfs后内存不够,Linux_安装Ubuntu后无法使用NTFS硬盘或移动硬盘,  在安装Ubuntu系统后,存在 - phpStudy...

安装Ubuntu后无法使用NTFS硬盘或移动硬盘在安装Ubuntu系统后&#xff0c;存在无法使用NTFS硬盘或移动硬盘的问题&#xff0c;下面小编就给大家介绍下Ubuntu系统无法挂载NTFS的解决方法&#xff0c;不知如何挂载的朋友不妨来了解下。具体问题如下图所示&#xff1a;“Please res…

TJOI2018Party

题目描述 小豆参加了\(NOI\)的游园会&#xff0c;会场上每完成一个项目就会获得一个奖章&#xff0c;奖章 只会是\(N\), \(O\), \(I\)的字样。在会场上他收集到了\(K\)个奖章组成的串。 兑奖规则是奖章串和兑奖串的最长公共子序列长度为小豆最后奖励的等级。 现在已知兑奖串长度…

HTML5 Dashboard – 那些让你激动的 Web 技术

HTML5 Dashboard 是一个 Mozilla 推出的项目&#xff0c;里面展示了最前沿的 HTML5&#xff0c;CSS3&#xff0c;JavaScript 技术。每一项技术都有简洁&#xff0c;在线演示以及详细的文档链接。这些技术将成为未来一段时间 Web 开发的顶尖技术&#xff0c;如果不想落伍的话就赶…

通过自动回复机器人学Mybatis---基础版

第1章 案例简介 介绍要实现的案例情况&#xff0c;后面会通过这个案例来学习 Mybatis第2章 实战第一部----黎明前的黑暗 在没有 Mybatis 的情况下&#xff0c;使用 Jsp Servlet Jdbc 实现案例中的一个模块开发流程1&#xff1a; 开发流程2&#xff1a; 开发流程3&#xff1a;…

部署到Maven中央存储库

您需要使您的Java库公开访问吗&#xff1f; 您的项目托管在GitHub上吗&#xff1f; 您是否喜欢“将所有功能都部署到Maven Central Repository”按钮的想法&#xff1f; 我将展示如何使用maven-release-plugin进行设置 。 源代码托管在GitHub上&#xff0c;因此还将描述对源代码…