Functionality:
Have created a simple browsing page navigation function. This is how the function should work:
1.) When a user click a "Start" button in page1, it will navigate the user to the 2nd page
2.) 2nd page is a games page whereby, upon navigation from the 1st page, a starting countdown timer will automatically display to notify the user that the game is starting in 3 seconds. Therefore, the display upon being navigated to page 2 should have 4 separate slides, each slides will display '3', '2', '1' and 'start'.
Hence I would like to ask for help how can I incorporate the fade-in counter code into my existing <script>
??
Thanks
Code:
function fadeInCounter() { // Define "slides" and the "state" of the animation. var State = "Start1"; // Global parameters for text. textSize(20); fill(139, 69, 19); var draw = function() { // Slide 1. if (State === "Start1") { background(205, 201, 201); text("3", 200, 200); Slide1 -= 5; if (Slide1 <= 0) { background(205, 201, 201); State = "Start2"; } } // Slide 2. if (State === "Start2") { background(205, 201, 201); text("2", 200, 200); Slide2 -= 5; if (Slide2 <= 0) { background(205, 201, 201); State = "Start3"; } } // Slide 3. if (State === "Start3") { background(205, 201, 201); text("1", 200, 200); Slide3 -= 5; if (Slide3 <= 0) { background(205, 201, 201); State = "End"; } } // Ending frame. if (State === "End") { background(205, 201, 201); text("Start.", 180, 200); } }; }
<div id="page2" class="img-wrapper" align="center" style=" position: relative; background-image: url(Image/Page2.png); background-repeat: no-repeat; display: none; width: 100%;height: 100%;"> <div id="fadeinCountDown"></div> <canvas id="canvas" width="300" height="300"> </canvas> <canvas id="Counter" width="300" height="300"> </canvas> <img id="roller" style="position:relative; top:1250px;" src="Image/Roller.png"> <img id="scroll" style="position:absolute; top: 1250px; left: 380px; overflow-y: auto;" src="Image/Scroll.png"> </div>
Following is a fade in/out timer. JSFiddle .
Also I have taken liberty to use single div instead of multiple divs.
var count = 3; function updateTimer(){ if(count > 0){ $("#content").fadeOut('slow', function(){ $("#content").text(count); $("#content").fadeIn(); count--; }); } else if(count == 0){ $("#content").fadeOut('slow', function(){ $("#content").text("Start"); $("#content").fadeIn(); count--; }); } else { $("#content").fadeOut(); clearInterval(interval); } } var interval = setInterval(function(){updateTimer()},2000)
#content{ font-size:26px; color:red; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="content"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.