JavaScript - Interactive Name Animation

JavaScript - Interactive Name Animation - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Coding (https://sinister.li/Forum-Coding)
+--- Forum: Coding (https://sinister.li/Forum-Coding--71)
+--- Thread: JavaScript - Interactive Name Animation (/Thread-JavaScript-Interactive-Name-Animation)

JavaScript - Interactive Name Animation - Equinox - 03-18-2014

(From CodeCademy)

This is really simple, you just need to know how to use JavaScript. If you don't I'll be explaining to help you along the way.

We need to define the text we want to animate. In this case, I will use "Sinisterly" and make it black and red.

Code:
var text = 'Sinisterly';

We've defined "text" to say "Sinisterly", now we define our colours. This is fairly easy.

Code:
var colours = [black,red];

We only have two colours, black and red, they will invert each letter.

Now we user drawName, but we need to use our colours and text. It's simple, put them in parentheses.

Code:
drawName(text,colours);

Lastly, we set our desired shape. I will use square for a pixel effect, but you can use circles and such.

Code:
bubbleShape = 'square';

We're done, now we set bounceBubbles, then we're done.

Code:
bounceBubbles();

Now, we're done. Here's the full code if you want it, you can make so much more though.

Spoiler:Code:
var text = "Sinisterly";
var colours = [black,red];
drawName(text,colours);
bubbleShape = 'square';
bounceBubbles();

Hope this fun little JavaScript code was useful. ~Dub

RE: JavaScript - Interactive Name Animation - Adorapuff - 03-18-2014

You C&P'd this from CodeAcademy.com
This will not work without importing necessary imports.

For this to work. Create an index.html file and paste the following:

Code:
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

Then paste the code he posted in a file called main.js
Then your done.

RE: JavaScript - Interactive Name Animation - cr33pyguy - 04-11-2014

So this is basically using JavaScript plugins? I guess I could check out the source code for those plugins.
Also, JQuery.

No to say that this isn't interesting. It really is.

RE: JavaScript - Interactive Name Animation - Undiscovered - 04-11-2014

(03-18-2014, 10:13 PM)Adorapuff Wrote: You C&P'd this from CodeAcademy.com
This will not work without importing necessary imports.

For this to work. Create an index.html file and paste the following:

Code:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script> </head> <body> <canvas id="myCanvas"></canvas> <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>

Then paste the code he posted in a file called main.js
Then your done.

Damn @Duubz I think you just got roasted

RE: JavaScript - Interactive Name Animation - Equinox - 04-11-2014

(04-11-2014, 12:02 PM)Undiscovered Wrote: Damn @Duubz I think you just got roasted

Going to break that shovel I'm telling you.