开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css纵向全屏翻页

CSS纵向全屏翻页基础概念

CSS纵向全屏翻页是一种网页设计技术，通过CSS动画和JavaScript实现页面内容的逐屏展示效果。每个“页”占据整个视口的高度，用户可以通过滚动或点击按钮来切换不同的页面。

相关优势

视觉冲击力强：全屏翻页能够提供独特的视觉体验，增强用户的参与感和沉浸感。
内容展示清晰：每个页面专注于一个主题，有助于用户更好地理解和记忆信息。
交互性强：用户可以通过滚动或点击按钮来控制页面的切换，增加了互动性。

类型

滚动翻页：通过监听滚动事件，实现页面内容的逐屏展示。
点击翻页：通过按钮点击事件，实现页面内容的切换。

应用场景

个人简历或作品集
产品介绍页面
教育培训课程
艺术作品展示

示例代码

以下是一个简单的CSS纵向全屏翻页示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Vertical Fullscreen Page Flip</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        .page {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            color: white;
            transition: opacity 0.5s ease-in-out;
        }
        .page:nth-child(odd) {
            background-color: #3498db;
        }
        .page:nth-child(even) {
            background-color: #e74c3c;
        }
        .page.active {
            opacity: 1;
        }
        .page:not(.active) {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="page active">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>

    <script>
        let currentPage = 0;
        const pages = document.querySelectorAll('.page');

        function nextPage() {
            pages[currentPage].classList.remove('active');
            currentPage = (currentPage + 1) % pages.length;
            pages[currentPage].classList.add('active');
        }

        window.addEventListener('wheel', (event) => {
            if (event.deltaY > 0) {
                nextPage();
            }
        });
    </script>
</body>
</html>

参考链接

CSS-Tricks: Fullscreen Page Flip

常见问题及解决方法

页面切换不流畅：
- 确保CSS过渡效果设置正确，避免过于复杂的动画。
- 使用requestAnimationFrame优化JavaScript动画性能。

滚动事件处理不当：
- 使用wheel事件监听滚动，注意处理不同设备的滚动方向。
- 避免在滚动事件中进行过多的DOM操作，可以使用节流（throttle）或防抖（debounce）技术优化性能。
兼容性问题：
- 确保CSS属性和JavaScript API在不同浏览器中的兼容性，可以使用Polyfill或Modernizr进行检测和处理。

通过以上方法，可以有效地实现CSS纵向全屏翻页效果，并解决常见的技术问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS全屏换肤

background-color: yellow} #box3{background-color: blue} #box4{background-color: green} #box5{} 这块儿是Css

710 0

jQuery支持mobile的全屏水平横向翻页效果

这是一款支持移动手机mobile设备的 jQuery全屏水平横向翻页效果插件。该翻页插件能够使页面在水平方向上左右全屏翻动，它支持手机触摸屏，支持使用鼠标滚动页面。

3.7K2 0

CSS实现全屏切换效果

如何通过CSS使div实现全屏效果全屏要素全屏的元素及其父元素都要设置height:100% 将html、body标签设置height:100% （注：height:100%是跟随其父元素高度变化而变化的...） 1.图片横排展示全屏切换效果 this is the page 展示效果 2.图片竖排展示全屏切换效果

2.8K2 0

css 3D 翻页效果原

最近在慕课网上学习css3的3D效果，主要用到perspctive,perspective-origin transform-style:presersve-3d, perspective：800

1.4K5 0

css实现横向滚动条(css纵向滚动条)

注意：(滚动条设置的width、height，分别是对应纵向滚动条宽度、横向滚动条高度，无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式，常用属性如下） ::-webkit-scrollbar...webkit-scrollbar-thumb 滑块 ::-webkit-scrollbar-thumb:hover 滑块悬浮 ::-webkit-scrollbar-thumb:vertical:hover 纵向滑块悬浮...horizontal:hover 横向滑块悬浮 ::-webkit-scrollbar-corner 边角，两个滚动条交汇处注意：(滚动条设置的width、height，分别是对应纵向滚动条...宽度、横向滚动条高度，无法修改纵向滚动条高度、横向滚动条宽度数值) /* 1,滚动条 */ ::-webkit-scrollbar { width: 20px; /* 纵向滚动条.../ ::-webkit-scrollbar-button{ width: 30px; /* 横向滚动条宽度 */ height: 20px; /* 纵向滚动条

7.6K3 0

CSS布局解决方案（全屏布局）

100px; padding-right:20px; }.right,.left { display:table-cell; } 5）使用flex （1）原理、用法原理：通过设置CSS3...; padding-right: 20px; }.left p{ width:200px; } （3）优缺点缺点:ie6 ie7不支持 3）使用flex （1）原理、用法原理：通过设置CSS3...因此，我们需要解决两个问题：如何让总宽度增加g(即：L+g) 如何让每个宽包含g（即：w+g） 1）使用float （1）原理、用法原理：增大父框的实际宽度后，使用CSS3属性box-sizing进行布局的辅助...width:100px; padding-right:20px; }.right,.left { display:table-cell; } 3）使用flex （1）原理、用法原理：通过设置CSS3...20px; }.right { flex:1; } （3）优缺点优点:代码少，flex很强大缺点:兼容性存在一定问题 4)使用display （1）原理、用法原理：通过设置display中的CSS3

1.8K4 0

css显示全屏背景图片

css设置全屏背景图片 *{ margin: 0; padding: 0; }

2.7K2 0

分享一个css全屏加载特效

忘记在哪个网站扒来的了效果 CSS #loading { position: fixed; width: 100%;

6114 0

纯css实现纵向滚动固定表头与横向内容滚动

这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动 ?...image.png 纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置overflow-y:auto就实现纵向滚动了。但横向滚动呢？...div> .outer { overflow-x: auto; } .content-container { overflow-y: auto; } 虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了...content-container"> …… css

5.4K0 0

CSS实现全屏背景图片铺满自适应

方式一：使用background-size属性CSS的background-size属性可以设置背景图片的尺寸，使其覆盖整个元素。....fixed; /* 背景图片固定 */ min-height: 100vh; /* 至少为视口高度 */}方式三：使用伪元素和calc()利用伪元素（如::after）和calc()函数，可以创建一个全屏的背景容器

2831 0

完美的背景图全屏css代码 – background-size:cover?

归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和center定位背景图，然后用background-size来使图片铺满，具体css如下 html...Opera 10+ (Opera 9.5 支持background-size属性但是不支持cover) Firefox 3.6+ 这里你会发现ie8及以下版本不支持，这些蛋疼浏览器则需要添加下面的css...比图片变形效果好写，大家可以尝试下）如果你觉得上面的方法不是很满意，那试试下面这种用img形式来实现背景平铺效果首先在html中加入以下代码然后通过css...IE9+ IE 7/8: 平铺效果支持，但是在小于1024px的屏幕下居中效果失效下面再说一种方法 JQ模拟的方法 html部分 css...Safari / Chrome / Opera / Firefox IE7+ 其实我自己一般用的是（因为够用了，咱不挑/其实上面的都是俺翻译过来的） html部分 css

6.7K4 0

网站纯CSS全屏loading特效（由中间向两边散开）

网页特效预览预览2：gif图片动的有点快将代码放在head.php【顶部文件里】 css新建一个css文件把以下代码放在之前 css" href="css/loader.css">//路径为自己的css路径以下PHP代码 CSS

1.9K6 0

【经验分享】图片自适应窗口大小css；CSS实现背景图片全屏铺满自适应的方式

目录设置背景颜色和边距设置背景图片调整背景图片尺寸和位置完整代码使用效果如下（展示）网页版图片效果展示手机版图片效果展示如何使用 CSS 创建网页背景效果在网页设计中，背景是一个重要的视觉元素...通过 CSS 样式表，我们可以轻松地控制网页的背景效果。在这篇博客中，我将介绍如何使用 CSS 来设置网页背景，让你的网站更加吸引人。...这可以通过简单的 CSS 属性来实现： margin: 0px; background-color: #ffffff; /* 将背景颜色设置为白色 */ 在上面的代码中，margin: 0px; 用来清除默认的页面边距...你可以将图片文件放在网站文件夹的 images 子文件夹中，以便在 CSS 中引用。no-repeat 表示背景图片不重复平铺，只显示一次。...通过这些简单的 CSS 属性，我们可以轻松地创建出各种独特而吸引人的网页背景效果，为用户带来更好的浏览体验。

1.1K0 0

sublime text3的使用

LESS 插件语法高亮显示 sublime-less2css 插件将less文件编译成css文件。...ColorHighlighter 插件显示所选颜色值的颜色，并集成了ColorPicker 使用方法按Tab键 Compact Expand CSS Command 插件使CSS属性展开及收缩，格式化CSS...创建一个新窗口 Ctrl + N 在当前窗口创建一个新标签 Ctrl + W 关闭当前标签，当窗口内没有标签时会关闭该窗口 Ctrl + Shift + T 恢复刚刚关闭的标签 F11 切换至普通全屏...Shift + F11 切换至无干扰全屏 Alt+Shift+1 Single 切换至独屏 Alt+Shift+2 Columns:2 ...切换至纵向二栏分屏 Alt+Shift+3 Columns:3 切换至纵向三栏分屏 Alt+Shift+4 Columns:4 切换至纵向四栏分屏 Alt

8704 0

butterfly文章页面上下篇按钮UI调整

教程原贴参考了事件监听动作的语法 addEventListener 监听dom元素是否在屏幕内的示例 JS判断指定dom元素是否在屏幕内的方法实例思路分析我试图通过将文章底部的按钮改至左右两侧，类似翻页键...，同时添加悬停动作，通过css对兄弟相邻元素的hover监测来控制显隐，悬停按钮时在页面正中显示对应文章卡片。...所以尝试通过设置滚动事件监听，在页面滚动至原本上下页翻页的位置，也就是正文刚好读完的时候，才显示按钮。...布局上是打算电脑端做成横向排列，手机端做成纵向排列的。...DIFF 新建 [Blogroot]\themes\butterfly\source\css\_custom\fixed-pagination.styl, 为了区分左右和 PC 端，手机端，我可是头一次这么卖力的写了三份

1.7K2 0

【前端艺术】html5和css3响应式全屏滚动页面切换源码

这是一款全屏响应式的HTML5和CSS3页面切换效果。这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的。...引入CSS代码 css?...family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'> css"...href="css/default.css" /> css" href="css/demo.css" /> css" href="css/style.css" /> 阅读原文-演示/下载源码，还有更多更好玩的开源代码等你哦！

2.7K3 0

分享一款jQuery全屏滚动页面特性案例

分享一款jQuery全屏滚动页面特性案例。我们在来往官网，或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。...content="text/html; charset=UTF-8"> jQuery实现滚屏翻页效果...http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> css..."> /* css 重置 */ *{margin:0; padding:0; list-style:none; } body{ color:#333;font:14px/150% "Microsoft...art1" class="article"> 01作者声明 jquery纵向定位滚屏特效代码

4K3 0

GitHub 上有意思的项目推荐

s5s5 学习 CSS3 动画的心得程序员如何优雅的挣零花钱？ Web 前端 Solved by Flexbox 用Flex实现常见布局。...You don't (may not) need Lodash/Underscore You Don't Need JavaScript 用 CSS 来实现原来以为一定需要 JavaScript 的效果...underscore-1.8.3.js 源码解读 polyfill(兼容浏览器API的shim) box-sizing-polyfill 让ie6/7支持 CSS box-sizing: border-box...Respond 让浏览器支持 CSS3： min/max-width flexibility Flexbox 的 polyfill。...CSS 效果 superscrollorama 视觉差效果。 impress.js 各种炫的效果，用来做幻灯片不错。 fullPage 全屏翻页的js组件，用来做幻灯片不错。

9743 0

易企秀前端压缩源码分析与还原

animation属性，本质上是CSS3的animation动画,可以参见（http://www.w3school.com.cn/css3/css3_animation.asp） elementBox.css...= 800; } // 上下翻页上下惯性翻页立体翻页卡片翻页放大翻页上下连续翻页上下连续翻页 if (0 == pageMode || (...左右翻页左右连续翻页翻书翻页 if (3 == pageMode || (4 == pageMode || (5 == pageMode || 10 == pageMode...，比如左右翻页X位移是否大于Y位移并且X的偏移量大于20。..._scrollMode)))))))))) { // 纵向翻页，增加y offsetY = offset;

4.1K8 0

UIPageViewController电子书翻页效果

横向.gif 纵向.gif 上面的效果主要是用到了UIPageViewController，http://www.jianshu.com/p/a676899d9b70 这篇文章讲的挺细的，对于中间的图片嵌入效果想了解的可以查看我以前写的内容...http://www.jianshu.com/p/a75c1a07cd51 /* UIPageViewController 为我们提供了2种翻页样式，一种是拟真，一种是滚动...UIPageViewControllerTransitionStylePageCurl//拟真 UIPageViewControllerTransitionStyleScroll//滚动翻页的方向...UIPageViewControllerNavigationOrientationHoriz//横向 UIPageViewControllerNavigationOrientationVertical//纵向...UIPageViewControllerNavigationDirectionForward,//横向，像书一样 //UIPageViewControllerNavigationDirectionReverse//纵向

2.4K9 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭