formstone
Version:
Library of modular front end components.
1 lines • 16.2 kB
JSON
{"main":["checkpoint.js","checkpoint.css"],"options":[{"name":"intersect","type":"string","default":"'bottom-top'","description":"Position of intersection"},{"name":"offset","type":"int","default":"0","description":"Element offset for activating animation"},{"name":"reverse","type":"boolean","default":"false","description":"Deactivate animation when scrolling back"}],"events":[{"name":"activate.checkpoint","description":"Checkpoint activated"},{"name":"deactivate.checkpoint","description":"Checkpoint deactivated"}],"methods":[{"name":"resize","description":"Updates instance.","examples":["$(\".target\").checkpoint(\"resize\");"]}],"name":"Checkpoint","type":"widget","description":"A jQuery plugin for animating visible elements.","dependencies":["jQuery","core.js"],"css":[],"use":"### Basic\n\nCheckpoint will apply CSS based animations and trigger events when the target element is scrolled into view.\n\n```javascript\n$(\".checkpoint\").checkpoint();\n```\n\n```markup\n<div class=\"checkpoint\" data-checkpoint-animation=\"fade-up\">\n ...\n</div>\n```\n\n### Offset and Intersect\n\nAdjust the point the element becomes visible by setting the `offset` and `intersect` options:\n\n```javascript\n$(\".checkpoint\").checkpoint({\n offset: 100, // distance from intersect position\n intersect: 'center-top' // '[window]-[element]'\n});\n```\n\nThese values can also be set as `data` attributes for more fine grain control:\n\n```markup\n<div class=\"checkpoint\" data-checkpoint-animation=\"zoom-in\" data-checkpoint-offset=\"100\" data-checkpoint-intersect=\"center-top\">\n ...\n</div>\n```\n\n### Container\n\nUse the `data-checkpoint-container` attribute to define a parent element. The animation and events will still be trigger on the target element:\n\n```markup\n<div class=\"container\">\n <div class=\"checkpoint\" data-checkpoint-container=\".container\" data-checkpoint-animation=\"zoom-in\">\n ...\n </div>\n</div>\n```\n","demo":"<h4>Basic</h4>\r\n\r\n<!-- START: FIRSTDEMO -->\r\n\r\n<style>\n .check_container { background: #f9f9f9; overflow: hidden; }\n .spacer { margin: 100px auto; border: 1px solid #eee; border-radius: 3px; height: 202px; width: 302px; }\n .checkpoint { background: #00bcd4; border-radius: 3px; color: #fff; height: 200px; line-height: 200px; margin: 0 auto; text-align: center; width: 300px; }\n\n @media screen and (min-width: 980px) {\n .spacer { margin: 200px auto; }\n }\n\n @media screen and (min-width: 1220px) {\n .spacer { margin: 300px auto; }\n }\n\n .marker {\n position: fixed;\n /*top: 50%;*/\n right: 0;\n left: 0;\n\n width: 100%;\n height: 1px;\n\n background: red;\n opacity: 0.2;\n }\n\n .container_example { padding: 100px 0; }\n .container_example_spacer { margin: 0 auto; }\n\n @media screen and (min-width: 980px) {\n .container_example { padding: 200px 0; }\n .container_example_spacer { margin: 0 auto; }\n }\n\n @media screen and (min-width: 1220px) {\n .container_example { padding: 300px 0; }\n .container_example_spacer { margin: 0 auto; }\n }\n\n .demo_parent {\n position: relative;\n height: 300px;\n background: #eee;\n overflow-y: scroll;\n }\n .demo_parent .spacer {\n margin-top: 500px;\n }\n</style>\n\n<!-- <div class=\"marker\" style=\"top: 100px;\"></div>\n<div class=\"marker\" style=\"top: 50%;\"></div>\n<div class=\"marker\" style=\"bottom: 100px;\"></div> -->\n\n<script>\nFormstone.Ready(function() {\n // $(\".checkpoint\").on(\"activate.checkpoint\", function() {\n // console.log(\"activate\", this);\n // }).on(\"deactivate.checkpoint\", function() {\n // console.log(\"deactivate\", this);\n // });\n\n $(\".demo-checkpoint\").checkpoint({\n // offset: -50,\n intersect: 'middle-top',\n reverse: true\n });\n\n $(\"body\").find(\".js-demo_tabs\").on(\"update.tabs\", function() {\n $(\".demo-checkpoint\").checkpoint(\"resize\");\n });\n});\n</script>\n\r\n\n <!-- <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-options='{\"offset\":-100,\"intersect\":\"top-top\"}' data-checkpoint-animation=\"fade-up\">Target</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-options='{\"offset\":0,\"intersect\":\"middle-middle\"}' data-checkpoint-animation=\"fade-up\">Target</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-options='{\"offset\":100,\"intersect\":\"bottom-bottom\"}' data-checkpoint-animation=\"fade-up\">Target</div>\n </div>\n <div class=\"check_container\">\n <div class=\"spacer\">\n <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>\n </div>\n </div> -->\n\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"fade-up\">Fade Up</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="checkpoint" data-checkpoint-animation="fade-up">Fade Up</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".checkpoint\").checkpoint();</code></pre>\n </div>\n</div>\n\n<!-- END: FIRSTDEMO -->\n\n<h4>Custom Position</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"fade-up\" data-checkpoint-offset=\"100\" data-checkpoint-intersect=\"bottom-bottom\">Fade Up</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <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>\n <pre><code class=\"language-javascript\">$(\".checkpoint\").checkpoint();</code></pre>\n </div>\n</div>\n\n<!-- FADE -->\n\n<h4>Fade</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"fade-up\">Fade Up</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"fade-down\">Fade Down</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"fade-left\">Fade Left</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"fade-right\">Fade Right</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="checkpoint" data-checkpoint-animation="fade-up">Fade Up</div>\n<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Down</div>\n<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Left</div>\n<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Right</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".checkpoint\").checkpoint();</code></pre>\n </div>\n</div>\n\n<!-- ZOOM IN -->\n\n<h4>Zoom In</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-in\">Zoom In</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-in-up\">Zoom In Up</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-in-down\">Zoom In Down</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-in-left\">Zoom In Left</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-in-right\">Zoom In Right</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="checkpoint" data-checkpoint-animation="zoom-in">Zoom In</div>\n<div class="checkpoint" data-checkpoint-animation="zoom-in-up">Zoom In Up</div>\n<div class="checkpoint" data-checkpoint-animation="zoom-in-down">Zoom In Down</div>\n<div class="checkpoint" data-checkpoint-animation="zoom-in-left">Zoom In Left</div>\n<div class="checkpoint" data-checkpoint-animation="zoom-in-right">Zoom In Right</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".checkpoint\").checkpoint();</code></pre>\n </div>\n</div>\n\n<!-- ZOOM OUT -->\n\n<h4>Zoom Out</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-out\">Zoom Out</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-out-up\">Zoom Out Up</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-out-down\">Zoom Out Down</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-out-left\">Zoom Out Left</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"zoom-out-right\">Zoom Out Right</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="checkpoint" data-checkpoint-animation="zoom-out">Zoom Out</div>\n<div class="checkpoint" data-checkpoint-animation="zoom-out-up">Zoom Out Up</div>\n<div class="checkpoint" data-checkpoint-animation="zoom-out-down">Zoom Out Down</div>\n<div class="checkpoint" data-checkpoint-animation="zoom-out-left">Zoom Out Left</div>\n<div class="checkpoint" data-checkpoint-animation="zoom-out-right">Zoom Out Right</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".checkpoint\").checkpoint();</code></pre>\n </div>\n</div>\n\n<!-- FLIP -->\n\n<h4>Flip</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"flip-up\">Flip Up</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"flip-down\">Flip Down</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"flip-left\">Flip Left</div>\n </div>\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"flip-right\">Flip Right</div>\n </div>\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="checkpoint" data-checkpoint-animation="flip-up">Flip Up</div>\n<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Down</div>\n<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Left</div>\n<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Right</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".checkpoint\").checkpoint();</code></pre>\r\n </div>\r\n</div>\n\n<!-- Container -->\n\n<h4>Container</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example container_example\">\n <div class=\"spacer container_example_spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"fade-up\" data-checkpoint-container=\".container_example\">Fade Up</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="container">\n	<div class="checkpoint" data-checkpoint-animation="flip-up" data-checkpoint-container=".container">Fade Up</div>\n</div></code></pre>\n </div>\n</div>\n\n<!-- Parent -->\n\n<h4>Parent</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example demo_parent\">\n <div class=\"spacer\">\n <div class=\"checkpoint demo-checkpoint\" data-checkpoint-animation=\"fade-up\" data-checkpoint-parent=\".demo_parent\">Fade Up</div>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><div class="parent">\n	<div class="checkpoint" data-checkpoint-animation="fade-up" data-checkpoint-parent=".parent">Fade Up</div>\n</div></code></pre>\n <pre><code class=\"language-javascript\">$(\".checkpoint\").checkpoint();</code></pre>\n </div>\n</div>\n","document":"# Checkpoint\n\nA jQuery plugin for animating visible elements.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Checkpoint\n\n\n#### Main\n\n```markup\ncheckpoint.js\ncheckpoint.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\n```\n\n### Basic\n\nCheckpoint will apply CSS based animations and trigger events when the target element is scrolled into view.\n\n```javascript\n$(\".checkpoint\").checkpoint();\n```\n\n```markup\n<div class=\"checkpoint\" data-checkpoint-animation=\"fade-up\">\n ...\n</div>\n```\n\n### Offset and Intersect\n\nAdjust the point the element becomes visible by setting the `offset` and `intersect` options:\n\n```javascript\n$(\".checkpoint\").checkpoint({\n offset: 100, // distance from intersect position\n intersect: 'center-top' // '[window]-[element]'\n});\n```\n\nThese values can also be set as `data` attributes for more fine grain control:\n\n```markup\n<div class=\"checkpoint\" data-checkpoint-animation=\"zoom-in\" data-checkpoint-offset=\"100\" data-checkpoint-intersect=\"center-top\">\n ...\n</div>\n```\n\n### Container\n\nUse the `data-checkpoint-container` attribute to define a parent element. The animation and events will still be trigger on the target element:\n\n```markup\n<div class=\"container\">\n <div class=\"checkpoint\" data-checkpoint-container=\".container\" data-checkpoint-animation=\"zoom-in\">\n ...\n </div>\n</div>\n```\n\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-checkpoint-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `intersect` | `string` | `'bottom-top'` | Position of intersection |\n| `offset` | `int` | `0` | Element offset for activating animation |\n| `reverse` | `boolean` | `false` | Deactivate animation when scrolling back |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the target instance's element, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `activate.checkpoint` | Checkpoint activated |\n| `deactivate.checkpoint` | Checkpoint deactivated |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### resize\n\nUpdates instance.\n\n```javascript\n$(\".target\").checkpoint(\"resize\");\n```\n\n"}