使用css实现炫酷的横屏滚动效果
炫酷的横屏滚动效果css实现
我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是不知道你有没有看过一些横屏滚动的网站,这样的网站在一众竖屏网页中鹤立鸡群,很容易达到吸人眼球的效果.
花时间谷歌了一下,发现实现方法是真的不少,你可以用inline-block
加上no-wrap
,也可以用rotate
将整个页面或者div旋转(不过我对这个是真的苦手,看不懂).看了那么多,尝试总结一下最简单也最能令人接受的方法吧
首先你需要一个div容器,和很多你想要令其横屏滚动的pages
<div class="container">
<div class="page" style="background-color: red">page1</div>
<div class="page" style="background-color: green">page2</div>
<div class="page" style="background-color: blue">page3</div>
<div class="page" style="background-color: yellow">page4</div>
</div>
我给他们每个div加上了背景颜色,在布局的时候这种做法是非常好用的
现在我想要将每一个page最大化到适应整个屏幕,像这样
所以添加css:
.page {
height: 100vh;
width: 100vw;
}
这里的vh和vw似乎是html5才有的单位,数字代表元素占整个视窗的百分比
你可以看到每个page都占满了整个屏幕,滚动条是垂直的.现在我提供两种方式来将他们横屏滚动.第一种的思路是用大家可能比较熟悉的inline-block,第二种是用flex布局(这个容错率好像比较高,我比较喜欢)
inline-block方式
效果像这样:
css:
<style>
body{
margin: 0;
}
.container {
white-space: nowrap;
height: 100vh;
overflow-y: hidden;
}
.page {
width: 100vw;
height: 100vh;
display: inline-block;
}
</style>
首先为container加上white-space: nowrap
,为page加上inline-block
样式,这样页面就不会换行而是横向排列
这里将container限定高度为整个视窗然后应用overflow-y
属性,这样一来,就看不到难看的y轴滚动条了,因为超出视窗y轴外的部分会被隐藏掉
flex方式
<style>
body{
margin: 0;
}
.container {
display: flex;
flex-wrap: nowrap;
height: 100vh;
overflow-y: hidden;
}
.page {
flex: 0 0 auto;
width: 100vw;
height: 100vh;
}
</style>
个人比较喜欢flex方式.如果你复制上面的代码去实际试一试的话,就会发现inline block方式存在一个问题:相邻两个page中间会有一条很细的沟
这条沟不是padding或者margin造成的,就像浏览器对待文字的时候,会自动在两个字之间加上一条沟,让你看得更舒服,这是浏览器的默认行为.当然,也是有解决方法的,有兴趣的可以看看
.container{
...
font-size: 0;
}
.page {
...
font-size: 12px;
}
将父容器的字体大小设为0,就能解决沟的问题.但是这样一来,你需要为page设定一个字体大小,并且底下的所有h标签都没法正常使用了,你可以手动为他们设定一个大小
使用css实现炫酷的横屏滚动效果的更多相关文章
- WebGIS简单实现一个区域炫酷的3D立体地图效果
1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...
- 巧妙的实现 CSS 斜线(炫酷的小效果)
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果 ...
- 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画
效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...
- 17.纯 CSS 创作炫酷的同心矩形旋转动画
原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div cla ...
- 如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...
- 教你用原生CSS写炫酷页面切换效果,跟第三方组件说拜拜
因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大 ...
- 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...
- HTML+CSS教程(三)marquee滚动效果
一.marquee 1.marquee标签的属性scrollHeight:获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离.scrollTop: ...
- 如何在你的blog中添加炫酷的飘雪动画效果
将下面的代码复制到你的设置栏下页眉html代码框中即可 <script> (function($){$.fn.snow=function(options){,maxSize:,newOn: ...
随机推荐
- 使用git在gitlab上拉取代码的方法
最近在项目中用到了gitlab,他是一个类似于github的代码托管工具. 因为是第一次使用还不太熟悉,所以在此记录一下. 1.首先需要使用github的注册账号登录gitlab,查看右上角用户头像处 ...
- Sbulime Text 2 修改选中字符串的颜色
Sublime Text 2 > Preferences > Browse Packages... 假设当前试用的 Color Scheme 是 Monokai,则在 Color Sche ...
- 系统可能不会保存你所做的修改 onbeforeunload
网上找了好多实现这个的方法,说的还是不明白.害得我(我自己的原因)以为是需要在服务器环境下才能跑通 window.onbeforeunload; 后来猜想是不是函数返回值发生变化就会触发. <! ...
- Windows搭建Nexus3私服
1. Nexus 简介 Nexus 是一个强大的 Maven 仓库管理器 , 它极大地简化了自己内部仓库的维护和外部仓库的访问 ; 利用 Nexus 你可以只在一个地方就能够完全控制访问和部署在你所维 ...
- class字节码结构(四)(方法集合的结构)
<Java虚拟机原理图解>1.5. class文件中的方法表集合--method方法在class文件中是怎样组织的 一个类有多个方法,所以方法肯定是一个集合. 目标是: 1,了解方法在字节 ...
- 语法糖----C#的async和await
C# 5.0中引入了async 和 await.这两个关键字可以让你更方便的写出异步代码. public class MyClass { public MyClass() { DisplayValue ...
- HTTP协议及WWW服务应用
一.用户访问网站的流程图 二.DNS解析的流程图 三.用户访问网站的基本流程原理阐述 ① 用户在浏览器中输入请求的地址回车 ② 先找本地的缓存和Hosts文件,有解析的对应IP直接返回个客户端IP地址 ...
- XP系统安装VS2010失败的解决方法
今天装了一个双系统,但是在XP系统上安装VS2010的时候就出现了下面的错误 于是在网上搜索各种资源,查看错误日志,网上说是office2007的原因,我也抱着试试看的态度去卸载了,可是卸载后却发现还 ...
- Linux CentOS7系统中ssh的用法
大家都知道,公司买上服务器,不可能实时在线操作虚拟机,也没有那个时间和精力登录到公司的云服务商官网进行操作,一来不安全,二来也效率不高. 如果是购买的虚拟主机,你可以使用ftp进行本地程序文件传输和从 ...
- 隐型马尔科夫模型(HMM)向前算法实例讲解(暴力求解+代码实现)---盒子模型
先来解释一下HMM的向前算法: 前向后向算法是前向算法和后向算法的统称,这两个算法都可以用来求HMM观测序列的概率.我们先来看看前向算法是如何求解这个问题的. 前向算法本质上属于动态规划的算法,也就是 ...