-
Notifications
You must be signed in to change notification settings - Fork 172
/
Copy pathfilterEffects.html
190 lines (170 loc) · 12.5 KB
/
filterEffects.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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="The Filter Effects component for KUTE.js allows you to create CSS3 filter based animations on supporting browsers.">
<meta name="keywords" content="css3 filter,filter,kute,kute.js,animation,javascript animation,tweening engine,animation engine,JavaScript,Native JavaScript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.ico">
<link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,800|Roboto+Condensed:400,800" rel="stylesheet">
<title>KUTE.js Filter Effects</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<style></style>
</head>
<body>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<nav class="navbar">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<div class="nav-wrapper d-flex align-items-center justify-content-between">
<ul class="nav">
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
<ul class="subnav">
<li><a href="transformFunctions.html">Transform Functions</a></li>
<li><a href="transformMatrix.html">Transform Matrix</a></li>
<li><a href="svgTransform.html">SVG Transform</a></li>
<li><a href="svgMorph.html">SVG Morph</a></li>
<li><a href="svgCubicMorph.html">SVG Cubic Morph</a></li>
<li><a href="svgDraw.html">SVG Draw</a></li>
<li class="active"><a href="filterEffects.html">Filter Effects</a></li>
<li><a href="borderRadius.html">Border Radius</a></li>
<li><a href="htmlAttributes.html">HTML Attributes</a></li>
<li><a href="shadowProperties.html">Shadow Properties</a></li>
<li><a href="colorProperties.html">Color Properties</a></li>
<li><a href="boxModel.html">Box Model</a></li>
<li><a href="clipProperty.html">Clip Property</a></li>
<li><a href="backgroundPosition.html">Background Position</a></li>
<li><a href="textProperties.html">Text Properties</a></li>
<li><a href="opacityProperty.html">Opacity Property</a></li>
<li><a href="scrollProperty.html">Scroll Property</a></li>
<li><a href="textWrite.html">Text Write</a></li>
</ul>
</li>
<li><a href="https://github.com/thednp/kute.js/wiki">Wiki</a></li>
</ul>
<ul id="share">
<li>
<a class="facebook-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M1008 511.996c0 247.56-181.381 452.76-418.5 490v-346.62h115.561l22-143.381h-137.561v-93.1c0-39.221 19.221-77.461 80.82-77.461h62.561v-122s-56.762-9.68-111.041-9.68c-113.34 0-187.34 68.66-187.34 192.961v109.279h-126v143.381h126v346.62c-237.12-37.24-418.5-242.44-418.5-490 0-274 222-496 496-496s496 222 496 496z" fill="currentColor"></path></svg>
</a>
</li>
<li>
<a class="twitter-link" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path class="icon-demo" d="M886.579 306.995c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.08 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z" fill="currentColor"></path></svg>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="content-wrap">
<h2 class="head-title">Filter Effects</h2>
<p class="condensed lead">The component that animates the CSS3 <i>filter</i> property for specific <b>Element</b> targets on modern browsers.</p>
</div>
<div class="featurettes dark">
<div class="content-wrap">
<div class="columns">
<div class="col3">
<h3 class="border text-right">Overview</h3>
<p class="condensed text-right">Animate <b>filter</b> functions for a target <b>Element</b> and deliver the best possible animation.</p>
</div>
<div class="col9 border">
<p class="lead condensed">The KUTE.js <b>Filter Effects</b> component provides support for the CSS3 <b>filter</b> property on modern browsers.</p>
<p>The component covers all <b>filter</b> functions, except that the <b>url()</b> function cannot be animated, however the component will
try and keep it's value into the target element styling at all times.</p>
<p>Similar to the <a href="transformFunctions.html">Transform Functions</a> and the <a href="transformMatrix.html">Transform Matrix</a> components,
this component will try and keep same order of the filter functions, regardless of the input order, and the reason is that chained animations can
have some unwanted janky artifact effects.</p>
<p>Most values are in [0-Infinity] range and the presentation is delivered with <b>%</b> suffixed values, except <b>blur()</b> which uses <b>px</b>
as unit/suffix.</p>
</div>
</div>
</div>
</div>
<div class="content-wrap">
<h3>Filter Functions</h3>
<ul>
<li><kbd class="bg-olive">url()</kbd> function links an element to an SVG filter, the function is supported to keep it's value into the target element's style in case it's set
initially or you want to set it yourself.</li>
<li><kbd class="bg-olive">opacity()</kbd> can animate the opacity for a target element in the 0-100% range. Default is 100%.</li>
<li><kbd class="bg-olive">blur()</kbd> can animate the blur for a target element in the 0-Infinity range. Default is <b>0px</b> and the unit is always <code>px</code>.</li>
<li><kbd class="bg-olive">saturate()</kbd> can animate the color saturation for a target element in the 0-Infinity range. Default is 100%.</li>
<li><kbd class="bg-olive">grayscale()</kbd> can animate the color desaturation for a target element in the 0-100% range. Default is 0%.</li>
<li><kbd class="bg-olive">brightness()</kbd> can animate the brightness for a target element in the 0-Infinity range. Default is 100%.</li>
<li><kbd class="bg-olive">contrast()</kbd> can animate the contrast for a target element in the 0-Infinity range. Default is 100%.</li>
<li><kbd class="bg-olive">sepia()</kbd> can animate the sepia filter for a target element in the 0-100% range. Default is 0%.</li>
<li><kbd class="bg-olive">invert()</kbd> can animate the color inversion for a target element in the 0-100% range. Default is 0%.</li>
<li><kbd class="bg-olive">hueRotate()</kbd> can animate the color hue rotation for a target element in the 0-Infinity range. Default is 0deg.</li>
<li><kbd class="bg-olive">dropShadow()</kbd> can animate the shadow and all related parameters for a target element. Default is <code>[0,0,0,'black']</code></li>
</ul>
<h3>Examples</h3>
<p>Let's have a look at some sample tween objects and a quick example:</p>
<pre><code class="language-javascript">let fe1 = KUTE.to('selector1', {filter :{ blur: 5 }})
let fe2 = KUTE.to('selector2', {filter :{ sepia: 50, invert: 80 }})
let fe3 = KUTE.to('selector3', {filter :{ saturate: 150, brightness: 90 }})
let fe4 = KUTE.to('selector4', {filter :{ url: '#mySVGFilter', opacity: 40, dropShadow:[5,5,5,'olive'] }})
</code></pre>
<div id="filter-examples" class="featurettes">
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="mySVGFilter">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="#000000"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE1</div>
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE2</div>
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat; filter: url(#mySVGFilter)">FE3</div>
<div class="example-item example-box" style="background: url('https://picsum.photos/400/300') center center no-repeat">FE4</div>
<div class="example-buttons">
<a class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<h3>Notes</h3>
<ul>
<li>The CSS filter property is supported on all major browsers nowadays, but it's better to <a href="https://caniuse.com/#feat=css-filter-function">check</a> and
<a href="https://css-tricks.com/almanac/properties/f/filter/#browser-support">double check</a>.</li>
<li>This component can be a great addition to all SVG related components, especially because the <code>dropShadow</code> provides a better experience than
<code>boxShadow</code>, as <a href="https://codepen.io/Kseso/pen/Ajamv">shown here</a>.</li>
<li>Since this component can work with the <code>url()</code> function the way it does, the <a href="htmlAttributes.html">HTML Attributes</a> component will
complement greatly for even more animation potential.</li>
<li>Similar to the <a href="htmlAttributes.html">HTML Attributes</a> component, this one can also deal with specific function namespace, for instance <code>hue-rotate</code> and
<code>hueRotate</code>.</li>
<li>This component is bundled with the <i>demo/src/kute-extra.js</i> file.</li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>© 2015 - 2022 · <a href="https://github.com/thednp">thednp</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute-extra.min.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/filterEffects.js"></script>
<script src="./assets/js/scripts.js"></script>
</body>
</html>