-
Notifications
You must be signed in to change notification settings - Fork 78
/
index.html
1 lines (1 loc) · 10.8 KB
/
index.html
1
<!DOCTYPE html><html><head><title>Stylie. A graphical CSS animation tool.</title><meta charset="utf-8"><link href='lib/rekapi-controls/font-awesome/css/font-awesome.css' rel='stylesheet' type='text/css'><link href='lib/dragon/jquery.dragon-slider.css' rel='stylesheet' type='text/css'><link href='lib/rekapi-controls/rekapi-controls.css' rel='stylesheet' type='text/css'><link href='style.css' rel='stylesheet' type='text/css'></head><body><div id="main-container"><header><h1><a href="https://github.com/jeremyckahn/stylie"><img src="img/ui/stylie_logo.png" alt="Stylie"></a></h1><h2>A fun CSS animation tool, powered by <a href="http://rekapi.com" target="_blank">Rekapi</a></h2><a id="help-trigger" href="#">?</a><div id="top-level-alert"><p> </p></div></header><div id="scaffolding-area"><canvas id="tween-path"></canvas><div id="rekapi-canvas"><div class="rekapi-actor"><img src="img/circle.png" alt="A test image of a circle"></div></div><div id="crosshairs"></div></div><div id="control-pane"><ul class="tabs"><li data-target="keyframe-controls"><a href="#">Keyframes</a></li><li data-target="motion-controls"><a href="#">Motion</a></li><li data-target="css-output"><a href="#">CSS</a></li><li data-target="html-input"><a href="#">HTML</a></li></ul><ul class="tabs-contents"><li id="keyframe-controls"><div class="pinned-button-array"><label class="add"><span>Add a keyframe</span><button class="icon icon-plus"> </button></label></div><div class="controls-wrapper"><ul class="controls"></ul></div></li><li id="motion-controls"><ul class="controls"><li><label for="iterations">Iterations (preview is always infinite):</label><input id="iterations" class="full-width" type="text" value="infinite"></li><li><div id="custom-ease"><label>Custom easings:</label><select class="easing custom-ease-select"></select><button class="icon icon-plus" title="Add a new custom easing formula"> </button><div class="bezierizer"></div><div class="property-field"><label><span>x1:</span><input type="text" class="quarter-width bezier-point x1" data-point="x1" value="0"></label></div><div class="property-field"><label><span>y1:</span><input type="text" class="quarter-width bezier-point y1" data-point="y1" value="0"></label></div><div class="property-field"><label><span>x2:</span><input type="text" class="quarter-width bezier-point x2" data-point="x2" value="0"></label></div><div class="property-field"><label><span>y2:</span><input type="text" class="quarter-width bezier-point y2" data-point="y2" value="0"></label></div></div></li><li><input id="show-path" type="checkbox" checked="checked"><label for="show-path">Show path</label></li><li><input id="center-to-path" type="checkbox" checked="checked"><label for="center-to-path">Center to path</label></li></ul></li><li id="css-output"><p> Customize the generated CSS. </p><ul class="controls"><li><h3><label for="css-name">Class name:</label></h3><input id="css-name" class="full-width" type="text" value="stylie"></li><li><h3> Vendors: </h3><ul class="checkboxes vendors"><li><label><input id="moz-toggle" class="class-toggle" type="checkbox"><span>Mozilla</span></label></li><li><label><input id="ms-toggle" class="class-toggle" type="checkbox"><span>Microsoft</span></label></li><li><label><input id="o-toggle" class="class-toggle" type="checkbox"><span>Opera</span></label></li><li><label><input id="webkit-toggle" class="class-toggle" type="checkbox"><span>Webkit</span></label></li><li><label><input id="w3-toggle" class="class-toggle" type="checkbox" checked="checked"><span>W3C</span></label></li></ul></li><li><h3>Generated CSS:</h3><textarea></textarea></li><li class="quality-slider fps"><label>Smaller output</label><label>Higher quality</label><div class="slider"></div></li></ul></li><li id="html-input"><p> Customize the HTML that you want to animate. The preview is updated as you type. </p><textarea></textarea></li></ul></div><div id="help-contents" class="hid modal"><div class="modal-content"><h2>CSS animation made easy!</h2><p>Stylie is a fun tool for easily creating CSS 3 animations. You can configure your animation graphically, tweak it, grab the generated CSS and go!</p><p><a href="http://www.youtube.com/watch?v=mGd305iboSo" target="_blank">Watch this screencast for a quick tutorial.</a></p><h3>The Stylie Workflow</h3><p>When you first open the app, you will see a little ball moving from left to right. You probably don't want to animate an image of a ball, so click the "HTML" tab in the control panel on the right. This textarea contains the HTML that is being animated. You can put whatever you want in here, but let's stick some text in there for starters:</p><pre><h1>Hello there!</h1></pre><p>The preview updates automatically. Next, you'll want to change the beginning and ending positions of the animation. Just click and drag the crosshairs to your liking. When your cursor is not focused on a text input, you can hold the Shift key to make rotation Cubelets appear over the crosshairs. Click and drag the Cubelets to modify the the X and Y rotation axes, and drag the extended rotation arm to modify the Z axis rotation.</p><img src="img/shift_example.png" alt="A screenshot of Stylie while the rotation Cubelets are shown"><h3>Keyframe editing</h3><p>You can add, remove and edit keyframes. This is done in the "Keyframes" tab. When you first open Stylie, you are presented with the default keyframes. Keyframe 0 cannot be moved and has no easing properties associated with it, but all of the other keyframes do. To add a new keyframe, click the "Add a Keyframe" button in the upper right portion of the tab.</p><img src="img/keyframes_tab.png" alt="A screenshot of the Keyframes tab."><p>RX, RY and RZ refer to the three rotation axes. You can add as many keyframes as you'd like. You can also reorder keyframes by clicking their millisecond value and pressing the Enter key.</p><img src="img/keyframe_editing.png" alt="A screenshot of keyframes being edited."><p>You can tweak individual keyframe properties by pressing the "up" and "down" arrow keys when focusing on a property's text input. You can change individual properties' easing formula by selecting it from the dropdown next to each text input. To remove a keyframe, click the "X" in the upper right corner of a keyframe.</p><h3>Motion control</h3><p>In addition to the standard easing formulae, you can define your own custom easing curves in the "Motion" tab. To do this, select or create a "customEasing" from the dropdown and drag the circular handles. You can also type in the coordinates for the control points. Once you have defined your custom curve, you can select it from any property's easing dropdown.</p><img src="img/bezier_editing.png" alt="A screenshot of a bezier curve being edited."><h3>Playback control</h3><p>You'll notice a playhead in the bottom left of the screen. This is fully interactive; you can can play, pause and stop the animation. You can also click and drag the playhead and zip to any part of the timeline.</p><h3>Generating your CSS</h3><p>Once you've configured the animation to your liking, it is time to generate the CSS to be used in your web page. Click on the "CSS" tab in the control panel to see the ready-to-use CSS. You can configure the generated CSS for your specific needs, such as the name of the CSS class on the DOM element to be animated, and which browser vendors you want to support. More complex animations will generate very verbose CSS, so be aware of that.</p><h3>Key bindings</h3><p>Stylie has a few keyboard-activated features:</p><table><thead><tr><th colspan="2"><em>(When no inputs are focused)</em></th></tr></thead><tbody><tr><td>K</td><td>Add a new Keyframe</td></tr><tr><td>C</td><td>Toggle the Control Pane</td></tr><tr><td>T</td><td>Toggle the Timeline Scrubber</td></tr><tr><td>H</td><td>Toggle this Help screen</td></tr><tr><td>Space bar</td><td>Play/Pause the animation</td></tr><tr><td>Shift <em>(hold)</em></td><td>Show keyframe rotation Cubelets</td></tr></tbody></table><h3>This tool is open source</h3><p>The code <a href="https://github.com/jeremyckahn/stylie" target="_blank">lives on Github</a>. You are free to do what you please with the code - Stylie is distributed under an <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. If you would like to request a feature, please do so with the <a href="https://github.com/jeremyckahn/stylie/issues" target="_blank">project's issue tracker</a>.</p><h3>How it's made</h3><p>Stylie is built with some very useful open source libraries:</p><ul class="bulleted"><li><a href="http://jquery.com/" target="_blank">jQuery</a></li><li class="nested"><ul><li><a href="https://github.com/jeremyckahn/dragon" target="_blank">jQuery Dragon</a></li><li><a href="https://github.com/jeremyckahn/cubelet" target="_blank">jQuery Cubelet</a></li></ul></li><li><a href="http://backbonejs.org/" target="_blank">Backbone</a></li><li><a href="http://underscorejs.org/" target="_blank">Underscore</a></li><li><a href="http://requirejs.org/" target="_blank">RequireJS</a></li><li><a href="https://github.com/janl/mustache.js/" target="_blank">mustache.js</a></li><li><a href="https://github.com/daniellmb/MinPubSub" target="_blank">MinPubSub</a></li><li><a href="http://rekapi.com/" target="_blank">Rekapi</a></li><li><a href="http://jeremyckahn.github.io/shifty/" target="_blank">Shifty</a></li></ul><h3>Author</h3><p>Stylie is built and maintained by <a href="http://jeremyckahn.com/" target="_blank">Jeremy Kahn</a>. He's a nice guy and you can find him on <a href="https://twitter.com/jeremyckahn" target="_blank">Twitter</a> and <a href="https://github.com/jeremyckahn" target="_blank">Github</a>. Stylie's beautiful blue theme was designed by the talented <a href="http://www.jonvictorino.com/" target="_blank">Jon Victorino</a>. </div></div><div id="incompatible-browser-message" class="modal"><h1>Hi! It looks like you are on a mobile device.</h1><p>Stylie isn't built to work on a device like this, and you probably wouldn't want to use this kind of tool on a tiny screen anyways. Please try Stylie on a desktop or laptop. In the meantime, take a look at this <a href="http://www.youtube.com/watch?v=mGd305iboSo">video</a> to get a feel for what you can do with Stylie on a larger screen.</p></div></div><script src="bin/libs.js"></script><script src="bin/app.js"></script><script>if (location.host === 'jeremyckahn.github.io') {(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-42910121-1', 'jeremyckahn.github.io');ga('send', 'pageview');} </script></body></html>