locked
Need to pause a scroll for several seconds and then resume RRS feed

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


     

    Thursday, September 29, 2016 3:40 PM

All replies

  • 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

    Friday, September 30, 2016 7:33 AM
  • 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.

    Thursday, October 6, 2016 3:34 PM
  • 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

     

    Friday, October 7, 2016 6:12 AM
  • User1016820894 posted

    Still not pausing unfortunately.

    Friday, October 7, 2016 12:20 PM
  • 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

    Monday, October 10, 2016 7:12 AM
  • 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>

    Thursday, November 10, 2016 1:07 PM