Thread Contributor: 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.
The following 2 users Like Unrecognized's post:
[Image: TvyGt2Z.png]
" Once I heard Rocks, all of a sudden I understood what life was about. " - Slash

#2
Wowl! that's absolutely amazing thank you for sharing
@Unrecognized also that you're willing to help is very nice of you! :)
If you need assistance with anything, feel free to message me.

I am NOT a robot or am I?

#3
(03-24-2016, 12:52 PM)Sir Twisted Wrote: Wowl! that's absolutely amazing thank you for sharing
@Unrecognized also that you're willing to help is very nice of you! :)

I'm glad you like it and no problem. I like to help out :)
[Image: TvyGt2Z.png]
" Once I heard Rocks, all of a sudden I understood what life was about. " - Slash

#4
Great share, thanks bud! :)
"I'm a gamer, not because I don't have a life... But because I choose to have many"

#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

#6
(03-24-2016, 01:07 PM)Unrecognized Wrote:
(03-24-2016, 12:52 PM)Sir Twisted Wrote: Wowl! that's absolutely amazing thank you for sharing
@Unrecognized also that you're willing to help is very nice of you! :)

I'm glad you like it and no problem. I like to help out :)

It's nice to see that, a lot of people would have shared the thread and left it for dead :P ( usually when you see duplicates on the same thread all over the Internet )
If you need assistance with anything, feel free to message me.

I am NOT a robot or am I?



Users browsing this thread: 1 Guest(s)