视觉差效果和吸顶式导航栏

最新推荐文章于 2024-12-07 09:40:22 发布
原创 最新推荐文章于 2024-12-07 09:40:22 发布 · 478 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

视觉差效果

1.需要引用js包

<script type="text/javascript " src="js/jquery.min.js "></script>
<script type="text/javascript " src="js/plugins.js "></script>

2.写html

<div class="three ">
		  <div class="container ">
          <blockquote class="text-center text-center_b ">
            It's not just about ideas. It's about making ideas happen
          </blockquote>
       </div>
       <div class="three_image " data-stellar-background-ratio="0.5 ">
       </div>
       </div>

3.引用CSS

.three {
	position: relative;
	float: left;
	width: 100%;
	height: 600px;
}

.text-center_b {
	border: 0;
	padding: 0;
	width: 100%;
	font-size: 60px;
	color: white;
	font-weight: bolder;
	font-family: "Merriweather", serif;
	font-style: italic;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	background-attachment: fixed;
	line-height: 1.5;
	text-align: center;
}

.three_image {
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	background-size: cover;
	z-index: -1;
	position: absolute;
	background-image: url(../img/quote_mission.jpg);
	background-attachment: fixed;
}

背景图片一定要设置position: absolute;和background-attachment: fixed;
html里面要加的一句：data-stellar-background-ratio="0.5 "
4.js函数调用

<script type="text/javascript ">
			$.stellar({
				horizontalScrolling: false,  //设置垂直滚动视差效果
				hideDistantElements: false
			});

			$(window).load(function() {

				setTimeout(function() {
					$.stellar('refresh');
				}, 1000);
			});
		</script>

吸顶式导航栏

1.写好一个导航栏
html部分代码

<!--header start-->
		<div class="one1">
			<h2>SYROS</h2>

			<ul class="one1_ul">
				<li>
					<a href="">HOME</a>
					<ul class="Home_ul">
						<li>
							<a href="">HOME Default</a>
						</li>
						<li>
							<a href="">HOME Onepage</a>
						</li>
						<li>
							<a href="">HOME Business</a>
						</li>
						<li>
							<a href="">HOME Agency</a>
						</li>
						<li>
							<a href="">HOME Landing</a>
						</li>
						<li>
							<a href="">HOME Shop</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">PAGES</a>
					<ul class="Home_ul">
						<li>
							<a href="">Services</a>
							<ul class="servies_ul">
								<li>
									<a href="">Services1</a>
								</li>
								<li>
									<a href="">Services2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">About Us</a>
							<ul class="servies_ul">
								<li>
									<a href="">About Us1</a>
								</li>
								<li>
									<a href="">About Us2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Contact</a>
							<ul class="servies_ul">
								<li>
									<a href="">Contact1</a>
								</li>
								<li>
									<a href="">Contact2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">404</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">PORTFOLLIO</a>
					<ul class="Home_ul">
						<li>
							<a href="">Classic</a>
							<ul class="servies_ul">
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Fullwidth</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Masonry</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">5 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">With Title</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Single Project</a>
							<ul class="servies_ul">
								<li>
									<a href="">Standard</a>
								</li>
								<li>
									<a href="">Extended</a>
								</li>

							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a href="">BLOG</a>
					<ul class="Home_ul">
						<li>
							<a href="">Standard</a>
						</li>
						<li>
							<a href="">Masonry</a>
						</li>
						<li>
							<a href="">Single Post</a>
						</li>
						<li>
							<a href="">No Sidebar</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">SHOP</a>
					<ul class="Home_ul">
						<li>
							<a href="">Catalog Grid</a>
						</li>
						<li>
							<a href="">Single Product</a>
						</li>
						<li>
							<a href="">Cart</a>
						</li>
						<li>
							<a href="">Checkout</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">FEATURES</a>
				</li>

			</ul>

			<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
			<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
			<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
			<hr />
		</div>
		<!--header end-->

css样式部分代码

.one1 {
	color: white;
	width: 100%;
	height: 120px;
	position: absolute;
	z-index: 1000;
}

.one1 h2 {
	float: left;
	margin-left: 50px;
	margin-top: 40px;
	font-size: 25px;
	color: white;
	font-weight: bolder;
}


/*第一层嵌套*/

.one1_ul {
	color: #989393;
	float: left;
	list-style-type: none;
	margin-left: 350px;
}

.one1_ul li {
	/*给字体加粗*/
	font-weight: 500;
	float: left;
	padding: 20px 10px 10px 10px;
	margin-top: 30px;
}
.one1_ul li a {
	text-decoration: none;
	color: white;
}
.one1_ul li a:hover {
	color: #e43417fc;
}

/*第二层嵌套*/

.Home_ul {
	position: absolute;
	display: none;
	margin-top: 60px;
}
.Home_ul li {
	margin: 0;
	width: 150px;
	float: none;
	list-style: none;
	color: #b7adad;
	background-color: white;
}
.Home_ul li a {
	color: #999999;
}
.one1_ul li:hover .Home_ul {
	display: block;
}

/**
 * 第三层嵌套
 */
.servies_ul {
	position: absolute;
	display: none;
}
.servies_ul li {
	width: 150px;
	margin-left: 55px;
	margin-top: -15px;
}
.Home_ul li:hover .servies_ul {
	display: block;
}
.glyphicon-lock {
	width: 80px;
	height: 80px;
	font-size: 20px;
	text-align: center;
	margin-left: 250px;
	margin-right: auto;
	margin-top: 50px;
}
.glyphicon-search {
	width: 80px;
	height: 80px;
	font-size: 20px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.glyphicon-align-justify {
	width: 80px;
	height: 80px;
	font-size: 20px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

2.设置当鼠标滑到多少时显示的吸顶导航栏的样式

.sticky {
	position: fixed;
	background: #FFFFFF;
	box-shadow: 0 0 10px 1px #000000;
	visibility: hidden;
	color: #000000;
}
.sticky h2{
	color: #000000;
}
.sticky .one1_ul li a {
	color: #000000;
	/*垂直居中*/
	height: 36px;
	line-height: 36px;
	vertical-align: middle;
	font-size: 16px;
}

.offset{
    /*柔和过渡*/
	transform: translate(0,-100%); 
    transition: all 0.5s ease-in-out;
}

.scrolling{
			visibility: visible;
			transform: translate(0,0);
}

3.用jQuery获取鼠标滑到多少时会显示导航栏，往上滑滑到多少时吸顶导航栏就会消失

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(window).scroll(function() {
				
				if($(window).scrollTop() > 190) {
					$('.one1').addClass("sticky");
				} else {
					$('.one1').removeClass("sticky");
				}
			
				if($(window).scrollTop() > 200) {
					$('.one1').addClass("offset");
				} else {
					$('.one1').removeClass("offset");
				}
			
				if($(window).scrollTop() > 500) {
					$('.one1').addClass("scrolling");
				} else {
					$('.one1').removeClass("scrolling");
				}
			
			});
		</script>

效果图：在这里插入图片描述

吸顶导航栏弹出来的效果要使它柔和的弹出需要设置

transform: translate(0,-100%); 
transition: all 0.5s ease-in-out;
vue吸顶导航
qq_42312396的博客
03-27 2005
自己边查资料边做，不过最后用的还是原生dom的方法，其实用$refs就可以了，但是反正滚动监听还是用的原生，所以也没关系了。 html导航 <div class="contain"> <div class="nav-bar-wrap"> <ul class="banner"> <li v-for="value in banner_list" :key="value" @
vue 导航栏 吸顶
huxue12的博客
07-26 828
vue 导航栏 吸顶需求场景：完整代码： 需求场景： 公司需求：某个h5页面上有个导航栏需要在滚动到顶部时，吸顶固定在顶部；向下滚动时取消吸顶。 完整代码： 1.html模块，navBarFixed变量控制吸顶样式 // 导航栏模块 <div class="nav" :class="{'fixNav':navBarFixed}"> </div> <script> export default { data() { return { na
滑动滚动吸顶式导航栏
10-10
随着鼠标滚动，导航栏逐渐被遮住，当继续滚动鼠标时，导航栏出现并一直吸顶。再次鼠标上划时，导航栏又恢复原样。
导航栏吸顶
weixin_43896151的博客
04-14 289
很多时候我们想让导航栏超出窗口的位置后边固定在最上方不再移动，方便用户操作。 html代码如下 <div id="nav"> <ul> <!--选项卡--> <li><a href="#x">首页</a></li> <li><a href="#"&gt...
实现导航栏吸顶操作
ZhouXin_0819的博客
01-09 1150
实现导航栏吸顶操作
创新滚动吸顶导航栏：随鼠标动态显示隐藏
标题中提到的“滑动滚动吸顶式导航栏”是一种交互式Web设计元素，它通过动态地跟随页面滚动来提升用户体验。具体来说，当用户在浏览网页时，随着页面内容向下滚动，原本位于页面顶部的导航栏会逐渐被新滚动上来的...
吸顶导航栏的实现与应用
3. **响应式设计：** 吸顶导航栏应该支持响应式设计原则，以适应不同屏幕尺寸和分辨率。这包括能够适应不同的窗口大小以及在不同设备上依然提供良好的用户体验。 4. **交互效果：** 为了提升用户体验，吸顶导航栏...
仿聚划算首页固定头部导航栏滑动效果实现
描述中强调“第一个不滑出，永远在第一的位置”，结合标签中的“导航栏、滑动效果、固定定位、前端开发、HTML、CSS、JavaScript、页面交互、滚动效果、响应式设计”等关键词，可以深入挖掘出一系列与该功能实现相关...
导航栏滚动到顶部后固定
07-16
1. 占用空间：固定导航栏始终占用屏幕顶部的空间，可能会影响页面的可读性和视觉效果。 2. 移动端适配：在小屏幕设备上，固定导航栏可能导致页面内容显示不全，需要考虑响应式布局。 六、实际应用与扩展 在实际项目...
jQuery实现仿网易新闻头部导航栏效果
更重要的是，利用CSS的定位机制（position: fixed）实现导航栏的“吸顶”效果，使其脱离文档流并固定于视口顶部。此外，通过:hover伪类可以实现简单的交互反馈，比如文字变色或底边高亮动画。但对于更复杂的动态行为...
VUE 实现滚动监听 导航栏置顶的方法
10-18
今天小编就为大家分享一篇VUE 实现滚动监听 导航栏置顶的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+Parallax.js | 视觉差特效
01-07
vue+Parallax.js | 视觉差特效，图片与鼠标相反移动。
vue-rellax:Vue插件，通过rellax.js添加了视差效果指令
05-13
维雷拉克斯 Vue插件，它添加了视差效果指令。 入门 安装 npm i vue-rellax -S 或者 yarn add vue-rellax 浏览器支持 由于此插件使用WeakMap，因此旧的浏览器需要加载pollyfill。 < script crossorigin =" anonymous " src =" https://polyfill.io/v3/polyfill.min.js?features=WeakMap " > </ script > 用法 import Vue from 'vue' import VueRellax from 'vue-rellax' Vue . use ( VueRellax ) const vm = new Vue ( { el : '#app' , template : ` <div v-rellax="{ //
react-parallax:一个用于视差效果的React组件
04-28
React视差 安装 yarn add react-parallax 贡献 如果您发现任何错误或对该库有疑问和/或想法，请随时提出问题或提出请求。 无论哪种方式，请创建一个有效的示例，以便我可以重现它。 链接到存储库甚至更简单-分支演示代码和框项目。 这会很有帮助。 该项目在晚上和周末维护。 如果您喜欢，请考虑给我买咖啡;-) ...或以其他方式捐助。 用法示例 基本-具有固定模糊效果的背景图像 import { Parallax } from 'react-parallax' ; const Container = ( ) => ( < Parallax xss=removed xss=removed xss=removed xss=removed> Content goes here
vueparallax快速60fps视差滚动效果组件
08-08
vue-parallax 快速60fps视差滚动效果组件
带有视觉滚动差的菜单侧滑栏
小Kongdy的博客
01-08 309
前文 之前看到酷狗app的侧滑栏比较有有意思，带有视觉滚动差还有缩放效果，自己就尝试的实现了一个。 这个组件其实可以使用HorScrollView实现，但是使用HorScrollView终归还是要重写触摸事件的，并且HorScrollView对这个控件没有任何帮助，不如使用更轻量级的ViewGroup来实现。 我们先来看看效果 如何实现视觉滚动差效果 我的实现方法比较笨，在l
简单的导航栏吸顶效果
weixin_43430298的博客
08-23 563
1.在Html中，设置吸顶的判断条件topActive及class类名headTop <div class="heard-box" :class="topActive?`headTop`:``" > 2.写好headTop的样式及效果，这里加了一个小小的动画效果 .headTop{ position: fixed; top: 0; z-index: 9999; box-shadow: 0 pxTorem(2px) pxTorem(7px) 0 rgba(0,0,0,.2);
jQuery实现网站导航栏吸顶功能（固定顶部栏）的方法
最新发布
分享干货，拒绝水文
12-07 430
jQuery实现网站导航栏吸顶功能（固定顶部栏）的方法，当我们浏览网站时，我们一滚动网站主体，网站顶部导航栏就会因滚动而无法再看到，更不能点击。
吸顶式导航与视觉差效果
qq_38844322的博客
10-11 900
吸顶式导航效果 什么是吸顶式导航效果 首先要创建个吸顶导航栏，这个吸顶导航栏的初始位置一般是靠近在页面的顶部位置，当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部，就实现吸顶式导航效果。 具体代码如下： body代码： &lt;div class="one1"&gt; &lt;h2&gt;SYROS&lt;/h2&gt; &lt;ul class="one1_...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值