Need to pause a scroll for several seconds and then resume

Question

User1016820894 posted

I have set up a vertical scroll area using css div (code below). It works fine except that I would like to pause each line of text for several seconds before seeing the next line  (the scroll area is sized to see one line at a time). How can I make it pause?

.scroll-up {
 height: 25px;
 width:1000px;	
 overflow: hidden;
 ;
 top:690px;
 left:5px;
 background: yellow;
 color: orange;
 font-size:20px;
 border: 1px solid orange;
}
.scroll-up p {
 ;
 width: 1000px;
 height: 150px;
 margin: 0;
 line-height: 50px;
 text-align: left;
 /* Starting position */
 -moz-transform:translateY(100%);
 -webkit-transform:translateY(100%);	
 transform:translateY(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-up 25s linear infinite;
 -webkit-animation: scroll-up 25s linear infinite;
 animation: scroll-up 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
 0%   { -moz-transform: translateY(100%); }
 100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
 0%   { -webkit-transform: translateY(100%); }
 100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
 0%   { 
 -moz-transform: translateY(100%); /* Browser bug fix */
 -webkit-transform: translateY(100%); /* Browser bug fix */
 transform: translateY(100%); 		
 }
 100% { 
 -moz-transform: translateY(-100%); /* Browser bug fix */
 -webkit-transform: translateY(-100%); /* Browser bug fix */
 transform: translateY(-100%); 
 }



<div class="scroll-up">
<p>Line 1 </p>
<p>Line 2</p>
<p>Line 3</p>
</div>

 

Answer 1

User1771544211 posted

Hi baldwinjohn,

I would like to pause each line of text for several seconds before seeing the next line  (the scroll area is sized to see one line at a time). How can I make it pause?

Based on my understanding, there's no css attribute can pause the animation. You may need to use javascript to achieve this.

<div class="scroll-up">
    <p id="Test">Line 1 </p>
    <p>Line 2</p>
    <p>Line 3</p>
</div>
<script>
    var x = document.getElementById("Test");

    function myFunction() {
        var animateobj = this;
        this.style.animationPlayState = "paused";
        setTimeout(function () {
            animateobj.style.animationPlayState = "running";
        }, 2000); 
    }

    x.addEventListener("animationiteration", myFunction);
</script>

Reference Links :

animationend Event

CSS3 animation-play-state Property

Best Regards,

Jean

Answer 2

User1016820894 posted

I put that code in verbatim but it doesn't appear to be pausing the first line. I did increase the timeout to 10000.

Answer 3

User1771544211 posted

Hi Baldwinjohn,

I put that code in verbatim but it doesn't appear to be pausing the first line

Add the following code and try again.

x.addEventListener("animationstart", myFunction);

This will call myFunction when the animation starts at the first time.

Best Regards,

Jean

 

Answer 4

User1016820894 posted

Still not pausing unfortunately.

Answer 5

User1771544211 posted

Hi baldwinjohn,

It seems that the scroll area is not matching the start position of the animation, please make the area more larger.

.scroll-up {
 height: 1000px;
 width:1000px;	
 overflow: hidden;
 ;
 top:0px;
 left:5px;
 background: yellow;
 color: orange;
 font-size:20px;
 border: 1px solid orange;
}

Best Regards,

Jean

Answer 6

User1016820894 posted

Another question. When the page is first displayed it takes several seconds for the first text to display. How can I set it so that it comes up immediately?

<div class="scroll-up" id="scroll_Eng" runat="server">
  <div id="changeText" ></div>
    <script type="text/javascript">
        var text = ["Motivating the Mind and Body through Dynamic Groups", "Focused on Energy, Movement, and Renewal.", "Complementing Therapy and Cultivating Good Physical Health and Mental Wellbeing."];
    var counter = 0;
    var elem = document.getElementById("changeText");
    setInterval(change, 6000);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }
    </script>
</div>