Text "fill up" with color as enters viewpoints

Ask the community
,
1

Hello!

So, I have a the word “BLUE” on my site and it is white when static… i’d like to change the fill as the user scrolls through the screen to give the appearance that the word is “filling up” with blue. Thoughts on the best way to go about this?

Ive adapted this from another set of code, but it doesn’t quite work and I’m also not certain that this gives the effect I am looking for.

export function text55_viewportEnter(event, $w) {
	$w("#text55").html = `<h1 style = "color:blue"> ${$w("#text55").text}</h1>`;
	
}

export function text55_viewportLeave(event, $w) {
	$w("#text55").html = `<h1 style = "color:white"> ${$w("#text55").text}</h1>`;
}

The text remains white and resizes and shifts position. I know I have to do something with the html, but not sure what exactly. Am I on the right track or is there a better way to accomplish what I am trying to do? Thanks very much!

2

Hay ack,

By using

you specify the text to use the h1 theme - which is heading 1. The text will use the font, colors and size of the heading 1 theme, with an override for color as you specify - white or blue.

Because you are using onViewportEnter and onViewportLeave, while the text is in the viewport it will be blue, and while it is out of the viewport (e.g. you cannot see it) it will be white. I suggest to use an anchor for the onViewportEnter and leave in order to have fine control over when the text changes.

3

Hi Yoav,

Thanks… i ve gotten the word to “quickly change” from white to blue, but im trying to create more of a slow roll-in effect with the fill color… not such a rapid transition. also Ive custom set my text from H2 in terms of size and placement , but even though ive coded for H2 text transition the size and position of the text shift…

so, i tried it this way (see below) and that got around my text size position shift. works well, but the transition is still instant/fast … how do i slow it down to give the “filling up” effect?


 export function anchor8_viewportLeave(event, $w) {
	//Add your code for this event here: 
	$w("#text55").show();
    $w("#text87").hide();
}

export function anchor8_viewportEnter(event, $w) {
	$w("#text87").show();
    $w("#text55").hide();
   
}
4

Yoav - can you assist with direction on this? Thank you kindly!