How to change text sizes on view port enter?

Ask the community
,
1

Hello!
I was wondering if it is possible (and how) to change the size of texts on view port enter using code. This should make my website modern.

Thanks!
Arthur

2

You will need someting like this one…

$w.onReady(()=>{
   $w('#myElementIDhere').onVieportEnter(()=>{
      let myText = $w('#myTextElementIDhere').text
      myText = "<font style = "font-size:15px">${myText}</font>";
      $w('#myTextElementIDhere').html = myText;      
   });
};
3

Hi @arthurvalatin

There’s a way, but it doesn’t increase the size incrementally, to do so, just introduce an interval.

const getHtml = (targetSize) => {
    if (!targetSize || isNaN(targetSize) {
        targetSize = '1em'
    } else {
        targetSize = `${targetSize}em`;
    }
     
    return `<p style="font-siz:${targetSize};color:#CCCCCC;text-align:center">This is my text element</p>`
})

The above function will return an html value with the given size, now we need to call it with interval to increase the value.

let currentSize = 1;
const targetSize = 2;
let interval;

const intervalFunc = () => {
    if (currentSize < targetSize) {
        currentSize+= 0.2;
        $w('#text').html = getHtml(currentSize);        
    } else {
        clearInterval(interval);
        interval = undefined;
    }
}

Now when the text enters the viewport, assign the interval variable an interval value to increase the text.

$w('#textTrigger').onViewportEnter(() => {
    interval = setInterval(intervalFunc, 300)
})

The above code will increase the text size by 0.2em every 300ms, and will finish in 1.5sec.

Hope this helps~!
Ahmad

4

Hello!
Thanks, @russian-dima & @ahmadnasriya for your help. I will try your methods to see what is best for me.

Arthur

5

@Ahmad

Nice idea! I did not think about that. Seems to be a cool function, regarding the code.

6

@russian-dima Thank you :blush: Even though I had a JS typo and you didn’t notice it :thinking:

7

@arthurvalatin You’re welcome, happy to help :grin:

8

@ahmadnasriya
I just flew over the code, i did not test it xD :joy:
I should have been more careful :nerd_face::rofl:, too late.

9

@russian-dima yup, you won’t get away with it :joy::joy: