Permalink
Switch branches/tags
Find file
Fetching contributors…
Cannot retrieve contributors at this time
122 lines (117 sloc) 3.34 KB
<!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 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;
}
div#btns {
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
div#btns a {
text-decoration: none;
color: #333;
}
div#btns a.active {
font-weight: bold;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var toggleStatus = 'small'
setSmall()
$.plax.enable()
$("#range-small").click(function(){
if(toggleStatus != 'small'){
toggleRange()
}
})
$("#range-big").click(function(){
if(toggleStatus != 'big'){
toggleRange()
}
})
function toggleRange() {
if(toggleStatus == 'small'){
setBig()
} else if (toggleStatus == 'big') {
setSmall()
} else {
console.log(toggleStatus)
}
$("#range-big").toggleClass('active')
$("#range-small").toggleClass('active')
return false
}
function setSmall(){
$('#plax-sphere-1').plaxify({"xRange":40,"yRange":40})
$('#plax-logo').plaxify({"xRange":20,"yRange":20})
$('#plax-sphere-2').plaxify({"xRange":10,"yRange":10})
$('#plax-sphere-3').plaxify({"xRange":40,"yRange":40,"invert":true})
toggleStatus = 'small'
}
function setBig(){
$('#plax-sphere-1').plaxify({"xRange":200,"yRange":200})
$('#plax-logo').plaxify({"xRange":80,"yRange":80})
$('#plax-sphere-2').plaxify({"xRange":50,"yRange":50})
$('#plax-sphere-3').plaxify({"xRange":200,"yRange":200,"invert":true})
toggleStatus = 'big'
}
})
</script>
</head>
<body>
<div id="shell">
<img src="img/plax_logo.png" width="136" height="70" id="plax-logo"/>
<img src="img/plax_sphere_small.png" width="93" height="92" id="plax-sphere-1"/>
<img src="img/plax_sphere_large.png" width="215" height="215" id="plax-sphere-2"/>
<img src="img/plax_sphere_small.png" width="93" height="92" id="plax-sphere-3"/>
</div>
<div id="btns">
<a href="#" id="range-small" class="active">small range</a> | <a href="#" id="range-big">big range</a>
</div>
</body>
</html>