-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
38 lines (35 loc) · 1.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML>
<html lang="en-EN">
<head>
<meta charset="UTF-8" />
<title>Vanilla Move Cards</title>
<script src="js/script.js?v=0.2.0"></script>
<script src="js/vanilla-movecards.js?v=0.2.0"></script>
<link rel="stylesheet" type="text/css" href="css/demo.css?v=0.2.0" />
</head>
<body>
<h1>Vanilla Move Cards</h1>
<p>The element is moving on hover.</p>
<h2>Basic Example (Pull effect)</h2>
<h3>Code</h3>
<div class="script-visible"><div id="card"><img id="img" src="img.jpg" alt="" /></div></div>
<script class="script-visible" contenteditable>window.domReady(function scrollanimdomready() {
new vanillaMoveCards(document.getElementById('card'), {
target: document.getElementById('img')
});
});</script>
<h3>Demo</h3>
<div class="card-wrapper" id="card" style="height:200px;width:200px"><img class="card" id="img" src="https://placeimg.com/200/200/any" alt="" /></div>
<h2>Inverted Example (Push effect)</h2>
<h3>Code</h3>
<div class="script-visible"><div id="card2"><img id="img2" src="img.jpg" alt="" /></div></div>
<script class="script-visible" contenteditable>window.domReady(function scrollanimdomready() {
new vanillaMoveCards(document.getElementById('card2'), {
target: document.getElementById('img2'),
attraction: false
});
});</script>
<h3>Demo</h3>
<div class="card-wrapper" id="card2" style="height:200px;width:200px"><img class="card" id="img2" src="https://placeimg.com/200/200/any" alt="" /></div>
</body>
</html>