Browsing as a guest
Hello! You are currently browsing this thread as a guest, If you would like to reply to this thread, please
or Register


Unrecognized
Animate your name!
#1
Hello everyone,

I found this website code on Codecademy.com, it's a HTML and Javascript which will let you animate your name once you hover with you pointer over the text.
So, in this topic I will explain how it works and I will give you to files needed to get this working. Curious about the source? I'll post a link at the bottom of this topic..

Tutorial:
So it's very simple to start this web page and change your name.
  1. Create a folder somewhere you want the web page to be (You can also use a webhost).
  2. Copy paste or download the files and place it inside the new made folder.
  3. Open the Javascript file called "main.js" and change the following line:
Code:
var myName = "CHANGE THIS TEXT";
  1. The part were you see "CHANGE THIS TEXT" is the part were you add your name or any text you want.
  2. Save the file called "index.html" with your browser.

Files needed:
First I'm going to give you the index.html file:
[spoiler]
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>
[/spoiler]

As last the main.js file:
[spoiler]
Code:
var myName = "CHANGE THIS TEXT";

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = [red, orange, green, blue, purple];

drawName(myName, letterColors);

if(10 < 3)
{
    bubbleShape = 'square';
}
else
{
    bubbleShape = 'circle';
}

bounceBubbles();
[/spoiler]

The source can be found here: Codecademy.com

I hope you understand how you can get this web page working the right way.
If not, I would be happy to help you out.

Kind regards,

Unrecognized.
[Image: TvyGt2Z.png]
" Once I heard Rocks, all of a sudden I understood what life was about. " - Slash
Reply
#2
[Image: CeODU1G.gif]
Reply
#3
[Image: TvyGt2Z.png]
" Once I heard Rocks, all of a sudden I understood what life was about. " - Slash
Reply
#4
Great share, thanks bud! :)
"I'm a gamer, not because I don't have a life... But because I choose to have many"
Reply
#5
(03-24-2016, 08:49 PM)katos Wrote: Great share, thanks bud! :)

No problem, I'm glad you like it :)
[Image: TvyGt2Z.png]
" Once I heard Rocks, all of a sudden I understood what life was about. " - Slash
Reply
#6
[Image: CeODU1G.gif]
Reply
Browsing as a guest
Hello! You are currently browsing this thread as a guest, If you would like to reply to this thread, please
or Register