0

So, I have a project in MVC and I want to add a introduction page to show my logo with an animation when I load the site. I want it to be timed, for example, it appears the animation and then it redirects by himself to the main page. How can I do it? Do I have to change my routes?

Diogo Teixeira
  • 91
  • 1
  • 12
  • VB6 deja vu. See [here](https://stackoverflow.com/questions/30044730/how-to-create-splash-screen-in-mvc). – Steve Greene Jun 14 '19 at 14:41
  • What would you want to happen if someone clicks a link directly to a specific page on your site? Should they still see the intro page? Should they only see the intro the first time they visit your site, or every time? – StriplingWarrior Jun 14 '19 at 14:41
  • @StriplingWarrior hmm, didnt think about that. Since its a personal project, I only need it to appear when I run the site, which means, only when I open the main page – Diogo Teixeira Jun 14 '19 at 14:47
  • @SteveGreene I didnt understand the answer to that question – Diogo Teixeira Jun 14 '19 at 14:48
  • 1
    There are lots of options for how you might go about this, and which you choose will likely depend on the specifics of your use case, which you haven't shared here. You might make your "main" page be the intro page, and have a simple JavaScript timer that forwards users to a separate landing page after a certain amount of time. Or you might use a library like [intro.js](https://introjs.com/) to throw up a tutorial of some kind the first time users visit your page. Spend some time defining what you're actually trying to do with this intro page. – StriplingWarrior Jun 14 '19 at 15:03
  • @StriplingWarrior I honesly, don't know how to do that, but I will try – Diogo Teixeira Jun 14 '19 at 15:33

1 Answers1

1

In your case you want something like a loader for your webpage so when you browse the main page it appears first, for that you have to set a div then put the z-index of it top of your main page then put sone animation in it then set a timeout to that div to disappear (display: none / opacity: 0) in a specific time for example after 5 secounds. then everything would be as you wished.

============================================================================
Here is an example of a jQuery library called
//jpreLoader
============================================================================
<!DOCTYPE html>
<html>
<head>
 <title>Pre Loader Example</title>
 <style>
#jpreOverlay,
#jpreContent {
    background-color: #f4711f;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#jpreSlide{
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
}

#jpreLoader {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
}

#jprePercentage {
    width: 50px;
    height: 50px !important;
    line-height: 50px;
    position: absolute !important;
    text-align: center;
    left: 50%;
    top: 55%;
    margin: -25px 0 0 -25px;
    z-index: 999999;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #fff;
}

#bouncer {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    margin: -60px 0 0 -40px;
    width: 70px;
    height: 70px;
    background: url(yourImage.jpeg) no-repeat;


    -webkit-animation: bounce 1s infinite forwards;
    -moz-animation: bounce 1s infinite forwards;
    -ms-animation: bounce 1s infinite forwards;
    animation: bounce 1s infinite forwards;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

 </style>
</head>
<body>
<!-- Pre Loader Section -->
<div>
  <section id="jpreContent">
    <div id="bouncer"></div>
  </section>
</div>
<!-- Intro -->
  <section id="firstPage">
    <p this is main page</p>
  </section>

<!-- Scripts -->
<!-- the main jQuery version is 2.1.0 - you can use any version that is compatible with -->
<script src="jquery.min.js" type="text/javascript"></script>
<!-- the preloader library  -->
<script src="jpreloader.min.js" type="text/javascript"></script>

<!-- this piece of code can be set in here or any external *js file -->
<script>

$(document).ready(function() {
        $('body').jpreLoader({
            splashID : "#jpreContent",
            showSplash : true,
            showPercentage : true,
            autoClose : true,
            splashFunctin: function() {
                $('#bouncer').animate({
                        'opacity' : 1
                    }, 500, 'linear'
                );
            }
        });
    });

</script>

</body>
</html>

you can find a demo and full documentation in link below: https://github.com/kennyooi/jpreloader

ArmondHIM
  • 66
  • 1
  • 7
  • That sounds pretty fine, but how do I change the css properties through JS? – Diogo Teixeira Jun 14 '19 at 15:46
  • there are different ways to change the css property in javaScript: you can do so: document.getElementById("myDIV").style.display = "none"; hope this make sense – ArmondHIM Jun 14 '19 at 15:50
  • so, for example, I create a `
    ` with a `z-index:2`. then I create a `function example { document.getElementByID("test).style.display="none"` and then `setTimeout(example, 5000);`
     – Diogo Teixeira Jun 14 '19 at 16:01
  • yes but keep in mind that you should set the position of the div in order to use z-index, then the div will be over any other layers, just in case set the z-index to '999' so you wont miss any layer bellow the Div then you should call the function to terminate that div that's all, in the example above the code is in vanilla javaScript you can make your code run easier with jQuery, it depends on your desire, it's so easy not a big deal. – ArmondHIM Jun 15 '19 at 08:55
  • if you have further problems simply write a note here then i will send you a code that you could use it on your project oherwise you can wisit the website i have mentioned obove and explore the codes inside init.js – ArmondHIM Jun 15 '19 at 09:35
  • Hey @ArmondHIM I´ve tried what you said and it doesnt disappear. Could you help me? – Diogo Teixeira Jun 17 '19 at 08:14
  • 1
    Sure I have already updated the answer obove also you can check the link i put below the answer just in case if my code does not ring any bell, i wish this would be helpful, best regards – ArmondHIM Jun 18 '19 at 09:44
  • i ve tried it and its not working, only appears a background – Diogo Teixeira Jun 18 '19 at 14:35
  • which code do you exactly tried?? have you tried to set the positions of the divs correctly? please send me a link of your code so i can examine it to see what is wrong, i have tried too many methods to tell you how to solve your problem, maybe there are other reasons so please post your project and send me the links to check – ArmondHIM Jun 18 '19 at 15:49
  • do you manage to check the demo on gitHub? maybe your jQuery main library version is different please check them too – ArmondHIM Jun 18 '19 at 16:14
  • Hey @ArmondHIM! Yeah i checked and I've tried some stuff with that code and with the one that you posted in the answer. I always have something left, that I dont know what it is. But the link that you sent me It's actually something pretty simillar to that that I want. How can I send you my project so that you can check out? Through chat? – Diogo Teixeira Jun 19 '19 at 09:16
  • simply you can put your code ( not exact the same ) or something so similar that is understandable for you and put it inside a front end development area such as code pen, because if you have some trouble even looking in the main github jspreloader demo page so i guess that there is something more than a simple problem inside your code or maybe a syntax missing, so anyway i have to see your code live inside a repository or something in order to help you my friend, i have to see what is going on in order to help you correctly, so please let me know, i will check it for you asap. – ArmondHIM Jun 19 '19 at 11:31
  • @DiogoTeixeira or you can send me your project url on a repository so i can see what is exactly going on and why you could not use that preloader correctly – ArmondHIM Jun 19 '19 at 11:38
  • thank you so much for your help. A few questions: I have a bootstrap template should i put it in the code pen aswell? My main page has 800 lines, should I put them all (maybe you want to take a look at the rest)? – Diogo Teixeira Jun 19 '19 at 13:55
  • you're very welcome, if you think it would be necessary then you should ut keep in ind that every project has its own privacy so please remove the extra codes and leave the important ones or at least put your codes somehow understandable but not in specific only the way to you and the others to understand the problem. – ArmondHIM Jun 19 '19 at 22:23