I’m using this js and accompanying svg to display an interesting page headline animation. The js code shows: fontSize: 55. In desktop view the size looks good, but looks small in less-than-desktop view. I’d like some guidance with how to make it responsive.
I’ve tried this in css:
but css doesn’t affect it.
The headline js has this:
I don’t know a lot of js (or svg), so any assistance is appreciated.
SVG:
<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 20 1300 110" fill="#fff"><path fill="transparent"></svg>
I’ve tried this in css:
CSS:
#logo { font-size: 150px; }
but css doesn’t affect it.
The headline js has this:
JavaScript:
window.onload = function(){
setTimeout(function(){
play();
}, 6445);
};
setTimeout(fade_out, 22000);
function fade_out() {
$("#logo").fadeOut().empty();
}
function play() {
var blue = '#fff';
var l = Snap('#logo');
var p = l.select('path');
l.clear();
l.append(p);
p.attr({
fill: blue,
stroke: '#fff',
});
setTimeout( function() {
// modify this one line below, and see the result !
var logoTitle = 'This Is The Headline';
var logoRandom = '';
var logoTitleContainer = l.text(0, '100%', '');
var possible = "-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}";
logoTitleContainer.attr({
fontSize: 55,
fontFamily: 'Arial',
fontWeight: '700'
});
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 = '';
}
}, 700 );
}
I don’t know a lot of js (or svg), so any assistance is appreciated.
Last edited: