Have a question about my projects, or want to suggest a new feature for traceit?
Feel free to email me at:
yunayyahoo.com
Get the latest version of jquery.traceit.js.
traceit on GitHub
Include the jquery.traceit.js script and it's dependencies jQuery (tested with jquery.js 1.10.2), Raphaël (tested with raphael.js 2.1.2) ) in your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../js/raphael.js"></script> <script src="../js/jquery.traceit.js"></script>
Or include jquery.traceit.min.js script and jquery.min.js. raphael_traceit.min.js is combined and minified raphael.js (v2.1.2) and jquery.traceit.js.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../js/raphael_traceit.min.js"></script>
Choose an element you would like to trace. For instance:
<div id="example">Let's trace this element.</div>
If you would like to see your element be traced immediately initialize a trace instance with:
//Initialize a trace instance with: $('#example').trace();
Or initialize a trace instance with 'isVisible' option set to false. Then later in your code you can call reTrace({isVisible: true}) method or trigger its equivalent 'adjust.trace' event to start the animation.
//Initialize a trace instance with isVisible set to false $('#example').trace({isVisible: false}); //then later in your code you can call reTrace({ isVisible: true }) method var inst = $('#example').data('trace'); inst.reTrace({ isVisible: true }); //or trigger its equivalent 'adjust.trace' event $('#example').trigger('adjust.trace');
To trace this element click here.
What can I configure? All options are optional. You can overwrite default options by initializing 'trace' instance with options object 'traceOpt'. See the list of trace options below.
//Initialize a trace instance with options object. $('#example2').trace({ traceOpt: { 'stroke': 'blue', 'stroke-width': 3, 'stroke-opacity': 1, 'fill': '#00ff00', 'fill-opacity': 0.2, 'gap-point': 'top_left', 'title': "see, this is example2! Click to hide." }, redrawSpeed: 6000, traceCanvasPadding: 8 });
You can similarly set new options when calling reTrace method or when triggering 'adjust.trace' event
//$('#example31').trace({isVisible: false}); var inst = $('#example31').data('trace'); inst.reTrace({ 'stroke': 'red', 'stroke-width': 2, 'stroke-opacity': 1, 'arrow-end': 'classic-wide-long', 'isVisible': 'true' }); //or trigger 'adjust.trace' event //$('#example32').trace({ isVisible: false }); $('#example32').trigger({ type: 'adjust.trace', adjustments: { 'stroke': '#aa0000', 'stroke-width': 4, 'stroke-opacity': 1, 'stroke-dasharray' : '--..', 'gap-point': 'bottom_right' } });
Can I have callbacks? Sure.
//or trigger 'adjust.trace' event $('#example4').trace({ traceOpt: { 'stroke-width': 4, 'stroke-opacity': .5, 'title': "click to trigger onClick function." }, onClick: function (me) { alert('triggered when user clicks on a trace shape.'); me.options.shape.animate({ opacity: 0 }, 1000, function () { me.hideTrace(); }); }, onHide: function () { alert('triggered when hide animation completes.'); }, onEndTrace: function () { alert("triggered when trace animation completes."); } });
Resizing a window or pressing the escape key will redraw all the traces.
The list of trace options
/******************************************************************************************************************** arrow-end string arrowhead on the end of the path. The format for string is type[-width[-length]]. Possible types: classic, block, open, oval, diamond, none, width: wide, narrow, midium, length: long, short, midium. cursor string CSS type of the cursor fill string colour, gradient or image fill-opacity number gap-point string ["top","top_left","top_right","bottom","bottom_left","bottom_right"] or number 0 - 100, where 0 and 100 both mean "top" (@12 o'clock position), 50 is "bottom" (@6pm), 25 is "top_right" (@3pm) etc. opacity number stroke string stroke colour stroke-dasharray string [“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”] stroke-linecap string [“butt”, “square”, “round”] stroke-opacity number stroke-width number stroke width in pixels, default is '1' title string will create tooltip with a given text **********************************************************************************************************************/
Flat Design is in, but 3D animation is still fun. This is my tribute to gradients, lights and shadows. Using objects to organize the code
Playing with custom font. Raphael path element contains whole text as a separate path. Animation with backIn easing.
Note: (mx > nx || my < ny) && (alpha += 180); in raphael.js flips the image at start of a path, commenting this line out fixes the problem.
Negative emotions are a part of life, but we should not let them take over our lives. Lets create an electronic “Assistant” to prompt us to become aware of our own emotions, deepen our self-awareness and Emotional Intelligence.
MoodFlow is a mobile app that accompanies a wearable, wireless biosensor, that constantly measures your emotional state. MoodFlow app processes this stream of emotional data and gently brings your attention to your negative emotions, helping you to avoid unwanted reactions.