You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.6 KiB
HTML
51 lines
1.6 KiB
HTML
<h2>Customizing Styles<a href="#custom-styles"></a></h2>
|
|
<p>You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden.</p>
|
|
<p>Here are the defaults:</p>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">ShuffleItem.Css = {
|
|
INITIAL: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
visibility: 'visible',
|
|
'will-change': 'transform',
|
|
},
|
|
VISIBLE: {
|
|
before: {
|
|
opacity: 1,
|
|
visibility: 'visible',
|
|
},
|
|
after: {},
|
|
},
|
|
HIDDEN: {
|
|
before: {
|
|
opacity: 0,
|
|
},
|
|
after: {
|
|
visibility: 'hidden',
|
|
},
|
|
},
|
|
};
|
|
|
|
ShuffleItem.Scale = {
|
|
VISIBLE: 1,
|
|
HIDDEN: 0.001,
|
|
};</code></pre>
|
|
</div>
|
|
|
|
<p>If you wanted to add a 50% red background to every item when they initialize, you could do this:</p>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">Shuffle.ShuffleItem.Css.INITIAL.backgroundColor = 'rgba(255, 0, 0, 0.5)';</code></pre>
|
|
</div>
|
|
|
|
<p>To set the text color to <code>teal</code> after the item has finished moving:</p>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">Shuffle.ShuffleItem.Css.VISIBLE.after.color = 'teal';</code></pre>
|
|
</div>
|
|
|
|
<p>You can also customize the scaling effect with visible or hidden items, <strong>however</strong>, the <code>VISIBLE</code> and <code>HIDDEN</code> values <em>cannot</em> be the exact same.</p>
|
|
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">Shuffle.ShuffleItem.Scale.HIDDEN = 0.5;</code></pre>
|
|
</div>
|