gsaw-js/index.html at master · realScipio/gsaw-js · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>gsaw.js: An "Add Water" FX Library to use with GSAP</title>

	<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
	<link rel="stylesheet" href="style.css">

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"
			integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
			crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"
			integrity="sha256-u1jheEMh2SAQia+yme5UvHI78yFF9QgW8aH5YGD8MVA="
			crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TimelineMax.min.js"
			integrity="sha256-wesnJbuAyCiNHbnhuiFtX2+Obe+QTsT0IlAKKFmKdY4="
			crossorigin="anonymous"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/CSSRulePlugin.min.js"
			integrity="sha256-uCdiLEa/Bh5TTubBuT1AdsxEN7G8AU9b1EzPKWn4jZA="
			crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/CSSPlugin.min.js"
			integrity="sha256-+TztvuuZId5s+GQU+DuLURMeVeiiGkblnde0SpPr0Mg="
			crossorigin="anonymous"></script>

	<script src="gsaw.js"></script>
</head>
<body>
	<div class="wrapper">
		<section id="intro">
			<h1>gsaw.js</h1>
			<h2>An "Add Water" FX Library,<br/>to use with GSAP</h2>
		</section>

		<section id="hover">
			<h3>Hover effects</h3>
			<p>Just hover your mouse over a button / hyperlink to see the effect!</p>
			<div class="row">
				<h4>2D Transformations</h4>
				<a href="" class="gsaw-grow inline-block">Grow</a>
				<a href="" class="gsaw-shrink inline-block">Skrink</a>
				<a href="" class="gsaw-swing inline-block">Swing</a>
				<a href="" class="gsaw-skew inline-block">Skew</a>
			</div>
			<div class="row">
				<a href="" class="gsaw-wobble-skew inline-block">Wobble Skew</a>
				<a href="" class="gsaw-wobble-skew-top inline-block">Wobble Skew Top</a>
				<a href="" class="gsaw-wobble-skew-bottom inline-block">Wobble Skew Bottom</a>
			</div>
			<div class="row">
				<a href="" class="gsaw-wobble-horizontal inline-block">Wobble Horizontal</a>
				<a href="" class="gsaw-wobble-vertical inline-block">Wobble Vertical</a>
			</div>
			<div class="row">
				<h4>3D Transformations</h4>
				<a href="" class="gsaw-rotate-x inline-block">Rotate X</a>
				<a href="" class="gsaw-rotate-y inline-block">Rotate Y</a>
			</div>
			<div class="row">
				<h4>Background Effects</h4>
				<a href="" class="gsaw-sweep-to-right inline-block" data-gsaw-config='{"backgroundColor": "rgb(67, 185, 139)"}'>Sweep to Right</a>
				<a href="" class="gsaw-sweep-to-left inline-block" data-gsaw-config='{"backgroundColor": "rgb(67, 185, 139)"}'>Sweep to Left</a>
				<a href="" class="gsaw-sweep-to-bottom inline-block" data-gsaw-config='{"backgroundColor": "rgb(67, 185, 139)"}'>Sweep to Bottom</a>
				<a href="" class="gsaw-sweep-to-top inline-block" data-gsaw-config='{"backgroundColor": "rgb(67, 185, 139)"}'>Sweep to Top</a>
			</div>
			<div class="row">
				<h4>Border Effects</h4>
				<a href="" class="gsaw-border-ripple inline-block" data-gsaw-config='{"borderColor": "rgb(67, 185, 139)", "borderWidth": 5}'>Border Ripple</a>
			</div>
		</section>
	</div>
</body>
</html>