atvimg
Version:
Simple Apple TV parallax effect.
44 lines (39 loc) • 1.18 kB
HTML
<html>
<head>
<title>atvImg Demo</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href="demo.css">
<link rel="stylesheet" type="text/css" href="../atvImg.css">
</head>
<body>
<div id="app">
<div class="titles">
<span>A single `img` element</span>
<span>`img` with multiple layers</span>
</div>
<div class="imgs">
<img id="atvImg1"
src="https://raw.githubusercontent.com/BrianCS/atvImg/addDemo/demo/images/kloc-icon-flattened.jpg">
<img id="atvImg2"
src="https://raw.githubusercontent.com/BrianCS/atvImg/addDemo/demo/images/kloc-icon-flattened.jpg">
</div>
</div>
<script src="http://zeptojs.com/zepto.min.js"></script>
<script src="../atvImg.js"></script>
<script>
// Use it as a jQuery / Zepto plugin
$('#atvImg1').atvImg()
$('#atvImg2').atvImg(
{
layers: [
'http://kloc.pm/images/back.png',
'http://kloc.pm/images/front.png'
],
// scale: 1.5,
// zIndex: 99
}
)
</script>
</body>
</html>