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
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
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;
});
};
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
Hello!
Thanks, @russian-dima & @ahmadnasriya for your help. I will try your methods to see what is best for me.
Arthur
Nice idea! I did not think about that. Seems to be a cool function, regarding the code.
@russian-dima Thank you Even though I had a JS typo and you didn’t notice it
@arthurvalatin You’re welcome, happy to help
@ahmadnasriya
I just flew over the code, i did not test it xD
I should have been more careful , too late.
@russian-dima yup, you won’t get away with it