Skip to content

Commit 6a1478e

Browse files
Ahhj93Ahhj93
authored
✨ Scroll reveal et transition inter-page (#91)
1 parent 88d8774 commit 6a1478e

File tree

11 files changed

+135
-34
lines changed

11 files changed

+135
-34
lines changed

‎main.py‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,13 @@ def server_static_css(filepath):
375375
"""
376376
return static_file(filepath, root="static/css/")
377377

378+
@route("/js/<filepath:path>")
379+
def server_static_js(filepath):
380+
"""
381+
Function used to display js files.
382+
"""
383+
return static_file(filepath, root="static/js/")
384+
378385

379386
run(host="0.0.0.0", port=80)
380387
# run(host='localhost', port=8080, debug=True)

‎static/css/keyframes.css‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,22 @@
4545
}
4646

4747
@keyframes slideOutOverlay {
48-
0% {
48+
0%, 20% {
4949
transform: translateY(0);
5050
}
5151

52-
20% {
53-
transform: translateY(0);
52+
100% {
53+
transform: translateY(-100%);
54+
}
55+
}
56+
57+
@keyframes slideInOverlay {
58+
0%, 20% {
59+
transform: translateY(100%);
5460
}
5561

5662
100% {
57-
transform: translateY(-100%);
63+
transform: translateY(0);
5864
}
5965
}
6066

‎static/css/style.css‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,30 @@ main h2 {
5959
margin: 0;
6060
}
6161

62+
#overlay {
63+
position: fixed;
64+
top: 0;
65+
left: 0;
66+
width: 100%;
67+
height: 100%;
68+
z-index: 9999;
69+
background-color: var(--purple);
70+
}
71+
72+
.overflow-hidden {
73+
overflow: hidden;
74+
}
75+
76+
.slide-out-overlay {
77+
transform: translateY(-100%);
78+
animation: 1s slideOutOverlay;
79+
}
80+
81+
.slide-in-overlay {
82+
transform: translateY(0%);
83+
animation: 1s slideInOverlay;
84+
}
85+
6286
.content {
6387
display: flex;
6488
flex-direction: column;
@@ -237,7 +261,6 @@ footer .liens {
237261
height: 100%;
238262

239263
position: relative;
240-
animation: 1s ease-out 0s 1 slideIn;
241264
/* Firefox */
242265
-moz-transition: all 0.2s;
243266
/* WebKit */
@@ -352,10 +375,6 @@ footer .liens {
352375
height: 100%;
353376
}
354377

355-
.grid-item-container:hover {
356-
transform: scale(1.02);
357-
}
358-
359378
/* Fin de Grille */
360379

361380
/* Fils d'ariane */
@@ -391,18 +410,6 @@ nav span {
391410
font-size: 40px;
392411
}
393412

394-
.overlay {
395-
position: fixed;
396-
top: 0;
397-
left: 0;
398-
width: 100%;
399-
height: 100%;
400-
z-index: 9999;
401-
background-color: var(--purple);
402-
transform: translateY(-100%);
403-
animation: 1s slideOutOverlay;
404-
}
405-
406413
.loupe {
407414
position: absolute;
408415
animation: 4s infinite alternate animation-loupe;

‎static/html/404.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
</head>
1717

1818
<body>
19+
<div id="overlay" class="slide-out-overlay"></div>
1920
<!-- Ajouter un en-tête avec un logo svg avec le texte "Marmit@" et une barre de recherche -->
2021
<header>
2122
<a href="../">
@@ -59,5 +60,7 @@
5960
</div>
6061
</footer>
6162

62-
<div class="overlay"></div>
63+
<script src="https://unpkg.com/scrollreveal"></script>
64+
<script src="/js/main.js"></script>
65+
6366
</body>

‎static/html/contact.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
</head>
1717

1818
<body>
19+
<div id="overlay" class="slide-out-overlay"></div>
1920
<!-- Ajouter un en-tête avec un logo svg avec le texte "Marmit@" et une barre de recherche -->
2021
<header>
2122
<a href="../">
@@ -62,5 +63,7 @@ <h2>Contacts GitHub</h2>
6263
</div>
6364
</footer>
6465

65-
<div class="overlay"></div>
66+
<script src="https://unpkg.com/scrollreveal"></script>
67+
<script src="/js/main.js"></script>
68+
6669
</body>

‎static/html/mentions.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
</head>
1717

1818
<body>
19+
<div id="overlay" class="slide-out-overlay"></div>
1920
<!-- Ajouter un en-tête avec un logo svg avec le texte "Marmit@" et une barre de recherche -->
2021
<header>
2122
<a href="../">
@@ -73,5 +74,7 @@
7374
</div>
7475
</footer>
7576

76-
<div class="overlay"></div>
77+
<script src="https://unpkg.com/scrollreveal"></script>
78+
<script src="/js/main.js"></script>
79+
7780
</body>

‎static/js/main.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
document.onreadystatechange = function () {
2+
if (document.readyState !== "complete") {
3+
document.querySelector("body").style.visibility = "hidden";
4+
document.querySelector("#overlay").style.visibility = "visible";
5+
} else {
6+
document.querySelector("body").style.visibility = "visible";
7+
playAnimation();
8+
revealTitles();
9+
setupHoverTransitions();
10+
}
11+
};
12+
13+
function revealTitles() {
14+
ScrollReveal().reveal('.grid-item-container', {
15+
delay: 0,
16+
duration: 800,
17+
distance: '20px',
18+
origin: 'bottom',
19+
easing: 'ease-out',
20+
interval: 100,
21+
});
22+
}
23+
24+
function playAnimation() {
25+
document.querySelector("#overlay").classList.add("slide-out-overlay");
26+
}
27+
28+
function setupHoverTransitions() {
29+
var gridItemContainers = document.querySelectorAll('.grid-item-container');
30+
31+
gridItemContainers.forEach(function (container) {
32+
container.addEventListener('mouseover', function () {
33+
this.style.transitionDuration = '0.2s';
34+
this.style.transform = 'scale(1.02)';
35+
});
36+
37+
container.addEventListener('mouseout', function () {
38+
this.style.transitionDuration = '0.2s';
39+
this.style.transform = 'scale(1)';
40+
});
41+
});
42+
}
43+
44+
document.addEventListener("DOMContentLoaded", function () {
45+
var links = document.querySelectorAll("a");
46+
47+
links.forEach(function (link) {
48+
link.addEventListener("click", function (event) {
49+
event.preventDefault();
50+
var overlay = document.querySelector("#overlay");
51+
overlay.classList.add("slide-in-overlay");
52+
53+
overlay.addEventListener("animationend", function () {
54+
window.location.href = link.href;
55+
});
56+
});
57+
});
58+
});

‎template/accueil.tpl‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
</head>
5656

5757
<body>
58+
<div id="overlay"></div>
5859
<!-- Ajouter un en-tête avec un logo svg avec le texte "Marmit@" et une barre de recherche -->
5960
<header>
6061
<a href="../">
@@ -82,9 +83,9 @@
8283
%for famille in listeFamille:
8384
<a href="famille?id={{famille.famille_id}}">
8485
<div class="grid-item-container">
85-
<div class="img-overlay"></div>
86-
<img src="{{famille.image}}" class="grid-item" alt="Image {{famille.nom}}">
87-
<span class="grid-item-text">{{famille.nom}}</span>
86+
<div class="img-overlay"></div>
87+
<img src="{{famille.image}}" class="grid-item" alt="Image {{famille.nom}}">
88+
<span class="grid-item-text">{{famille.nom}}</span>
8889
</div>
8990
</a>
9091
%end
@@ -109,5 +110,7 @@
109110
</div>
110111
</footer>
111112

112-
<div class="overlay"></div>
113+
<script src="https://unpkg.com/scrollreveal"></script>
114+
<script src="/js/main.js"></script>
115+
113116
</body>

‎template/chercheRecettes.tpl‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
</head>
1717

1818
<body>
19+
<div id="overlay" class="slide-out-overlay"></div>
1920
<!-- Ajouter un en-tête avec un logo svg avec le texte "Marmit@" et une barre de recherche -->
2021
<header>
2122
<a href="../">
@@ -76,4 +77,8 @@
7677
</footer>
7778

7879
<div class="overlay"></div>
80+
81+
<script src="https://unpkg.com/scrollreveal"></script>
82+
<script src="/js/main.js"></script>
83+
7984
</body>

‎template/famille.tpl‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
</head>
1717

1818
<body>
19+
<div id="overlay" class="slide-out-overlay"></div>
1920
<!-- Ajouter un en-tête avec un logo svg avec le texte "Marmit@" et une barre de recherche -->
2021
<header>
2122
<a href="../">
@@ -36,9 +37,9 @@
3637
%for recette in listeRecettes:
3738
<a href="recettes/{{recette.recette_id}}">
3839
<div class="grid-item-container">
39-
<div class="img-overlay"></div>
40-
<img src="{{recette.image}}" class="grid-item" alt="Image {{recette.nom}}">
41-
<span class="grid-item-text">{{recette.nom}}</span>
40+
<div class="img-overlay"></div>
41+
<img src="{{recette.image}}" class="grid-item" alt="Image {{recette.nom}}">
42+
<span class="grid-item-text">{{recette.nom}}</span>
4243
</div>
4344
</a>
4445
%end
@@ -63,5 +64,7 @@
6364
</div>
6465
</footer>
6566

66-
<div class="overlay"></div>
67+
<script src="https://unpkg.com/scrollreveal"></script>
68+
<script src="/js/main.js"></script>
69+
6770
</body>

0 commit comments

Comments
 (0)