-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (103 loc) · 4.58 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./assets/style/style.css">
<title>Flip Card</title>
</head>
<body>
<div class="cards">
<div class="flip-card-container flip-card-container-clickable">
<div class="flip-card">
<div class="flip-card-front basic" style="background-image: url(./assets/img/image/back4.png)">
</div>
<div class="flip-card-back basic" style="background-image: url(./assets/img/image/back1.png)">
</div>
</div>
</div>
<div class="flip-card-container flip-card-container-clickable">
<div class="flip-card">
<div class="flip-card-front basic_glare" style="background-image: url(./assets/img/image/back4.png)">
</div>
<div class="flip-card-back basic_glare" style="background-image: url(./assets/img/image/back2.png)">
</div>
</div>
</div>
</div>
<style class="hover"></style>
<script src='./assets/js/jquery.min.js'></script>
<script src='./assets/js/vanilla-tilt.min.js'></script>
<script type="text/javascript">
// select all flip-card-container-clickable elements using class selector
let eventBoxes = document.querySelectorAll(".flip-card-container-clickable");
var x;
var $cards = $(".flip-card-container");
var $style = $(".hover");
// tilt init
VanillaTilt.init(eventBoxes, {
max: 25,
speed: 2500,
});
for (let i = 0; i < eventBoxes.length; i++) {
eventBoxes[i].addEventListener('click', function () {
this.classList.toggle('flipped');
});
}
// iterate through each eventBox and initialize VanillaTilt for each one
eventBoxes.forEach(function (eventBox) {
eventBox.addEventListener('mousemove', function (event) {
var pos = [event.offsetX, event.offsetY];
event.preventDefault();
if (event.type === "touchmove") {
pos = [event.touches[0].clientX, event.touches[0].clientY];
}
var $card = $(this);
// math for mouse position
var l = pos[0];
var t = pos[1];
var h = $card.height();
var w = $card.width();
var px = Math.abs(Math.floor(100 / w * l) - 100);
var py = Math.abs(Math.floor(100 / h * t) - 100);
var pa = (50 - px) + (50 - py);
// math for gradient / background positions
var lp = (50 + (px - 50) / 1.5);
var tp = (50 + (py - 50) / 1.5);
var px_spark = (50 + (px - 50) / 7);
var py_spark = (50 + (py - 50) / 7);
var p_opc = 20 + (Math.abs(pa) * 1.5);
var ty = ((tp - 50) / 2) * -1;
var tx = ((lp - 50) / 1.5) * .5;
// css to apply for active card
var grad_pos = `background-position: ${lp}% ${tp}%;`
var sprk_pos = `background-position: ${px_spark}% ${py_spark}%;`
var opc = `opacity: ${p_opc/50};`
// need to use a <style> tag for psuedo elements
var style = `
.flip-card-front:hover:before { ${grad_pos} } /* gradient */
.flip-card-front:hover:after { ${sprk_pos} ${opc};} /* sparkles */
.flip-card-back:hover:before { ${grad_pos} } /* gradient */
.basic:hover{ --pointer-x: ${lp}%; --pointer-y: ${tp}%; }
.basic_glare:hover{ --pointer-x: ${lp}%; --pointer-y: ${tp}%; }
`;
// set / apply css class and style
$cards.removeClass("active");
$card.removeClass("animated");
$style.html(style);
clearTimeout(x);
});
eventBox.addEventListener('mouseout', function (event) {
// remove css, apply custom animation on end
var $card = $(event.target).closest('.flip-card-container');
var $front = $card.find('.flip-card-front');
$style.html("");
$card.removeAttr("style");
x = setTimeout(function () {
$front.addClass("animated");
}, 2500);
});
});
</script>
</body>
</html>