formstone
Version:
Library of modular front end components.
137 lines (126 loc) • 5.91 kB
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 · 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"><div class="background"></div></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"><div class="background"></div></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"><div class="background"></div></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"><div class="background"></div></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"><div class="background"></div></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>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>