+<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>WebFrames Examples</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="description" content="Full-color animated images for every browser. No JavaScript required; all SVG- and CSS-based."> <meta property="og:title" content="WebFrames Examples"> <meta property="og:type" content="website"> <meta property="og:image" content="http://www.svachon.com/webframes/no-gif.png"> <link rel="stylesheet" href="style.css"> </head> <body class="examples"> <header id="menu"> <div> <div> <h1><a href="./">WebFrames</a></h1> <a class="download disabled" href="#">Download</a> <a class="toggle open" href="#menu" title="Show Menu" role="presentation">Show Menu</a> <a class="toggle close" href="#" title="Hide Menu" role="presentation">Hide Menu</a> <nav> <ul> <li><a class="disabled" href="#some-page">What it is</a></li> <li><a class="disabled" href="#some-page">How it works</a></li> <li><a href="examples.html">Examples</a></li> <li><a class="disabled" href="#some-page">Documentation</a></li> </ul> </nav> </div> </div> <a href="https://github.com/webframes/webframes"><span>Star</span> on GitHub</a> </header> <article id="top"> <div class="box"> <div class="box-content"> <header class="main"> <h1>It Really Works</h1> <p title="♥︎JS">And no client-side JavaScript required.</p> <ul class="share"> <li><a class="twitter" target="_blank" href="http://twitter.com/home?status=Cross-browser+animated+images+superior+to+GIF+using+%40webframes+-+svachon.com/webframes/examples.html">Share on Twitter</a></li> <li><a class="facebook" target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.svachon.com%2Fwebframes%2Fexamples.html&t=WebFrames%3A+Cross-browser+animated+images+superior+to+GIF">Share on Facebook</a></li> <li><a class="googleplus" target="_blank" href="http://plus.google.com/share?url=http%3A%2F%2Fwww.svachon.com%2Fwebframes%2Fexamples.html">Share on Google+</a></li> </ul> </header> <div class="boxes"> <article> <header> <h1>Road</h1> <h2>Vector</h2> </header> <figure> <a href="examples/road.html"><img src="examples/road.png" alt="Road (preview)"></a> <figcaption> <p class="dimensions">Any size</p> <p class="size" title="Not gzipped">117<abbr>KB</abbr></p> <h3>Supported Web Browsers:</h3> <ul class="browsers"> <li class="chrome" title="Chrome 35+" data-version="35+">Chrome</li> <li class="ie" title="Internet Explorer 10+" data-version="10+">Internet Explorer</li> <li class="firefox" title="Firefox 28+" data-version="28+">Firefox</li> <li class="safari" title="Safari 4+" data-version="4+">Safari</li> <li class="opera" title="Opera" data-version="?">Opera</li> </ul> </figcaption> </figure> </article> <article> <header> <h1>Wave Grid</h1> <h2>Vector</h2> </header> <figure> <a href="examples/wave-grid.html"><img src="examples/wave-grid.png" alt="Wave Grid (preview)"></a> <figcaption> <p class="dimensions">Any size</p> <p class="size" title="Not gzipped">165<abbr>KB</abbr></p> <h3>Supported Web Browsers:</h3> <ul class="browsers"> <li class="chrome" title="Chrome 35+" data-version="35+">Chrome</li> <li class="ie" title="Internet Explorer 10+" data-version="10+">Internet Explorer</li> <li class="firefox" title="Firefox 28+" data-version="28+">Firefox</li> <li class="safari" title="Safari 4+" data-version="4+">Safari</li> <li class="opera" title="Opera" data-version="?">Opera</li> </ul> </figcaption> </figure> </article> <article> <header> <h1>Glowy Thing</h1> <h2><abbr>JPEG</abbr></h2> </header> <figure> <a href="examples/glowy-thing.html"><img src="examples/glowy-thing.jpg" alt="Glowy Thing (preview)"></a> <figcaption> <p class="dimensions">720×486</p> <p class="size" title="Not gzipped">1.3<abbr>MB</abbr></p> <h3>Supported Web Browsers:</h3> <ul class="browsers"> <li class="chrome" title="Chrome 35+" data-version="35+">Chrome</li> <li class="ie" title="Internet Explorer 10+" data-version="10+">Internet Explorer</li> <li class="firefox" title="Firefox 28+" data-version="28+">Firefox</li> <li class="safari" title="Safari 9+" data-version="9+">Safari</li> <li class="opera" title="Opera" data-version="?">Opera</li> </ul> </figcaption> </figure> </article> <article class="warning"> <header> <h1>Explosion</h1> <h2><abbr>PNG</abbr></h2> </header> <figure> <a href="examples/explosion.html"><img src="examples/explosion.jpg" alt="Explosion (preview)"></a> <figcaption> <p class="dimensions">720×486</p> <p class="size" title="Not gzipped">20.1<abbr>MB</abbr></p> <h3>Supported Web Browsers:</h3> <ul class="browsers"> <li class="chrome" title="Chrome 35+" data-version="35+">Chrome</li> <li class="ie" title="Internet Explorer 10+" data-version="10+">Internet Explorer</li> <li class="firefox" title="Firefox 28+" data-version="28+">Firefox</li> <li class="safari" title="Safari 9+" data-version="9+">Safari</li> <li class="opera" title="Opera" data-version="?">Opera</li> </ul> </figcaption> </figure> </article> <article> <header> <h1>Explosion 2</h1> <h2><abbr>JPG + Transparency</abbr></h2> </header> <figure> <a href="examples/explosion2.html"><img src="examples/explosion.jpg" alt="Explosion 2 (preview)"></a> <figcaption> <p class="dimensions">720×486</p> <p class="size" title="gzipped">1.2<abbr>MB</abbr></p> <h3>Supported Web Browsers:</h3> <ul class="browsers"> <li class="chrome" title="Chrome 35+" data-version="35+">Chrome</li> <li class="ie" title="Internet Explorer 10+" data-version="10+">Internet Explorer</li> <li class="firefox" title="Firefox 28+" data-version="28+">Firefox</li> <li class="safari" title="Safari 9+" data-version="9+">Safari</li> <li class="opera" title="Opera" data-version="?">Opera</li> </ul> </figcaption> </figure> </article> </div> </div> </div> <div class="box"> <div class="box-content"> <article id="kickstarter"> <h1>Kickstarter Campaign Happening Now!</h1> <div> <iframe width="480" height="360" src="https://www.kickstarter.com/projects/stevenvachon/webframes-animated-images-for-the-web/widget/video.html"></iframe> <iframe width="220" height="420" src="https://www.kickstarter.com/projects/stevenvachon/webframes-animated-images-for-the-web/widget/card.html?v=2"></iframe> </div> </article> </div> </div> </article> <aside id="gallery" role="dialog"> <button>Hide Example</button> <iframe></iframe> </aside> <footer class="box"> <div class="box-content"> <p>Created by <a href="http://www.svachon.com/" rel="author">Steven Vachon</a></p> <ul> <li><a href="https://github.com/webframes">github.com/webframes</a></li> <li><a href="https://twitter.com/webframes">@webframes</a></li> </ul> </div> </footer> <script>var exampleLinks=document.querySelectorAll("article figure a"),gallery=document.querySelector("#gallery"),iframe=gallery.querySelector("iframe");gallery.querySelector("button").addEventListener("click",function(e){gallery.removeAttribute("class"),iframe.contentDocument.documentElement.innerHTML=""});for(var i=exampleLinks.length-1;i>=0;i--)exampleLinks[i].addEventListener("click",function(e){gallery.setAttribute("class","open"),iframe.contentDocument.location.replace(e.currentTarget.getAttribute("href")),e.preventDefault()});</script> </body> </html>
0 commit comments