Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
69 lines (66 sloc) 1.861 kB
<!DOCTYPE html>
<html>
<head>
<title>Plax Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/plax.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background: #ebeae6 url(img/body_bg.png) top left repeat;
position: relative;
}
div#shell {
display: block;
position: relative;
margin: 100px auto;
width: 318px;
height: 318px;
}
div#shell{
z-index: 1;
}
img#plax-logo {
position: absolute;
top: 125px;
left: 90px;
z-index: 3;
}
img#plax-sphere-1 {
position: absolute;
z-index: 4;
top: 189px;
left: 191px;
}
img#plax-sphere-2 {
position: absolute;
z-index: 2;
top: 49px;
left: 53px;
}
img#plax-sphere-3 {
position: absolute;
top: 35px;
left: 32px;
z-index: 1;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#shell img').plaxify()
$.plax.enable()
})
</script>
</head>
<body>
<div id="shell">
<img src="img/plax_logo.png" width="136" height="70" data-xrange="20" data-yrange="20" id="plax-logo"/>
<img src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" id="plax-sphere-1"/>
<img src="img/plax_sphere_large.png" width="215" height="215" data-xrange="10" data-yrange="10" id="plax-sphere-2"/>
<img src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" data-invert="true" id="plax-sphere-3"/>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.