JE TE DEFI YUGI, BLUE EYES WHITE BLACK DRAGON BLUE

static/css/main.css

@@ -73,6 +73,8 @@ a:hover {
     background: url("../img/background-letter.jpg");
     background-size: cover;
     background-position: right;
+
+    transition: 1.5s transform 0s ease-out;
 }
 
 #logo {
@@ -139,7 +141,7 @@ a:hover {
 }
 
 .away {
-    transform: translate(-900vw, -100vh);
+    transform: translate(-200vw, -100vh) rotate(-10deg);
 }
 
 .form-group {

static/js/main.js

@@ -3,16 +3,29 @@ const base_url = "https://oss110metz.rezo-rm.fr/"
 var page = ['#main-page', '#admin-page', '#login-page', '#demande-page'];
 var historyHandler = [];
 window.onpopstate = history.onpushstate = function(e) {
-    show_page(e.state);
+    if (e.state) {
+        show_page(e.state, true);
+    } else {
+        history.back();
+    }
 };
 history.pushState("#main-page", "", "")
 
-function show_page(id) {
+function show_page(id, historyPush) {
+    //si le z-index de la nouvelle page est inférieur on fait un transi 'forward' sinon 'backward'
     for(i in page) {
-        $(page[i]).hide();
+        $(page[i]).hide().removeClass("away");
+    }
+    
+    $hs = $(history.state).show();
+    if(!historyPush)
+        $hs.addClass('away');
+    $id = $(id).show();
+    
+
+    if(!historyPush) {
+        history.pushState(id, "", "")
     }
-    $(id).show();
-    history.pushState(id, "", "")
 }
 
 $("#login-button").click(function (e) {
@@ -59,7 +72,7 @@ $(window).on("load", function() {
     }
 
     for(i in page) {
-        $(page[i]).css('z-index', i);
+        $(page[i]).css('z-index', page.length - i);
     }
 
     /* load timer */