forked from codrops/ShapeHoverEffectSVG
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex3.html
160 lines (154 loc) · 6.04 KB
/
index3.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en" class="demo-3 no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shape Hover Effect with SVG | Demo 3</title>
<meta name="description" content="Hover Effects with animated SVG Shapes using Snap.svg" />
<meta name="keywords" content="animated svg, hover effect, grid, svg shape html, " />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/SVGDrawingAnimation/"><span>Previous Demo</span></a>
<span class="right"><a href="http://cargocollective.com/isaac317">Artwork by Isaac Montemayor</a><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=18145"><span>Back to the Codrops Article</span></a></span>
</div>
<header class="codrops-header">
<h1>Shape Hover Effect with SVG<span>Recreating the effect as seen on <a href="http://christmasexperiments.com/">The Christmas Experiments</a></span></h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a class="current-demo" href="index3.html">Demo 3</a>
</nav>
</header>
<section id="grid" class="grid clearfix">
<a href="#" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
<figure>
<img src="img/1.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
<figcaption>
<h2>Crystalline</h2>
<p>Soko radicchio bunya nuts gram dulse.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
<figure>
<img src="img/2.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
<figcaption>
<h2>Cacophony</h2>
<p>Two greens tigernut soybean radish.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
<figure>
<img src="img/3.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
<figcaption>
<h2>Languid</h2>
<p>Beetroot water spinach okra water.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
<figure>
<img src="img/4.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
<figcaption>
<h2>Serene</h2>
<p>Water spinach arugula pea tatsoi.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
<figure>
<img src="img/5.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
<figcaption>
<h2>Nebulous</h2>
<p>Pea horseradish azuki bean lettuce.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
<figure>
<img src="img/6.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
<figcaption>
<h2>Iridescent</h2>
<p>A grape silver beet watercress potato.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
<figure>
<img src="img/7.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
<figcaption>
<h2>Resonant</h2>
<p>Chickweed okra pea winter purslane.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
<figure>
<img src="img/8.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
<figcaption>
<h2>Zenith</h2>
<p>Salsify taro catsear garlic gram.</p>
<button>View</button>
</figcaption>
</figure>
</a>
</section>
<section class="related">
<p>If you enjoyed these effects you might also like:</p>
<div><a href="http://tympanus.net/Tutorials/CaptionHoverEffects/"><h4>Caption Hover Effects</h4></a></div>
<div><a href="http://tympanus.net/Development/AnimatedSVGIcons/"><h4>Animated SVG Icons</h4></a></div>
</section>
</div><!-- /container -->
<script>
(function() {
function init() {
var speed = 300,
easing = mina.backout;
[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
pathConfig = {
from : path.attr( 'd' ),
to : el.getAttribute( 'data-path-hover' )
};
el.addEventListener( 'mouseenter', function() {
path.animate( { 'path' : pathConfig.to }, speed, easing );
} );
el.addEventListener( 'mouseleave', function() {
path.animate( { 'path' : pathConfig.from }, speed, easing );
} );
} );
}
init();
})();
</script>
</body>
</html>