03-24-2016, 08:38 AM
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.
Files needed:
First I'm going to give you the index.html file:
[spoiler]
[/spoiler]
As last the main.js file:
[spoiler]
[/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.
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.
- Create a folder somewhere you want the web page to be (You can also use a webhost).
- Copy paste or download the files and place it inside the new made folder.
- Open the Javascript file called "main.js" and change the following line:
Code:
var myName = "CHANGE THIS TEXT";
- The part were you see "CHANGE THIS TEXT" is the part were you add your name or any text you want.
- 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>
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();
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.
" Once I heard Rocks, all of a sudden I understood what life was about. " - Slash