1 Replies - 399 Views - Last Post: 17 January 2022 - 01:24 PM

#1 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 160
  • Joined: 04-February 19

Help with changing the font size

Posted 17 January 2022 - 12:41 PM

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.

<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 (for example):

#logo {  font-size: 90vw; }


but css doesnít affect it.

The headline js has this:

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 );
}


any assistance with this js (or svg) is appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Help with changing the font size

#2 ArtificialSoldier   User is online

  • D.I.C Lover
  • member icon

Reputation: 3147
  • View blog
  • Posts: 8,965
  • Joined: 15-January 14

Re: Help with changing the font size

Posted 17 January 2022 - 01:24 PM

It should probably be enough to make sure the SVG is being displayed at the biggest height and width it can be.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1