зеркало из https://github.com/github/plax.git
73 строки
2.0 KiB
HTML
73 строки
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Plax Example</title>
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<!-- <script src="http://s3.amazonaws.com/ender-js/jeesh.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.outline{
|
|
border: 1px solid #cccbc8;
|
|
}
|
|
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({ "activityTarget": $('#shell')})
|
|
})
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="shell" class="outline">
|
|
<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>
|