正文

使用css实现炫酷的横屏滚动效果

uturobako  2022-02-11  737

关键词：

炫酷的横屏滚动效果css实现

DEMO: https://codepen.io/kobako/pen/BxVLLm

我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是不知道你有没有看过一些横屏滚动的网站,这样的网站在一众竖屏网页中鹤立鸡群,很容易达到吸人眼球的效果.

花时间谷歌了一下,发现实现方法是真的不少,你可以用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标签都没法正常使用了,你可以手动为他们设定一个大小

让css3中transform属性带你一文实现炫酷的转盘抽奖效果(代码片段)

...奖项数，和用户免费抽奖的次数，并且免费抽奖使用完，用户可以观看广告进行抽奖或使用积分抽奖。正好最近有空，出了这篇教程，解析转盘抽奖的实现过程。此子系统整体开发的话由我负责，其中前端... 查看详情

使用coordinatorlayout打造各种炫酷的效果(代码片段)

使用CoordinatorLayout打造各种炫酷的效果自定义Behavior——仿知乎，FloatActionButton隐藏与展示NestedScrolling机制深入解析一步步带你读懂CoordinatorLayout源码自定义Behavior-仿新浪微博发现页的实现ViewPager，ScrollView嵌套ViewPager滑动... 查看详情

纯css实现那些超炫酷的动画效果(代码片段)

...其实大家看到的动画其实很大一部分都是通过js或者插件实现的，但你知道吗，我们所熟知的css就可以制作炫酷的动画效果，嗯？css?是的，你没有听错，就是css，下面分享的几款动画效果就是用css实现... 查看详情

那些炫酷的css文字效果之诗词《兔》(代码片段)

...子不吃窝边草，这就越扯越远了，今天的主题是用纯CSS来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让我们一边欣赏古诗词的同时一边走进CSS的世界。效果一文字从清晰到模糊到彻底看不见，给人一... 查看详情

使用three.js实现炫酷的赛博朋克风格3d数字地球大屏🌐

...朋克2077风格视觉效果实现炫酷3D数字地球大屏页面。页面使用React+Three.js+Echarts+stylus技术栈，本文涉及到的主要知识点包括：THREE.Spherical球体坐标系的应用、Shader结合TWEEN实现飞线和冲击波动画效果、dat.GUI调试工具库的使用、clip... 查看详情

unity之shadergraph实现超级炫酷的溶解效果入门级教程(代码片段)

...xff0c;效果展示二，原理介绍三，实现效果四，使用示例五，完整图示前言若你的工程还没有进行基础配置，请查看我的博文Unity之ShaderGraph入门使用详解，按照步骤操作完成配置即可，还能顺便学习一下... 查看详情

android自定义view：炫酷的剑气加载效果实现(代码片段)

看到一个非常炫的加载效果，文章中大佬是通过css实现的，今天咱们来用Android的自定义View来实现一下这是理想中的效果这是现实的效果不能说百分百还原吧，只能说精髓开工这个效果仔细看，就是有三个类似月... 查看详情

canvas-炫酷的3d星空

1.国际惯例，先上效果(⊙o⊙)…效果图看上去效果并不很炫酷啊，直接戳这里看效果吧！2代码部分 html： <canvasid="canvas"width="1920"height="1080"></canvas>css：*{margin:0;padding:0;}/*没啥必须的css*/js：（这个博主也是够... 查看详情

一个炫酷的头像悬停效果(代码片段)

...的头像从一个圆圈或洞里伸出来时的那种效果吗？本文将使用一种很简洁的方式实现该悬停效果，可以用在你的头像交互上面。看到了吗？我们将制作一个缩放动画，其中头像部分似乎从它所在的圆圈中钻出来了。是不是很酷呢... 查看详情

c#winform实现炫酷的透明动画界面(转载)

...可以实现窗体的任意透明，效果很好，不会有毛边。不过使用这个API之后，会有一个问题就是无法使用普通控件，而且没有Paint消息。为了解决这个问题，有两种方法。一、使用双层窗体查看详情

利用svg和css3实现炫酷的边框动画

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>line</title></head><style>.empat{position:relative;overflow:hidden;width:200px;height:200 查看详情

css实现炫酷文本过渡动画(代码片段)

...觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码，快来瞧瞧看吧～代码实现文字不断的在切换，确定的是有一个包含纯文字的数组，在此我们定义如下的html代码，... 查看详情

教你做炫酷的碎片式图片切换(canvas)

...。最近心血来潮想学习一个做CSS效果很厉害的大神用纯CSS实现，无奈功力不够只能放弃，最终选择用canvas来完成了。准备工作1.首先准备相同尺寸的图片若干张，本例中图片尺寸均为1920*1080 查看详情

recyclerview+snaphelper实现炫酷viewpager效果

...4.2.0的support包中添加的对RecyclerView的拓展，结合RecyclerView使用，能很方便的做出一些炫酷的效果。SnapHelper是一个抽象类Google内置了两个默认实现类，LinearSnapHelper和PagerSnapHelper。这里我只使用了PagerSnapHelper做了一个案例：查看详情

一步步实现这个炫酷的树状节点图自定义控件(代码片段)

...treemap;树状图；思维导图；文章目录简介效果展示使用步骤实现基本的布局流程实现自由放缩及拖动实现添加删除节点动画实现树状图的回归适应屏幕拖动编辑树状图结构写在最后简介github连接:https://github.com/guaish 查看详情

linux中一些没用但是炫酷的命令行(代码片段)

...数含义-a 异步滚动-b 打开粗体字符-B 所有字符为粗体-o 使用旧式滚动模式-C 切换颜色效果参见下面的视频：https://www.bilibili.com/video/BV12b4y1i73T?spm_id_from=333.999.0.0cmatrix二、sl小火车。sudoapt-getinstallsl效果参见如下所示的视频&#... 查看详情

linux中一些没用但是炫酷的命令行(代码片段)

21.炫酷的css数字j时钟(代码片段)

效果(源码网盘地址在最后)关注公众号《大迁世界》，查看更多视频教程！源码index.html<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>DigitalClock</title><linkrel="stylesheet"href="style.css"/&g 查看详情