zoom text by mouse scroll

Ask the community
,
1

I want to add a text animation to my page when the user scrolls down the page the text becomes bigger, how to zoom in a text by scrolling the page what function I should use
I have used onViewportEnter() function but it zooms the text automatically, I want to zoom the text by scrolling

2

In order to do it you’d have to either crate a text element in an iframe (embedded widget) or in a custom element.
iframe will be the shorter way but it’s a little bit more limited (if the size had to be fully responsive depends on screen size).

example (iframe):

<!DOCTYPE html>
<html>
<body>
<p id="scalable-text" style="text-align:center;font-size:14px;">ABCDEFG</p>
<script>
document.body.addEventListener('wheel', scaleText);
function scaleText(event){
const text = document.getElementById('scalable-text');
const [minInPx, maxInPx]  = [10,45];
const currentSize = text.style.fontSize;
const newSizeInPx = Number(text.style['font-size'].split('px')[0]) +  2 * event.deltaY / Math.abs(event.deltaY);
if(newSizeInPx >= minInPx && newSizeInPx <= maxInPx){
text.style['font-size'] =  newSizeInPx + 'px';
}
}
</script>
</body>
</html>