atvimg
Version:
Simple Apple TV parallax effect.
51 lines (45 loc) • 1.39 kB
HTML
<html>
<head>
<title>atvImg Demo with Vue.js</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
v-atv-img="img" :src="img.src" v-for="img in imgs"
style="width: 300px; margin-right: 10px">
</div>
</div>
<script src="http://vuejs.org/js/vue.js"></script>
<script src="http://zeptojs.com/zepto.min.js"></script>
<script src="../atvImg.js"></script>
<script>
Vue.directive('atv-img', function (value) {
$(this.el).atvImg(value)
})
var app = new Vue({
el: '#app',
data: {
imgs: [
{src: "https://raw.githubusercontent.com/BrianCS/atvImg/addDemo/demo/images/kloc-icon-flattened.jpg"},
{
src: "https://raw.githubusercontent.com/BrianCS/atvImg/addDemo/demo/images/kloc-icon-flattened.jpg",
layers: [
'http://kloc.pm/images/back.png',
'http://kloc.pm/images/front.png'
]
}
]
}
})
</script>
</body>
</html>