视觉差

视差滚动效果解析
最新推荐文章于 2025-09-09 08:37:13 发布
转载 最新推荐文章于 2025-09-09 08:37:13 发布 · 73 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/webskill/p/4544540.html
文章标签：

#javascript #ViewUI

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.miaov.com/student/lyq/style.css"/>
</head>
<body>
<div id="nav">
    <a id="logo" href="index.html"></a>
    <ul id="menu">
        <li id="bg" >
            <ul id="ul-list">
                <li ><a href="index.html">Home</a></li>
                <li ><a href="javascript:;" target="_self" >About</a></li>
                <li><a href="javascript:;"  target="_self">News</a></li>
                <li ><a href="javascript:;" target="_self">wroks</a></li>
                <li ><a href="javascript:;"  target="_self">Photo</a></li>
                <li ><a href="javascript:;"  target="_self">hof</a></li>
                <li ><a href="javascript:;"  target="_self">contact</a></li>
            </ul>
        </li>

        <li class="box" ><a href="index.html" >Home</a></li>
        <li class="box" ><a href="javascript:;" target="_self">About</a></li>
        <li class="box" ><a href="javascript:;" target="_self">News</a></li>
        <li class="box" ><a href="javascript:;" target="_self">wroks</a></li>
        <li class="box" ><a href="javascript:;" target="_self">Photo</a></li>
        <li class="box" ><a href="javascript:;" target="_self">hof</a></li>
        <li class="box" ><a href="javascript:;" target="_self">contact</a></li>

    </ul>

</div>

<div id="max-box">
    <div id="home"  style=" background-position:50% 0px">
        <div class="handImg" style=" background-position:50% 0px"></div>
        <div class="textImg" style=" background-position:50% 0px"></div>
        <div class="penImg"></div>
    </div>
    <!--首页-->
    <div id="about" style="background-position:50% 20px">
        <div class="contents">
            <div class="aboutRound">
                <div class="columnSpace">
                    <div class="border">
                        <div class="borderRight">
                            <div class="top"></div>
                        </div>
                        <div class="bordermind">
                            <div class="borderContens">
                                <div class="show">
                                    <div class="comptitle_05 ">
                                        <em>
                                                    <span class="extendLink">
                                                        <a href="index.html#home" target="_self">更多详细+</a>
                                                    </span>

                                        </em>
                                    </div>
                                    <div class="dit">
                                        <div class="aboutText">
                                            李艳秋
                                            </br>

                                            女|26岁|1988年8月26日
                                            </br>

                                            </br>

                                            </br>
                                            对研究Html5+CSS3+JavaScript有浓厚兴趣。
                                            </br>
                                            精通Html+CSS|熟练JavaScript
                                            </br>
                                            熟练浏览器兼容性调试、了解简单的html5和css3
                                            </br>
                                            .......
                                        </div>
                                    </div>
                                </div>
                                <div class="clearBoth"></div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
        <div class="balloon" style="background-position:50% 0"></div>
        <div class="compasses" style="background-position:50% -50px"></div>
    </div>
    <div id="about-cont" style="background-position:50% 4px">
        <div class="contents">
            <div class="aboutRound">
                <iframe allowtransparency="true" frameborder="0" height="500" marginheight="0" 		marginwidth="0" scrolling="no"  width="600">#document</iframe>
                <a class="close_btu" href="#about">关闭 ×</a>
            </div>
        </div>
        <div class="balloon" style="background-position:50% 0"></div>
        <div class="compasses" style="background-position:50% -19px"></div>
        <div class="compasses1" style="background-position:50% -4px"></div>
    </div>
    <div id="new" style="background-position:50% 0">
        <div class="contents">
            <div id="left-news">
                <iframe allowtransparency="true" frameborder="0" height="650" marginheight="0" marginwidth="0" scrolling="no" src="new.html" width="800">#docuemnt</iframe>

            </div>

        </div>
    </div>
    <div id="Project" style=" background-position:50% 23px">
        <div class="pro_img">
            <iframe allowtransparency="true" frameborder="0" height="700" marginheight="0" marginwidth="0" scrolling="no" src="Project.html" width="720">
                #document
            </iframe>
        </div>
        <div class="bulb1" style=" background-position:60% 0px"></div>
        <div class="bulbl2" style=" background-position:60% -26px"></div>
    </div>
    <div id="sector" style=" background-position:50% -17px">
        <div class="contents">
            <div class="sector_img">
                <iframe allowtransparency="true" frameborder="0" height="680" marginheight="0" marginwidth="0" scrolling="no"  src="sector.html" width="600"></iframe>
            </div>

        </div>
        <div class="pop" style="background-position:50% 84px;"></div>
        <div class="clock" style=" background-position:50% 0"></div>


    </div>
    <div id="tree">
        <div  class="contents">
            <iframe allowtransparency="true" frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" src="tree.html" width="500"></iframe>
        </div>
        <div class="Horse" style=" background-position:50% 0"></div>

    </div>

</body>
</html>

　视差原理就是背景图 fix

 

转载于:https://www.cnblogs.com/webskill/p/4544540.html

WPF实现鼠标悬停视觉差特效
dnazhd的博客
07-15 1160
实现效果如下：
html5 6种视觉差网页效果
07-11
视觉差，或称为视差，是指当观察者的眼睛移动或物体相对于观察者的位置变化时，同一物体的不同视角下呈现出的相对位置差异。在网页设计中，通过调整背景和前景元素的运动速度，可以创造出一种3D空间感，使用户仿佛...
CSS3实现滚动视觉差效果指南
weixin_28746213的博客
07-20 1006
滚动视觉差技术（Parallax Scrolling）是一种在网页设计中使用的技术，它通过在用户滚动页面时，以不同速度移动页面背景和前景元素，创造一种深度感和动态效果，增强用户的视觉体验。此技术在提高用户参与度和页面互动性方面表现出色，常用于引导访问者浏览网站的特定内容或传达某种主题氛围。在实现滚动视觉差时，主要依赖于HTML、CSS和JavaScript的相互协作。
滚动视觉差
望京十三兄的博客
07-26 1652
什么是滚动视觉差呢？     视差滚动是从英文（Parallax Scroller）翻译过来，是近年来比较流行的一些网页设计应用，它是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果，非常有感觉。 应用实例   http://www.putzengel.at/ http://wootten.com.au/process/ 线上demo ：https://codyhou...
视觉差效果浅析
玉案轩窗的博客
08-02 2968
前言 视觉差效果是一种比较炫酷的网站效果，最近在GitHub上闲逛的时候，看到视觉差效果相关的插件，就想看看是怎样的实现原理，本文仅仅是实现两种类似视觉差效果，对其实现原理介绍下。 具体实现 首先看看视觉差效果是什么效果，效果如下： 都设置了256fps，上图中的效果好像不明显，你可以点击这个链接，实际去体验下。 实际上视觉差效果有两种体现： 动与静的对比 都动，但速率不同有速度...
视觉差网站（一）
html标签-meta
09-10 2453
一.前言   看了好多视觉差的网站，觉得都不错，总结了一下   大致有两类： 一类是鼠标移动-元素随鼠标移动； 另一类是鼠标移动向下滑制造页面背景视觉差； 二. 鼠标移动视觉差     就是鼠标移动，使元素（img/svg）也移动（按比例）; demo1:https://codepen.io/jeft-hai/pen/eLeqqL;                          ...
html活动页视觉差效果,js带视觉差的页面平滑滚动特效
weixin_36123285的博客
06-03 590
这是js带视觉差的页面平滑滚动特效。该特效中，在页面向下滚动的时候，页面中的图片相对于视口带有一些视觉差特效。使用方法在页面中引入下面的文件。HTML结构Smooth scrolling and inner image animationCentral viewGreat turbulent clouds emerged into consciousness citizens.Lost in ti...
HTML视觉差—web篇
m0_62293565的博客
03-31 743
1.视觉差效果图： 解释：（能理解就不用看） 就是现在有两张图片，你给它放上网页中，然后给它们分别设置属性让（每张）能够覆盖整个屏幕，所以两张图片就占两个屏幕的大小，也就是需要滑动鼠标你才能看到第二张图片 现在我们想要让页面出现上图的效果：滑动的过程中上面图片由下到上逐渐被下面图片覆盖（可能说明不太清楚，动手实践下可能会清楚些） 2.正常情况下页面默认设置时background-attacthment默认属性是：scroll 想要出现视觉差，需要用到background-attac...
html视觉差效果实现案例
qq_47548037的博客
04-03 493
html视觉差案例学习
CSS3实现背景图片视觉差效果
lijianfengxiaoli的博客
08-22 3609
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; section { height: 100vh; }
3d视觉效果html,jQuery炫酷网页3D背景视觉差特效
weixin_34637293的博客
06-03 522
这是一款效果非常炫酷的jQuery 3D网页背景视觉差特效插件。该视觉差特效可以制作为全屏背景视觉差效果，也可以在一个容器中制作背景视觉差效果。当用户移动鼠标时，由于背景图片的移动速度不同，形成了3D视觉差效果。使用方法使用这个3D背景视觉差特效插件要引入jQuery和jquery.simple3D.js文件。HTML结构使用一个作为容器，里面可以嵌套多个。每个都用于放置你需要作为背景视觉差效果的...
vue+Parallax.js | 视觉差特效
01-07
在本项目中，Vue.js 被用来创建一个结合了Parallax.js的视觉差效果，以实现一种独特的用户体验，即当用户滚动页面时，背景图片会以不同的速度移动，产生深度感和动态效果。 Parallax.js 是一个专门用于创建视差滚动...
js带视觉差的页面平滑滚动特效
12-11
**JavaScript 视觉差平滑滚动特效** 在网页设计中，视觉差效果是一种常见的增强用户体验的技巧，它通过创建一种错觉，使页面元素在滚动时以不同的速度移动，从而营造出深度感和动态效果。这种特效在现代网页设计中...
页面缩放和视觉差滚动效果.zip
06-29
视觉差滚动，又称为Parallax Scrolling，是一种使背景元素以不同的速度相对于前景元素移动的技巧，创造出立体感和深度感。这种效果通常是通过JavaScript或者专门的插件如jQuery Parallax来实现。在HTML结构中，不同...
PC端横向滚动视觉差效果
03-26
在网页设计领域，视觉差效果是一种独特而引人入胜的技术，它利用图像或元素的移动速度差异，为用户创造深度感和动态交互体验。在本案例中，我们关注的是"PC端横向滚动视觉差效果"，这是一种在个人电脑平台上通过鼠标...
java小项目 未来出行汽车租赁平台
xiaoyoukaoer的博客
09-06 328
未来出行汽车租赁平台是基于Java开发的汽车租赁管理系统，旨在为用户提供便捷的车辆租赁服务。系统包含用户管理、车辆管理、订单管理等功能模块，适用于小型企业或个人学习使用。
vue2(7)-单页应用程序&路由
Naiveyouzhi的博客
09-07 273
快速引入组件，也可以用绝对路径 基于@指代src目录，从src目录出发找组件。最大的原因是：页面按需更新 要按需更新，就要明确访问路径和组件的关系。类名太长可以在router，index.js里面配置。单页应用程序，之所以开发效率高，性能高，用户体验好。右边第三个框，是在main.js中导入的。5.声明式导航-导航链接。2.路由：路径和组件的映射关系。配组件 配规则，配导航 配出口。如 单页：网易云，多页：京东。6.声明式导航-两个链接。6.声明式导航-跳转传参。
从Java全栈开发到微服务架构的实战经验分享
最新发布
CatchLight的博客
09-09 774
应聘者：我认为最重要的是能够理解业务需求，并将其转化为技术方案。同时，持续学习新技术，保持对行业趋势的关注也很关键。毕竟，技术更新很快，只有不断学习才能跟上节奏。通过这次面试，我们可以看到一位资深Java全栈开发者的专业能力和实践经验。他不仅掌握了多种技术栈，还能在实际业务场景中灵活运用，解决实际问题。同时，他也展现了良好的沟通能力和学习能力，这些都是成为一名优秀工程师的关键素质。
大数据毕业设计选题推荐-基于大数据的贵州茅台股票数据分析系统-Spark-Hadoop-Bigdata
IT研究室的博客
09-07 1018
本文介绍了基于Hadoop+Spark的贵州茅台股票数据分析系统，采用Python/Java语言开发，集成Django/Spring Boot后端与Vue前端，实现多维金融数据分析。系统核心功能包括价格趋势分析、成交量跟踪、波动性评估及技术指标验证，通过Spark SQL和Pandas处理海量交易数据，支持日均价格走势、价量相关性、MACD/RSI指标等深度挖掘。界面展示包含Echarts动态可视化图表，代码示例演示了Spark计算日均均价、20日均线及价格区间统计逻辑。
探索jQuery插件：鼠标移动视觉差效果
鼠标移动视觉差是一种视觉效果，它通过使鼠标移动时页面上的元素产生视觉上的差异，从而吸引用户的注意力，增强用户与网站的互动体验。这种效果在用户体验设计中被广泛运用，能够创造出吸引人的视觉冲击力和深度感。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值