/
completeConfiguration.html
215 lines (215 loc) · 13.3 KB
/
completeConfiguration.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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete configuration | Granim.js - にほんご。</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:title" content="Complete configuration | Granim.js - にほんご。">
<meta property="og:url">
<meta property="og:type" content="article">
<link rel="icon" href="https://tr.you84815.space/granim/favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link id="theme_style" rel="stylesheet" type="text/css" href="">
<script id="srcTheme" src="./js/toggleTheme.js" data-dir="granim"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-106478577-1', 'auto');
</script>
</head>
<body>
<div id="container">
<header>
<div class="icon"><a class="no-barba" href="https://tr.you84815.space/">
<svg width="16" height="16">
<rect width="16" height="16" fill="#e0e0e0"></rect>
</svg></a></div>
<div class="navi_toggle" onclick="toggleMenu()">
<svg id="menu_close" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
<svg id="menu_open" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
</div>
<div class="title">Granim.js - <a class="no-barba" href="https://tr.you84815.space/">にほんご。</a></div><span id="toggleTheme">
<svg role="img" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"></path>
</svg></span>
</header>
<div class="navi" id="navi">
<ul class="menu">
<li><a class="index" href="./index.html">Home</a></li>
<li><a class="introduction" href="./introduction.html">Introduction</a></li>
<li><span onclick="toggleNaviSubMenu('navi_options')">Options</span>
<ul class="hidden" id="navi_options">
<li><a href="./options/element.html">element</a>
</li>
<li><a href="./options/name.html">name</a>
</li>
<li><a href="./options/elToSetClassOn.html">elToSetClassOn</a>
</li>
<li><a href="./options/direction.html">direction</a>
</li>
<li><a href="./options/isPausedWhenNotInView.html">isPausedWhenNotInView</a>
</li>
<li><a href="./options/scrollDebounceThreshold.html">scrollDebounceThreshold</a>
</li>
<li><a href="./options/opacity.html">opacity</a>
</li>
<li><a href="./options/stateTransitionSpeed.html">stateTransitionSpeed</a>
</li>
<li><a href="./options/defaultStateName.html">defaultStateName</a>
</li>
<li><a href="./options/states.html">states</a>
<ul>
<li><a href="./options/states/gradients.html">gradients</a></li>
<li><a href="./options/states/transitionSpeed.html">transitionSpeed</a></li>
<li><a href="./options/states/loop.html">loop</a></li>
</ul>
</li>
<li><a href="./options/image.html">image</a>
<ul>
<li><a href="./options/image/source.html">source</a></li>
<li><a href="./options/image/position.html">position</a></li>
<li><a href="./options/image/stretchMode.html">stretchMode</a></li>
<li><a href="./options/image/blendingMode.html">blendingMode</a></li>
</ul>
</li>
</ul>
</li>
<li><span onclick="toggleNaviSubMenu('navi_callbacks')">Callbacks</span>
<ul class="hidden" id="navi_callbacks">
<li><a href="./callbacks/onStart.html">onStart</a></li>
<li><a href="./callbacks/onGradientChange.html">onGradientChange</a></li>
<li><a href="./callbacks/onEnd.html">onEnd</a></li>
</ul>
</li>
<li><a class="emittedEvents" href="./emittedEvents.html">Emitted events</a></li>
<li><a class="methods" href="./methods.html">Methods</a></li>
<li><a class="completeConfiguration active" href="./completeConfiguration.html">Complete configuration</a></li>
<li><a class="examples" href="./examples.html">Examples</a>
<ul class="hidden" id="navi_examples">
<li><a href="./examples.html#basic">基本的なグラデーションのアニメーション</a></li>
<li><a href="./examples.html#blendingmode">画像とbrendingModeを使ったグラデーション</a></li>
<li><a href="./examples.html#mask">画像マスクグラデーション</a></li>
<li><a href="./examples.html#interactive">インタラクティブなグラデーション</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="main">
<div id="barba-wrapper">
<div class="barba-container">
<h1>Complete configuration</h1>
<div id="update_date"><span>作成日: 2018.10.02
</span>
</div>
<p>2つの状態、画像、コールバックを設定した場合の全ての設定です。</p>
<pre><code><span class="hljs-keyword">var</span> granimInstance = <span class="hljs-keyword">new</span> Granim({
<span class="hljs-attr">element</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">'granim'</span>,
<span class="hljs-attr">elToSetClassOn</span>: <span class="hljs-string">'body'</span>,
<span class="hljs-attr">direction</span>: <span class="hljs-string">'diagonal'</span>,
<span class="hljs-attr">isPausedWhenNotInView</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">scrollDebounceThreshold</span>: <span class="hljs-number">300</span>,
<span class="hljs-attr">opacity</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>],
<span class="hljs-attr">stateTransitionSpeed</span>: <span class="hljs-number">1000</span>,
<span class="hljs-attr">image</span> : {
<span class="hljs-attr">source</span>: <span class="hljs-string">'../assets/img/bg-forest.jpg'</span>,
<span class="hljs-attr">position</span>: [<span class="hljs-string">'center'</span>, <span class="hljs-string">'bottom'</span>],
<span class="hljs-attr">stretchMode</span>: [<span class="hljs-string">'stretch'</span>, <span class="hljs-string">'stretch-if-bigger'</span>],
<span class="hljs-attr">blendingMode</span>: <span class="hljs-string">'multiply'</span>,
},
<span class="hljs-attr">states</span> : {
<span class="hljs-string">"default-state"</span>: {
<span class="hljs-attr">gradients</span>: [
[<span class="hljs-string">'#834d9b'</span>, <span class="hljs-string">'#d04ed6'</span>],
[<span class="hljs-string">'#1CD8D2'</span>, <span class="hljs-string">'#93EDC7'</span>]
],
<span class="hljs-attr">transitionSpeed</span>: <span class="hljs-number">5000</span>,
<span class="hljs-attr">loop</span>: <span class="hljs-literal">true</span>
},
<span class="hljs-string">"dark-state"</span>: {
<span class="hljs-attr">gradients</span>: [
[<span class="hljs-string">'#757F9A'</span>, <span class="hljs-string">'#D7DDE8'</span>],
[<span class="hljs-string">'#5C258D'</span>, <span class="hljs-string">'#4389A2'</span>]
],
<span class="hljs-attr">transitionSpeed</span>: <span class="hljs-number">5000</span>,
<span class="hljs-attr">loop</span>: <span class="hljs-literal">true</span>
}
},
<span class="hljs-attr">onStart</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Granim: onStart'</span>);
},
<span class="hljs-attr">onGradientChange</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">colorDetails</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Granim: onGradientChange, details: '</span>);
<span class="hljs-built_in">console</span>.log(colorDetails);
},
<span class="hljs-attr">onEnd</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Granim: onEnd'</span>);
}
});</code></pre><br>
<p>
グラデーションには2色以上の色を指定することができますが、
状態(<code>state</code>)ごとに異なる色数にすることはできません。<sup>*1</sup>
<b><code>opacity</code>の要素数を調整</b>する必要があります。
</p>
<pre><code><span class="hljs-keyword">var</span> granimInstance = <span class="hljs-keyword">new</span> Granim({
<span class="hljs-attr">element</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">'granim'</span>,
<span class="hljs-attr">elToSetClassOn</span>: <span class="hljs-string">'body'</span>,
<span class="hljs-attr">direction</span>: <span class="hljs-string">'diagonal'</span>,
<span class="hljs-attr">isPausedWhenNotInView</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">scrollDebounceThreshold</span>: <span class="hljs-number">300</span>,
<span class="hljs-attr">opacity</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">.5</span>, <span class="hljs-number">1</span>],
<span class="hljs-attr">stateTransitionSpeed</span>: <span class="hljs-number">1000</span>,
<span class="hljs-attr">states</span> : {
<span class="hljs-string">"default-state"</span>: {
<span class="hljs-attr">gradients</span>: [
[<span class="hljs-string">'#834d9b'</span>, <span class="hljs-string">'#d04ed6'</span>, <span class="hljs-string">'#1CD8D2'</span>, <span class="hljs-string">'#93EDC7'</span>],
[<span class="hljs-string">'#1CD8D2'</span>, <span class="hljs-string">'#93EDC7'</span>, <span class="hljs-string">'#757F9A'</span>, <span class="hljs-string">'#4389A2'</span>]
],
<span class="hljs-attr">transitionSpeed</span>: <span class="hljs-number">5000</span>,
<span class="hljs-attr">loop</span>: <span class="hljs-literal">true</span>
},
<span class="hljs-string">"dark-state"</span>: {
<span class="hljs-attr">gradients</span>: [
[<span class="hljs-string">'#757F9A'</span>, <span class="hljs-string">'#D7DDE8'</span>, <span class="hljs-string">'#1CD8D2'</span>, <span class="hljs-string">'#93EDC7'</span>],
[<span class="hljs-string">'#5C258D'</span>, <span class="hljs-string">'#4389A2'</span>, <span class="hljs-string">'#1CD8D2'</span>, <span class="hljs-string">'#93EDC7'</span>]
],
<span class="hljs-attr">transitionSpeed</span>: <span class="hljs-number">5000</span>,
<span class="hljs-attr">loop</span>: <span class="hljs-literal">true</span>
}
}
});</code></pre>
<blockquote>*1 <code>opacity</code>と、それぞれの<code>state</code>に定義した<code>states.gradients</code>の配列の色数を合わせる必要があります。
上記の例では、<code>opacity</code>の要素数が4で、<code>default-state</code>と<code>dark-state</code>でそれぞれ定義している<code>states.gradients</code>の配列の色数も4になっています。
</blockquote><br>
<div class="license">
<p>
© 2016
Benjamin Blonde Released under the <a href="https://github.com/sarcadass/granim.js/blob/master/LICENSE">MIT license</a>
</p>
<p>このコンテンツはBenjamin Blonde(sarcadass)による<a href="https://sarcadass.github.io/granim.js/">Granim.jsドキュメント</a>を翻訳/改変したものです。</p>
</div>
</div>
</div>
</div>
</div>
<footer><span>© <span id="copy_year">2017</span> tobijibu</span></footer>
</div>
<noscript id="deferred-styles">
<link href="./css/lazy.css" rel="stylesheet">
</noscript>
<script src="./js/main.js" defer></script>
<script src="./js/granim.min.js"></script>
<div id="src" hidden></div>
</body>
</html>