全屏滚动效果

最新推荐文章于 2023-11-13 09:22:09 发布
最新推荐文章于 2023-11-13 09:22:09 发布
阅读量606 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42413689/article/details/80923890
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            overflow: hidden;
        }
        .big{
            position: absolute;
            width: 100%;
            transition: 1s;
        }
        .div1{
            width: 100%;
            background-color: aqua;
        }
        .div2{
            width: 100%;
            background-color: slateblue;
        }
        .div3{
            width: 100%;
            background-color: sienna;
        }
    </style>
</head>
<body>
<ul class="big">
<li class="div1">1</li>
<li class="div2">2</li>
<li class="div3">3</li>
</ul>
<script>

    window.onload=function () {
        var oDiv1=document.getElementsByClassName("div1")[0];
        var oDiv2=document.getElementsByClassName("div2")[0];
        var oDiv3=document.getElementsByClassName("div3")[0];
        var oBig=document.getElementsByClassName("big")[0];
        oDiv1.style.height=window.innerHeight+"px"
        oDiv2.style.height=window.innerHeight+"px"
        oDiv3.style.height=window.innerHeight+"px"
       window.onresize=function () {
           oDiv1.style.height=window.innerHeight+"px"
           oDiv2.style.height=window.innerHeight+"px"
           oDiv3.style.height=window.innerHeight+"px"
       }
        oBig.style.top=0+"px"
            window.onmousewheel=function () {
                if(event.wheelDelta<0){
                    oBig.style.top=parseInt(oBig.style.top)-window.innerHeight+"px";
                    if(parseInt(oBig.style.top)<=-window.innerHeight*2){
                        oBig.style.top=-window.innerHeight*2+"px"
                    }
                }
                else if(event.wheelDelta>0){
                    oBig.style.top=parseInt(oBig.style.top)+window.innerHeight+"px";
                    if(oBig.style.top>=0+"px"){
                        oBig.style.top=0+"px"
                    }
                }
            }
    }
</script>
</body>
</html>
s_psycho
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML5实现单页面全屏滚动动画特效源码
09-07
这是一款可以在单网页上全屏滚动动画的代码。有兴趣的朋友们可以来下载试试
用html+js+css3实现整屏滚动fullpage功能
qq_61955502的博客
11-19 5081
实现fullpage效果
HTML案例：全屏切换滚动效果
欢迎来到长风沛雨的博客
07-09 1979
全屏滚动
如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？
官方推荐
08-22 7138
如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？
全屏页面滚动、默认三屏，通过鼠标滚轮切换
weixin_46325225的博客
06-30 302
【代码】全屏页面滚动、默认三屏，通过鼠标滚轮切换。
基于jquery实现全屏滚动效果
10-23
全屏滚动效果是一种常见的网页设计手法，常用于创建引人入胜的用户体验，尤其是在官方网站、产品展示或个人主页中。这种效果使得用户可以平滑地浏览多层内容，每一页内容占据整个屏幕，给人一种沉浸式的视觉体验。在...
jQuery插件fullPage.js实现全屏滚动效果
10-20
全屏滚动效果是现代网页设计中常见的一种视觉呈现方式，它使得用户在浏览页面时可以垂直或水平地平滑过渡到下一个“屏幕”。jQuery 插件 fullPage.js 正是用于实现这种效果的工具，它允许开发者轻松创建具有吸引力的...
vue实现全屏滚动效果（非fullpage.js）
10-15
在 Vue 中实现全屏滚动效果，意味着创建一个滚动容器，使得每个页面元素（section）都占据整个屏幕，并且在用户滚动时平滑过渡到下一个页面。本篇文章将详细介绍如何在不依赖 fullpage.js 库的情况下，使用 Vue 实现...
js全屏滚动效果
04-24
全屏滚动效果，也称为全屏滚动动画或者Parallax Scrolling，在网页设计中是一种流行的视觉效果，它使得用户在浏览网站时，页面内容能够按照不同的速度分层滚动，从而创造出深度感和动态交互性。这种效果常用于创建...
Full Screen Scroll TableView(iPhone源代码)
03-17
来源：Licence：Unspecified平台：iOS设备：iPhone / iPad作者：Yasuhiro Inami     当滚动列表时，列表变成全屏。有点类似于Pinterest的scroll-to-full Screen效果。    Code4App编译测试，适用环境：Xcode 4.3, iOS 5.0。
html5全屏滚动实例 完美实现全屏滚动带动画
01-18
html5全屏滚动实例 完美实现全屏滚动带动画 包括横屏的滚动 各种实例
HTML5单页面全屏滚动特效
12-15
插件描述：全屏滚动代码简单，非常适合新手。 参考示例：http://www.jq22.com/jquery-info4270
html css满屏滚动效果 scroll-snap-type
young_sam的博客
04-20 630
效果图 代码 <div class="parent"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <style> body { margin: 0; padding: 0; } .parent { width: 100vw;
HTML+CSS+JQuery全屏滚动特效完整源码附注释
qq_37344688的博客
01-19 1400
HTML+CSS+JQuery全屏滚动特效源码附注释
全屏滚动/整屏滚动
m0_66970189的博客
05-14 2342
好久没更新了，今天做个简单的案例：全屏滚动。 效果是这样的：鼠标滚轮滚一次，页面就能走一整屏。 思路： 全屏滚动和点击切换的轮播图很相似，我们可以把全屏滚动想象成竖向的轮播图。只不过轮播图点击的按钮变成了鼠标滚轮的上划或者下划，根据鼠标滚轮的操作，进行向下移动一整屏或者向上移动一整屏。我们同样需要一个大盒子装下我们的几个模块，还需要一个包着大盒子的框子，接下来我们就开始操作吧！ 主页 html代码 <ul id="nav"> <li><a href="./全
fullpage+animeta实现官网全屏定位滚动+动画交互
weixin_50316900的博客
04-28 727
fullpage.js下载 fullpage.js下载地址pullpage.js 解压文件找到dist目录下 复制到项目中 animeta下载 animeta.css 开源社区下载地址 animeta.css 官网下载地址 本地引入所需js和css后 代码结构 <div id="fullpage"> <div class="section" active>屏一</div> <div class="s
html5——全屏滚动
weixin_30550271的博客
12-22 566
鼠标滚轮 window.onmousewheel=function(){}; 基本描述 1、我们使用插件fullpage，为了更好的兼容性 2、动画效果是在滚动到这一屏时触发的，此时给当前屏幕加current类，其他的移除current类 3、动画的效果的过渡状态是必须在移除current类的时候移除，在添加current类的时候添加 <!DOCTYPE html&g...
页面全屏无限滚动切换图片
DevilAngelia的博客
11-13 152
页面全屏无限滚动切换图片，监听鼠标滚轮事件，监听过度动画结束事件，通过滚轮事件确定的滚动方向，在动画结束后执行对应的事件生成新元素
vue3实现全屏滚动效果
最新发布
04-03
Vue 3是一种流行的JavaScript框架，用于构建用户界面。要实现全屏滚动效果，可以使用Vue 3结合一些插件或库来实现。以下是一种常见的实现方式： 1. 安装Vue 3：首先，确保你已经安装了Vue 3。你可以通过npm或yarn来安装Vue 3。 2. 使用Vue Router：Vue Router是Vue官方提供的路由管理器。你可以使用Vue Router来实现页面之间的切换和导航。安装并配置Vue Router。 3. 使用fullPage.js插件：fullPage.js是一个流行的全屏滚动插件，它可以帮助你实现全屏滚动效果。你可以通过npm或yarn来安装fullPage.js。 4. 创建全屏滚动组件：在Vue 3中，你可以创建一个全屏滚动组件，该组件包含多个子组件，每个子组件代表一个滚动页面。在该组件中，你可以使用fullPage.js提供的API来初始化和配置全屏滚动效果。 5. 使用动画库：如果你想要在滚动页面之间添加过渡效果或动画效果，你可以使用一些动画库，如Animate.css或Vue Transition。 6. 配置路由和导航：使用Vue Router来配置路由和导航，以便用户可以通过导航链接或滚动页面来切换到不同的页面。 这只是一种实现全屏滚动效果的方式，你还可以尝试其他插件或库来实现类似的效果。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值