formstone
Version:
Library of modular front end components.
352 lines (315 loc) • 17.3 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>Checkpoint · 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="checkpoint-demo">Checkpoint Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/checkpoint">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<style>
.check_container {
background: #f9f9f9;
overflow: hidden;
}
.spacer {
margin: 100px auto;
border: 1px solid #eee;
border-radius: 3px;
height: 202px;
width: 302px;
}
.checkpoint {
background: #00bcd4;
border-radius: 3px;
color: #fff;
height: 200px;
line-height: 200px;
margin: 0 auto;
text-align: center;
width: 300px;
}
@media screen and (min-width: 980px) {
.spacer {
margin: 200px auto;
}
}
@media screen and (min-width: 1220px) {
.spacer {
margin: 300px auto;
}
}
.marker {
position: fixed;
/*top: 50%;*/
right: 0;
left: 0;
width: 100%;
height: 1px;
background: red;
opacity: 0.2;
}
.container_example {
padding: 100px 0;
}
.container_example_spacer {
margin: 0 auto;
}
@media screen and (min-width: 980px) {
.container_example {
padding: 200px 0;
}
.container_example_spacer {
margin: 0 auto;
}
}
@media screen and (min-width: 1220px) {
.container_example {
padding: 300px 0;
}
.container_example_spacer {
margin: 0 auto;
}
}
.demo_parent {
position: relative;
height: 300px;
background: #eee;
overflow-y: scroll;
}
.demo_parent .spacer {
margin-top: 500px;
}
</style>
<!-- <div class="marker" style="top: 100px;"></div>
<div class="marker" style="top: 50%;"></div>
<div class="marker" style="bottom: 100px;"></div> -->
<script>
Formstone.Ready(function() {
// $(".checkpoint").on("activate.checkpoint", function() {
// console.log("activate", this);
// }).on("deactivate.checkpoint", function() {
// console.log("deactivate", this);
// });
$(".demo-checkpoint").checkpoint({
// offset: -50,
intersect: 'middle-top',
reverse: true
});
$("body").find(".js-demo_tabs").on("update.tabs", function() {
$(".demo-checkpoint").checkpoint("resize");
});
});
</script>
<!-- <div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-options='{"offset":-100,"intersect":"top-top"}' data-checkpoint-animation="fade-up">Target</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-options='{"offset":0,"intersect":"middle-middle"}' data-checkpoint-animation="fade-up">Target</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-options='{"offset":100,"intersect":"bottom-bottom"}' data-checkpoint-animation="fade-up">Target</div>
</div>
<div class="check_container">
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-options='{"offset":100,"intersect":"bottom-bottom"}' data-checkpoint-animation="fade-up" data-checkpoint-container=".check_container">Target</div>
</div>
</div> -->
<div class="demo_container">
<div class="demo_example">
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="fade-up">Fade Up</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="checkpoint" data-checkpoint-animation="fade-up">Fade Up</div></code></pre>
<pre><code class="language-javascript">$(".checkpoint").checkpoint();</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Custom Position</h4>
<div class="demo_container">
<div class="demo_example">
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="fade-up" data-checkpoint-offset="100" data-checkpoint-intersect="bottom-bottom">Fade Up</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="checkpoint" data-checkpoint-offset="100" data-checkpoint-intersect="bottom-bottom" data-checkpoint-animation="fade-up">Fade Up</div></code></pre>
<pre><code class="language-javascript">$(".checkpoint").checkpoint();</code></pre>
</div>
</div>
<!-- FADE -->
<h4>Fade</h4>
<div class="demo_container">
<div class="demo_example">
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="fade-up">Fade Up</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="fade-down">Fade Down</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="fade-left">Fade Left</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="fade-right">Fade Right</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="checkpoint" data-checkpoint-animation="fade-up">Fade Up</div>
<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Down</div>
<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Left</div>
<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Right</div></code></pre>
<pre><code class="language-javascript">$(".checkpoint").checkpoint();</code></pre>
</div>
</div>
<!-- ZOOM IN -->
<h4>Zoom In</h4>
<div class="demo_container">
<div class="demo_example">
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-in">Zoom In</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-in-up">Zoom In Up</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-in-down">Zoom In Down</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-in-left">Zoom In Left</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-in-right">Zoom In Right</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="checkpoint" data-checkpoint-animation="zoom-in">Zoom In</div>
<div class="checkpoint" data-checkpoint-animation="zoom-in-up">Zoom In Up</div>
<div class="checkpoint" data-checkpoint-animation="zoom-in-down">Zoom In Down</div>
<div class="checkpoint" data-checkpoint-animation="zoom-in-left">Zoom In Left</div>
<div class="checkpoint" data-checkpoint-animation="zoom-in-right">Zoom In Right</div></code></pre>
<pre><code class="language-javascript">$(".checkpoint").checkpoint();</code></pre>
</div>
</div>
<!-- ZOOM OUT -->
<h4>Zoom Out</h4>
<div class="demo_container">
<div class="demo_example">
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-out">Zoom Out</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-out-up">Zoom Out Up</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-out-down">Zoom Out Down</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-out-left">Zoom Out Left</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="zoom-out-right">Zoom Out Right</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="checkpoint" data-checkpoint-animation="zoom-out">Zoom Out</div>
<div class="checkpoint" data-checkpoint-animation="zoom-out-up">Zoom Out Up</div>
<div class="checkpoint" data-checkpoint-animation="zoom-out-down">Zoom Out Down</div>
<div class="checkpoint" data-checkpoint-animation="zoom-out-left">Zoom Out Left</div>
<div class="checkpoint" data-checkpoint-animation="zoom-out-right">Zoom Out Right</div></code></pre>
<pre><code class="language-javascript">$(".checkpoint").checkpoint();</code></pre>
</div>
</div>
<!-- FLIP -->
<h4>Flip</h4>
<div class="demo_container">
<div class="demo_example">
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="flip-up">Flip Up</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="flip-down">Flip Down</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="flip-left">Flip Left</div>
</div>
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="flip-right">Flip Right</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="checkpoint" data-checkpoint-animation="flip-up">Flip Up</div>
<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Down</div>
<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Left</div>
<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Right</div></code></pre>
<pre><code class="language-javascript">$(".checkpoint").checkpoint();</code></pre>
</div>
</div>
<!-- Container -->
<h4>Container</h4>
<div class="demo_container">
<div class="demo_example container_example">
<div class="spacer container_example_spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="fade-up" data-checkpoint-container=".container_example">Fade Up</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="container">
	<div class="checkpoint" data-checkpoint-animation="flip-up" data-checkpoint-container=".container">Fade Up</div>
</div></code></pre>
</div>
</div>
<!-- Parent -->
<h4>Parent</h4>
<div class="demo_container">
<div class="demo_example demo_parent">
<div class="spacer">
<div class="checkpoint demo-checkpoint" data-checkpoint-animation="fade-up" data-checkpoint-parent=".demo_parent">Fade Up</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="parent">
	<div class="checkpoint" data-checkpoint-animation="fade-up" data-checkpoint-parent=".parent">Fade Up</div>
</div></code></pre>
<pre><code class="language-javascript">$(".checkpoint").checkpoint();</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>