Need to pause a scroll for several seconds and then resume RSS

• • Reply
  baldwinjohn

  Member

  4 Points

  66 Posts

  Need to pause a scroll for several seconds and then resume

  Sep 29, 2016 03:40 PM|baldwinjohn|LINK

  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;
   position: fixed;
   top:690px;
   left:5px;
   background: yellow;
   color: orange;
   font-size:20px;
   border: 1px solid orange;
  }
  .scroll-up p {
   position: absolute;
   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>

  
   

• • Reply
  Jean Sun

  Contributor

  6490 Points

  2525 Posts

  Re: Need to pause a scroll for several seconds and then resume

  Sep 30, 2016 07:33 AM|Jean Sun|LINK

  Hi baldwinjohn,

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  baldwinjohn

  Member

  4 Points

  66 Posts

  Re: Need to pause a scroll for several seconds and then resume

  Oct 06, 2016 03:34 PM|baldwinjohn|LINK

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

• • Reply
  Jean Sun

  Contributor

  6490 Points

  2525 Posts

  Re: Need to pause a scroll for several seconds and then resume

  Oct 07, 2016 06:12 AM|Jean Sun|LINK

  Hi Baldwinjohn,

  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

   

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  baldwinjohn

  Member

  4 Points

  66 Posts

  Re: Need to pause a scroll for several seconds and then resume

  Oct 07, 2016 12:20 PM|baldwinjohn|LINK

  Still not pausing unfortunately.

• • Reply
  Jean Sun

  Contributor

  6490 Points

  2525 Posts

  Re: Need to pause a scroll for several seconds and then resume

  Oct 10, 2016 07:12 AM|Jean Sun|LINK

  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;
   position: fixed;
   top:0px;
   left:5px;
   background: yellow;
   color: orange;
   font-size:20px;
   border: 1px solid orange;
  }

  Best Regards,

  Jean

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  baldwinjohn

  Member

  4 Points

  66 Posts

  Re: Need to pause a scroll for several seconds and then resume

  Nov 10, 2016 01:07 PM|baldwinjohn|LINK

  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>