Page transition when clicking a button

Question

I created a landing page where an image will fade on into the screen, then a user can press the arrow, and it will bring them to a different page with more content.

What my goal is, is to get it so that when the user presses the button, the new page slides in to view.

I found an example of what I wanted here: https://tympanus.net/Development/PageTransitions/

I would like to use the "Move to left / from right" transition.... I tried downloading the source file from this website and figuring out how to implement their code into mine, but I was really confused... Does anyone have any suggestions as to how to get this transition to work? I would like to keep it strictly HTML/CS/Java/JQ....

Thanks

 * { margin: 0; padding: 0; } .fade-in { animation: animationFrames ease 1s; animation-iteration-count: 1; transform-origin: 50% 50%; animation-fill-mode: forwards; /*when the spec is finished*/ -webkit-animation: animationFrames ease 1s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: animationFrames ease 1s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -moz-animation-fill-mode: forwards; /*FF 5+*/ -o-animation: animationFrames ease 1s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -o-animation-fill-mode: forwards; /*Not implemented yet*/ -ms-animation: animationFrames ease 1s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%; -ms-animation-fill-mode: forwards; /*IE 10+*/ } @keyframes animationFrames { 0% { opacity: 0; transform: translate(0px, -25px); } 100% { opacity: 1; transform: translate(0px, 0px); } } @-moz-keyframes animationFrames { 0% { opacity: 0; -moz-transform: translate(0px, -25px); } 100% { opacity: 1; -moz-transform: translate(0px, 0px); } } @-webkit-keyframes animationFrames { 0% { opacity: 0; -webkit-transform: translate(0px, -25px); } 100% { opacity: 1; -webkit-transform: translate(0px, 0px); } } @-o-keyframes animationFrames { 0% { opacity: 0; -o-transform: translate(0px, -25px); } 100% { opacity: 1; -o-transform: translate(0px, 0px); } } @-ms-keyframes animationFrames { 0% { opacity: 0; -ms-transform: translate(0px, -25px); } 100% { opacity: 1; -ms-transform: translate(0px, 0px); } } #showcase { background-image: url('https://images.freecreatives.com/wp-content/uploads/2016/03/Cute-Purple-Background.jpg'); background-size: cover; background-position: center; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; } #showcase h1 { font-size: 6vw; color: #fff; font-family: passion one; letter-spacing: 4vw; margin-left: 4vw; text-shadow: 2px 2px 3px #000; } #showcase h2 { font-size: 2.5vw; line-height: 2vw; color: #fff; font-family: passion one; text-shadow: 2px 2px 3px #000; } #showcase .button { font-size: 18px; text-decoration: none; color: white; padding: 10px 20px; border-radius: 10px; margin-top: 100px; background-color: darkgreen; text-shadow: 2px 2px 3px #000; } #showcase .button:hover { background-color: green; color: #fff; } .hiddendiv { display: none; width: 300px; height: 300px; background-color: green; } .button:focus+.hiddendiv { display: block; margin-left: 100px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="wrapper"> <div class="wrapper fade-in"> <header id="showcase"> <div id="background"> <h1>TITLE</h1> </div> <h2>2017</h2> <a href="landing2.html" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a> </header>

Answer 1

I implemented something similar using this jQuery plugin... http://joaopereirawd.github.io/animatedModal.js/

As you can see in the plugin documentation, you can have your new window content already created and when you click the arrow button, the plugin will make it appear using the animation you selected.

In my case I need the new window content to be generated dinamically the button is pressed, so I create a click event in that button that generates all the new window content inside of a div (and a new link that will be responsible of really triggering the animated modal), and append all to the DOM. Then I create the animatedModal element associated to the generated div, and trigger the click event in the new link with the click() function.

For your case (include the css and javascript files following the following the plugin documentation)...

HTML :

<a id="linktonewwindow" href="#newwindow" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a>

<div id="newwindow">

    <!-- IMPORTANT. Create the element to close the window!!! -->
    <button class="close-newwindow"><i class="fa fa-stop fa-fw" aria-hidden="true"></i></button>

    <div class="yournewwindowcontent">
        <!-- Put your new window content here-->
    </div>

</div>

JQUERY :

$("#linktonewwindow").animatedModal({
    modalTarget:'newwindow',
    animatedIn:'bounceInLeft', // Choose the animations you prefer
    animatedOut:'bounceOutLeft',
    color:'#999999', // Background color of the new window
    beforeOpen: function() {
    },           
    afterOpen: function() {
    }, 
    beforeClose: function() {
    }, 
    afterClose: function() {
    }
});

I hope it helps