Skip to content

Instantly share code, notes, and snippets.

@kazu2012

kazu2012/dabblet.html

Created October 14, 2012 13:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kazu2012/3888521 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kazu2012/3888521 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p>Hover over the panels to see the effects :)
<div class="panels">
<a class="panel p0" href="#">
<div class="panel-info">
<h1>Rainbow.</h1>
Bouncing <code>transition</code> on
<code>background-size</code> and
<code>background-position</code>.
</div>
</a>
<a class="panel p1" href="#">
<div class="panel-info">
<h1>Sharp waves.</h1> Linear <code>transition</code> on
<code>background-position</code>.
</div>
</a>
<a class="panel p2" href="#">
<div class="panel-info">
<h1>Soft discs.</h1>
Bouncing <code>transition</code> on
<code>background-position</code> and
<code>background-size</code>.
</div>
</a>
<a class="panel p3" href="#">
<div class="panel-info">
<h1>White to...</h1>
Actually just a <code>transition</code> on the
<code>background-color</code> underneath the partially
transparent <code>linear-gradient</code>.
</div>
</a>
<a class="panel p4" href="#">
<div class="panel-info">
<h1>Crash into Jupiter.</h1>
Just a <code>transition</code> on
<code>background-size</code>
(scaling, aspect ratio preserved).
</div>
</a>
<a class="panel p5" href="#">
<div class="panel-info">
<h1>Stripes to ropes.</h1>
Another <code>transition</code> on
<code>background-size</code>
(distortion, aspect ratio not preserved).
</div>
</a>
<a class="panel p6" href="#">
<div class="panel-info">
<h1>Stretched rainbow.</h1>
Bouncing <code>transition</code> on
<code>background-position</code>.
</div>
</a>
<a class="panel p7" href="#">
<div class="panel-info">
<h1>T-Rex teeth.</h1>
Bouncing <code>transition</code> on
<code>background-size</code>.
</div>
</a>
<a class="panel p8" href="#">
<div class="panel-info">
<h1>Happy sine wave.</h1>
Another <code>transition</code> on
<code>background-position</code>.
</div>
</a>
<a class="panel p9" href="#">
<div class="panel-info">
<h1>Make a tablecloth.</h1>
Yet another <code>transition</code> on
<code>background-position</code>.
</div>
</a>
<a class="panel p10" href="#">
<div class="panel-info">
<h1>Bar chart.</h1>
Linear <code>transition</code> on both
<code>background-position</code> and
<code>background-size</code>.
</div>
</a>
<a class="panel p11" href="#">
<div class="panel-info">
<h1>Particles.</h1>
Bouncing <code>transition</code> on
<code>background-position</code>.
</div>
</a>
<a class="panel p12" href="#">
<div class="panel-info">
<h1>Horizontal bar chart.</h1>
Again <code>transition</code> on both
<code>background-position</code> and
<code>background-size</code>.
</div>
</a>
<a class="panel p13" href="#">
<div class="panel-info">
<h1>Changing angle.</h1>
Simulated using a bouncing <code>transition</code> on
<code>background-size</code>.
</div>
</a>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment