Fer Mirabelli Fer Mirabelli - 6 months ago 8
HTML Question

Animated Text in JS not working at my place, but at Codepen example

I´m trying to use a piece of html,css,javascript code in codepen.io site This is the link to the sample i want to use

But when I put it on my code, I suppose that the javascript function is not working

This is the html code where I´m using it

<!DOCTYPE html>
<html>
<head>
<title>Sorteo USB Solutions</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/scripts.js" type="text/javascript"></script>
<head>
<body onload="funtion()">
<section class="full-screen">
<div class="wheel-03">
<svg preserveAspectRatio="xMinYMin meet" class="wheel-svg" version="1.1"
width="800" height="400"
viewBox="0 0 800 400">
<g transform="translate(0,0)">
<g transform="translate(0,250)" class="wheel-container">
<text x="0" y="-225" class="term term00">SMELL</text>
<text x="0" y="-150" class="term term01">HELL</text>
<text x="0" y="-75" class="term term02">SHOCK</text>
<text x="0" y="0" class="term term03">BRAND</text>
<text x="0" y="75" class="term term04">COOL</text>
<text x="0" y="150" class="term term05">NICE</text>
<text x="0" y="225" class="term term06">EYE</text>
<text x="0" y="300" class="term term07">SMELL</text>
<text x="0" y="375" class="term term08">HELL</text>
<text x="0" y="450" class="term term09">SHOCK</text>
<text x="0" y="525" class="term term10">BRAND</text>
<text x="0" y="600" class="term term11">COOL</text>
<text x="0" y="675" class="term term12">ROQUE SANTA CRUZ</text>
<text x="0" y="750" class="term term13">EYE</text>
</g>
</g>
</svg>
</div>
</section>

</body>
</html>


The css stylesheet and the js script referred in the html code contains the same code as the sample in codepen.

I'm using byethost server to test it with apache 2.2.15 in a linux server kernel version 3.2.40

I´woud like to know in the sample why the text is not spinning as in the codepen site.

thank you

Answer

Your Codepen has two external scripts that you haven't included.

Also, you have placed your custom script in the <head> element but Codepen includes that at the end of the <body>, just after your </section>

So you would end up with:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>

Also, remove the <script src="js/scripts.js" type="text/javascript"></script> out of your <head> element

Another thing - unrelated but your closing head tag is missing the / - it should be </head> not <head>.

So following my answer, here is your complete HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Sorteo USB Solutions</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body onload="funtion()">
<section class="full-screen">
    <div class="wheel-03">
        <svg preserveAspectRatio="xMinYMin meet" class="wheel-svg" version="1.1"
             width="800" height="400"
             viewBox="0 0 800 400">
            <g transform="translate(0,0)">
                <g transform="translate(0,250)" class="wheel-container">
                    <text x="0" y="-225" class="term term00">SMELL</text>
                    <text x="0" y="-150" class="term term01">HELL</text>
                    <text x="0" y="-75" class="term term02">SHOCK</text>
                    <text x="0" y="0" class="term term03">BRAND</text>
                    <text x="0" y="75" class="term term04">COOL</text>
                    <text x="0" y="150" class="term term05">NICE</text>
                    <text x="0" y="225" class="term term06">EYE</text>
                    <text x="0" y="300" class="term term07">SMELL</text>
                    <text x="0" y="375" class="term term08">HELL</text>
                    <text x="0" y="450" class="term term09">SHOCK</text>
                    <text x="0" y="525" class="term term10">BRAND</text>
                    <text x="0" y="600" class="term term11">COOL</text>
                    <text x="0" y="675" class="term term12">ROQUE SANTA  CRUZ</text>
                    <text x="0" y="750" class="term term13">EYE</text>
                </g>
            </g>
        </svg>
    </div>
</section>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>