fade in/out text on scroll

This topic has 8 replies, 3 voices, and was last updated 5 years ago by Yuri Kovelenov.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
2020-12-15 at 12:50 pm #36519

thorsten moehle
Customer

Hi There

i tried several approaches to fade in and out text, depending on scroll

if scroll <50 hidden
if scroll >50 and <200 text fade in and stays visible
if scroll > 200 text fades out and stays hidden

Has someone made this and might could give me a example?

Thank you very much.

Something like this css:

.fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}

2020-12-16 at 10:35 am #36571

Yuri Kovelenov
Staff

Hi,

you might take a look at our latest scrolling tutorial on YT

Chief 3D Verger | LinkedIn | X

2020-12-16 at 11:08 am #36575

thorsten moehle
Customer

Hi

Yes i watched it but what i need is to fade in/out the scroll text

also tried to execute on Frame xx the java script (i loaded j query in the head of the document)

$(document).ready(function () {
$(“#xx”).fadeIn();
});

But this seems not to work either…?

2020-12-16 at 11:20 am #36586

Yuri Kovelenov
Staff

You might use the CSS property opacity, which you can set using the set style puzzle (instead of animation frame as in that video).

Chief 3D Verger | LinkedIn | X

2020-12-16 at 11:34 am #36589

thorsten moehle
Customer

Hi Yuri thank you for the fast reply.
i tried the css bot it was not working with the scroll amount?

.fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}

2020-12-16 at 11:40 am #36591

Mikhail Luzyanin
Staff

You need to translate scroll value to opacity value from 0 to 1 using Map Range puzzle (you can find it in the library).

Co-founder and lead graphics specialist at Soft8Soft.

2020-12-16 at 11:52 am #36594
thorsten moehle
Customer
Just tried (still no luck)

in the css i have the rule:
.P_14 {
opacity: 0;
position: absolute;
top: 400px;
}
in verge:
Attachments:
1. verge.jpg
2020-12-16 at 3:26 pm #36610

thorsten moehle
Customer

Hi There
Could solve the problem

CSS property opacity was the key bat had to use id’s for collection of several text boxes.

Thank you guys for the fast responses!

2020-12-17 at 6:06 am #36620

Yuri Kovelenov
Staff

glad you worked it out!

Chief 3D Verger | LinkedIn | X
Author

Posts