TheNuttyStudent TheNuttyStudent - 1 month ago 11
CSS Question

Check when text is at specific position

I have text inside a div that scrolls down using the jquery marquee plugin. It sort of acts as an introduction to a project I'm working on. I want to reveal that project to the user as soon as the text in the div is completely done scrolling.

How can I know when the text is completely gone from the screen? How do I get its position?

PS: Before you think you know how it should work. Can you try it out yourself using my code in the snippet?



/*INTRO*/
$('#intro').marquee({
duration: 15000,
gap: 5,
delayBeforeStart: 0,
direction: 'down',
pauseOnHover: true,
duplicated: false
});

#intro{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: absolute;
opacity: 0.5;
font-size: 140%;
text-align: center;
height: 200%;
top: -20%;
left: 7%;
padding-left:15%;
padding-right:15%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js'></script>
<div id="intro"><p><b><i>THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING</i></p></div>





Here's a fiddle of it as well.

Answer

You can use the finished event on your $('#intro'), like so

$('#intro').on('finished', function () {
    alert('Text done scrolling');
});

Updated Fiddle

UPDATE:

Hey also if you want to show something right after you can destroy the marquee in order to stop it from continuous rotation and therefore memory consumption on the client side.

So i've updated the fiddle to show how that could work, but the changes are minor:

HTMl:

  <div id="intro"><p><b><i>THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING</i></b></p></div>

  <div id="project">
    <h1>
      Project here
    </h1>
  </div>

Additional CSS:

#project {
  display: none;
}

#project.active {
  display: block;
}

Finally the JS:

/*INTRO*/
    $('#intro')
    .bind('finished', function(){
                console.log('has finished');
                //Change text to something else after first loop finishes
        $(this).marquee('destroy'); // I thought it would remove the element, but it just stop the marquee
        $(this).hide(); // So perhaps hide you would like to hide it.
        //Show project
        $('#project').addClass('active');
    })
    .marquee({
        duration: 15000,
        gap: 5,
        delayBeforeStart: 0,
        direction: 'down',
        pauseOnHover: true,
        duplicated: false
    });