UNPKG

formstone

Version:

Library of modular front end components.

137 lines (126 loc) 5.91 kB
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <!-- Page Attributes --> <title>Background &middot; Formstone</title> <!-- Modernizer --> <script src="../js/modernizr.js?v=1.4.7"></script> <!-- Compiled CSS --> <link rel="stylesheet" href="../css/site.css?v=1.4.7"> <!-- Compiled JS --> <script src="../js/site.js?v=1.4.7"></script> <!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> --> </head> <body class="fs-grid demo_page"> <!-- JSHEADER --> <div class="demo_content"> <header class="header"> <div class="fs-row"> <div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div> </div> </header> <div class="fs-row"> <div class="fs-cell"> <h1 id="background-demo">Background Demo</h1> <p class="back_link"><a href="https://formstone.it/components/background">View Documentation</a></p> <!-- START: DEMO --> <h3>Basic</h3> <!-- START: FIRSTDEMO --> <style> .background { width: 100%; background: #CFD8DC; margin: 0 0 20px; padding-top: 50%; } </style> <div class="demo_container"> <div class="demo_example"> <div class="background js-background" data-background-options='{"source":"https://spacehold.it/1600x900/1.jpg","alt":"Background Image"}'></div> </div> <div class="demo_code"> <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre> <pre><code class="language-javascript">$(".background").background({ source: "http://example.com/image.jpg" });</code></pre> </div> </div> <!-- END: FIRSTDEMO --> <h3>Responsive</h3> <div class="demo_container"> <div class="demo_example"> <div class="background js-background" data-background-options='{"source":{"0px":"https://spacehold.it/800x450/2.jpg","980px":"https://spacehold.it/1600x900/2.jpg"},"alt":"Background Image"}'></div> </div> <div class="demo_code"> <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre> <pre><code class="language-javascript">$(".background").background({ source: { "0px": "http://example.com/image-small.jpg", "980px": "http://example.com/image-large.jpg" } });</code></pre> </div> </div> <h3>Video</h3> <div class="demo_container"> <div class="demo_example"> <div class="background js-background" data-background-options='{"source":{"webm":"https://spacehold.it/video/video.webm","mp4":"https://spacehold.it/video/video.mp4","ogg":"https://spacehold.it/video/video.ogv","poster":"https://spacehold.it/video/poster.jpg"},"alt":"Background Image"}'></div> </div> <div class="demo_code"> <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre> <pre><code class="language-javascript">$(".background").background({ source: { poster: "http://example.com/poster.jpg", webm: "http://example.com/video.webm", mp4: "http://example.com/video.mp4", ogg: "http://example.com/video.ogv" } });</code></pre> </div> </div> <!-- <h3>YouTube</h3> <div class="demo_container"> <div class="demo_example"> <div class="background js-background" data-background-options='{"source":{"autoPlay":true,"video":"//youtu.be/LlQ8dhdSjWs"},"youtubeOptions":{"start":60},"alt":"Background Image"}'></div> </div> <div class="demo_code"> <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre> <pre><code class="language-javascript">$(".background").background({ source: { poster: "http://example.com/poster.jpg", video: "//www.youtube.com/embed/VIDEO_ID" } });</code></pre> </div> </div> --> <h4>Lazy Load</h4> <div class="demo_container"> <div class="demo_example"> <div class="background js-background" data-background-options='{"source":"https://spacehold.it/1600x900/3.jpg","lazy":true,"alt":"Background Image"}'></div> </div> <div class="demo_code"> <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre> <pre><code class="language-javascript">$(".background").background({ lazy: true, source: "http://example.com/image.jpg" });</code></pre> </div> </div> <!-- END: DEMO --> <div class="footer"> <div class="copyright"> <div>&copy; 2018 <a href="https://formstone.it/">Formstone</a></div> </div> <div class="footer_links"> <!-- JSFOOTER --> </div> </div> </div> </div> </div> </body> </html>