We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

fade in/out text on scroll

Home › Forums › Puzzles › fade in/out text on scroll

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 | Twitter

    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 | Twitter

    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:
    You must be logged in to view attached files.
    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! :good:

    Chief 3D Verger | LinkedIn | Twitter

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.