index.html
<!DOCTYPE html>
<html>
<head>
<!-- Article: http://www.paulrhayes.com/2009-04/auto-scrolling-parallax-effect-without-javascript/ -->
<!-- Demo: http://www.paulrhayes.com/experiments/parallax/ -->
<!-- Originally posted: 1st April 2009 -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Parallax effect built with CSS transitions — Paul Hayes</title>
<meta name="author" content="Paul Hayes" />
<link rel="stylesheet" href="../experiment-styles.css" />
<link rel="stylesheet" href="css/experiment.css" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="experiment">
<div id="wrapper">
<p id="learn">
This is a demo, <a href="http://www.paulrhayes.com/2009-04/auto-scrolling-parallax-effect-without-javascript/">learn how it works</a>.
</p>
<div id="experiment">
<div id="background"></div>
<div id="content">
<h2>Mouse over to begin animation</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>
/*
Parallax Experiment
Date: 2nd April 2009
Author: Paul Hayes
*/
#background {
background: url('../images/foreground.png') 5% 5%, url('../images/midground.png') 50% 50%, url('../images/background.png') 90% 110%;
top: 90px;
left: 0;
right: 0;
bottom: 0;
position: fixed;
-webkit-transition: left 300s linear;
-moz-transition: left 300s linear;
-o-transition: left 300s linear;
-ms-transition: left 300s linear;
transition: left 300s linear;
}
#experiment:target #background {
left: -5000px;
}
#experiment:hover #background {
left: -9999px;
}
#content {
margin: 3em 10em;
background-color: #333;
opacity: 0.95;
color: #ccc;
padding: 3em;
position: fixed;
border: 2px solid #666;
}
#content h2 {
margin: 1em 0;
font-weight: bold;
font-size: 26px;
}
图片:
xia
分享到:
相关推荐
常用的几种js实现悬浮框代码。右下角悬浮广告,左侧悬浮广告等等。
兼容ie,firfox,chrome的页面广告随机飘动效果.效果非常好。
js实现悬浮菜单
js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容
天猫商城关闭了悬浮模块,利用固定背景可以做类似悬浮的效果。
JS手机底漂、底部悬浮广告代码 JS手机底漂、底部悬浮广告代码 JS手机底漂、底部悬浮广告代码 JS手机底漂、底部悬浮广告代码
JavaScript应用实例-Autojs悬浮按钮(全版本可用).js
浏览网页时,滚动鼠标拉动网页后,导航不消失,悬浮于浏览器上。用户体验很好,实用性很强,很多知名网站在使用,前端学习者必会的技能。
js悬浮QQ在线客服代码(支持拖动)
随鼠标移动div位置保持在屏幕指定位置
点击按钮弹出一个悬浮层,出现在中间位置。
js右侧悬浮在线客服代码.zip
亲测可用 e4a 易安卓 BG悬浮窗类库 类库 易安卓悬浮窗类库 e4a悬浮窗
javascript网页悬浮广告例子
纯js实现可爱的鼠标悬浮提示,代码体积小,方便调用。 支持html文本。
js写的很特别的一款网页右侧悬浮QQ在线客服代码,带有五屏广告幻灯片功能,支持自动收缩隐藏客服面板,兼容IE78910及主流浏览器.rar
仿苹果 手机端悬浮按钮 js悬浮球. 可以任意拖拽最终黏贴到屏幕最左边或者最右边 有啥问题可以留言.
基于QT实现的悬浮窗体,采用该QML实现的
Vue.js鼠标悬浮切换图片
拉丝质感黑色背景,纯白图表悬浮设计,适合商务工作总结、工作汇报的经典黑色商务ppt模板。