Are the javascript tags located correctly?

JavaScript
1

I am unsuccessfully trying to add an animation to an html page:
https://codepen.io/alticreation/pen/ZYdopE?editors=1111

I copied the very small amount of js, html & css code from that link and placed it on a basic html page. I wrappred the css in < style > < /style > tags and wrapped the js in script tags < script > < / script > and located both the css and javascript code above the body tag, but no successful animation upon page load. So, I moved the js to below the html code, still no success. Any ideas are appreciated.

2

CodePen has an export option at the bottom right of the screen, that correctly puts the style and script tags where they should be located.

I recommend that you try that out.

3

Much thanks, that was very helpful. Should I start another posting to ask about this related question?

At that same link, you can see a blue design :
https://codepen.io/alticreation/pen/ZYdopE?editors=1111

I’ve tried to eliminate the blue design and keep the text, but haven’t figured it out. Here’s the js code:

window.onload = play();
document.getElementById('tryAgain').addEventListener('click', () => { play() })

function play() {
	var blue = '#2980b9';
	var l = Snap('#logo');
	var p = l.select('path');
  l.clear();
	l.append(p);

	p.attr({
		fill: blue,
		stroke: '#0066CC',
	});

	setTimeout( function() {
		// modify this one line below, and see the result !
		var logoTitle = 'alticreation';
		var logoRandom = '';
		var logoTitleContainer = l.text(0, '98%', '');
		var possible = "-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}";
		logoTitleContainer.attr({
			fontSize: 280,
			fontFamily: 'Dosis',
			fontWeight: '600'
		});

		function generateRandomTitle(i, logoRandom) {
			setTimeout( function() {
				logoTitleContainer.attr({ text: logoRandom });
			}, i*70 );
		}

		for( var i=0; i < logoTitle.length+1; i++ ) {
			logoRandom = logoTitle.substr(0, i);
			for( var j=i; j < logoTitle.length; j++ ) { 
				logoRandom += possible.charAt(Math.floor(Math.random() * possible.length)); 
			}
			generateRandomTitle(i, logoRandom);
			logoRandom = '';
		}

	}, 500 );

}

Any help with removing the blue design, and keeping the rest, is appreciated.

4

[quote=“ChrisjChrisj, post:3, topic:367276, full:true”]
I’ve tried to eliminate the blue design and keep the text, but haven’t figured it out.[/quote]

That blue design is in the d attribute of the path. Remove that d attribute and you’ll be done.

The d attribute is the d="..." part, that has all sorts of coordinate commands in there.

5

Thanks again Paul

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.