Geek Answers Handbook

Animation using jQuery

Please refer to this script ,

I tried to create an animation in which the div is entered, and then the text appears one character at a time.

I want a more smooth writing effect - what I created looks like more of a typing effect.

Is there any jquery plugin that does this? Or can I improve my code to achieve it?

+4
source share
2 answers

It would be difficult, but you could do it with svg animations using the javascript raphael library. Below is a code slightly adapted from the raphael animation demo as proof of concept. Obviously, you will have to have a few gradual animations of the path to get the effect you really want.

 <html> <head> <meta charset="utf-8"> <title>Raphaël · Animation</title> <link rel="stylesheet" href="http://raphaeljs.com/demo.css"media="screen"> <link rel="stylesheet" href="http://raphaeljs.com/demo-print.css"media="print"> <style media="screen"> #holder { height: 419px; margin: -205px 0 0 -305px; width: 619px; } </style> <script src="http://raphaeljs.com/raphael.js"></script> <script> Raphael.fn.arrow = function (x, y) { return this.path(["M", x, y] + "m-10-10l20,0 0-6 10,16 -10,16 0-6 -20,0 0,6 -10-16 10-16z").attr({fill: "#fff", stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.2}); }; window.onload = function () { // var r = Raphael("holder", 619, 419), var r = Raphael("holder", 619, 419), //Raphael(0, 0, "100%", "100%"), dashed = {fill: "none", stroke: "#666", "stroke-dasharray": "- "}; // Path 3 (function () { var el = r.path("M20,290c0-20 40,20 40,0").attr({fill: "none", stroke: "#fff", "stroke-width": 2}), elattrs = [{path: "M20,290c0-20 40,20 40,0c0-20 -40,20 -40,0z"}, {path: "M20,290c0-20 40,20 40,0c"}], now = 1; r.arrow(90, 290).node.onclick = function () { el.stop().animate(elattrs[+(now = !now)], 1000); }; })(); }; </script> </head> <body> <div id="holder"></div> </body> </html>
+3
source

Since 2013, now Lazy Line Painter is a jQuery plugin for creating animations from SVG files. It is built on Raphael.

+3
source

More articles:


All Articles