Asked by:
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>
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 :
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 lineAdd 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