背景图视觉差效果

最新推荐文章于 2021-06-17 10:50:09 发布

3052world

最新推荐文章于 2021-06-17 10:50:09 发布

阅读量1k

点赞数 1

分类专栏：学习笔记文章标签： HTML5 CSS3

本文链接：https://blog.csdn.net/jasper_success/article/details/82997814

版权

学习笔记专栏收录该内容

107 篇文章 1 订阅

订阅专栏

打造一个有视觉差体验的固定背景图效果

需要用到的知识点：

背景图固定background-attachment: fixed;
一个JS插件
jquery

示例代码和效果可前往下载：
视觉差背景图效果的示例代码，下载可直接运行

没有资源分，可看下面代码（拷贝下来不能直接用，因为你没有必须的js）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>背景图视觉差效果</title>
		<style type="text/css">
			html,
			body {
				padding: 0px;
				margin: 0px;
			}
			
			.main {
				width: 100%;
				height: auto;
			}
			
			.description {
				width: 100%;
				text-align: center;
			}
			.bg0 {
				width: 100%;
				height: 500px;
				background: url(img/about_us_title_bg.jpg);
				background-size: cover;
			}
			.bg1 {
				width: 100%;
				height: 500px;
				background: url(img/about_us_title_bg.jpg);
				background-attachment: fixed;
				background-size: cover;
			}
			
			.bgh1 {
				color: #FFFFFF;
				padding: 150px 50px;
				font-size: 3em;
				margin: 0px;
			}
			
			.section-wrap {
				position: relative;
				width: 100%;
				height: 500px;
			}
			
			.parallax {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				width: 100%;
				/*height: 100%;*/
				background: url(img/about_us_title_bg.jpg);
				background-size: cover;
				background-attachment: fixed;
				/*background-position: 50% 0;*/
				z-index: -1;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="bg0">
				<h1 class="bgh1">We possess within us two minds. So far I have written only of the conscious mind. I would now like to introduce you to your second mind.</h1>
			</div>
			<div class="description">
				<h1>慢慢滑动</h1>
				<h1>慢慢滑动</h1>
				<h1>慢慢滑动</h1>
				<h1>慢慢滑动</h1>
				<h1>慢慢滑动</h1>
				<h1>慢慢滑动</h1>
				<h1>慢慢滑动</h1>
				<h1>慢慢滑动</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
			</div>
			<div class="bg1">
				<h1 class="bgh1">We possess within us two minds. So far I have written only of the conscious mind. I would now like to introduce you to your second mind.</h1>
			</div>
			<div class="description">
				<h1>再慢慢滑</h1>
				<h1>再慢慢滑</h1>
				<h1>再慢慢滑</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
				<h1>注意观察背景图，图有没有在动？</h1>
			</div>

			<section class="section-wrap">
				<div class="container">
					<h1 class="bgh1"> It's not just about ideas.It's about making ideas happen</h1>
				</div>
				<!--把这里的0.3改成0.5/0.8/1试一下效果-->
				<div class="parallax" data-stellar-background-ratio="0.3"></div>
			</section>
			<div class="description">
				<h1>上下反复滚动几次</h1>
				<h1>上下反复滚动几次</h1>
				<h1>上下反复滚动几次</h1>
				<h1>上下反复滚动几次</h1>
				<h1>看出奥妙了吗</h1>
				<h1>看出奥妙了吗</h1>
				<h1>看出奥妙了吗</h1>
				<h1>看出奥妙了吗</h1>
			</div>
		</div>
		<!-- jQuery Scripts -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/plugins.js"></script>
		<script type="text/javascript">
			/* Parallax------------------------------------*/
			$.stellar({
				horizontalScrolling: false,
				hideDistantElements: false
			});

			$(window).load(function() {

				setTimeout(function() {
					$.stellar('refresh');
				}, 1000);

			});
		</script>
	</body>

</html>