etoiledebethleem/website
4
1
Fork 0
Code Issues 5 Pull requests 1 Projects 1 Releases Packages Activity Actions

Compare commits

base: etoiledebethleem:9c655506054926fbbfc356141a9309732175aab5
Branches Tags
etoiledebethleem:master
etoiledebethleem:develop
etoiledebethleem:fb_add_article_visite_fev_2023
etoiledebethleem:fb_initial_landing_page
etoiledebethleem:fb_countdown
etoiledebethleem:temporar-branch-contactform
etoiledebethleem:GZod01
..
compare: etoiledebethleem:2ee7f2732af8aecb86042a1e7a906b74466fea8f
Branches Tags
etoiledebethleem:develop
etoiledebethleem:master
etoiledebethleem:fb_add_article_visite_fev_2023
etoiledebethleem:fb_initial_landing_page
etoiledebethleem:fb_countdown
etoiledebethleem:temporar-branch-contactform
etoiledebethleem:GZod01

2 commits
9c65550605 ... 2ee7f2732a

Author SHA1 Message Date
Gzod01
2ee7f2732a Merge pull request 'feat: compare animation' (#2) from fb_initial_landing_page into master 
Reviewed-on: #2
 2023-05-27 17:43:34 +02:00
Matthieu Bessat
3b7d7f2a62 feat: compare animation 2023-05-27 17:28:51 +02:00
2 changed files with 63 additions and 11 deletions
Show stats Expand all files Collapse all files

39
assets/sass/landing.scss
View file

@ -106,8 +106,46 @@
} }
} }
@keyframes compare-anim {
0% {
clip-path: inset(100% 100% 100% 0%);
}
100% {
clip-path: inset(100% 100% 100% 100%);
}
}
.compare-items-dynamic {
.compare-duet {
overflow: hidden;
position: relative;
.compare-hidden {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
clip-path: inset(100% 100% 100% 0%);
}
}
.compare-duet:hover {
.compare-hidden {
animation: compare-anim 2s cubic-bezier(.86,0,.07,1);
animation-fill-mode: forwards;
}
}
}
} }
@media (max-width: $sm-breakpoint) {
.compare-section {
.compare-items {
grid-template-columns: 1fr;
}
}
}
.history-summary { .history-summary {
display: grid; display: grid;
grid-template-columns: 3fr 1fr; grid-template-columns: 3fr 1fr;
@ -125,3 +163,4 @@
border-bottom: 1px solid rgba(1, 1, 1, 0.2); border-bottom: 1px solid rgba(1, 1, 1, 0.2);
} }
} }

35
layouts/landing-matthieu/list.html
View file

@ -61,25 +61,38 @@
<section class="compare-section"> <section class="compare-section">
<div class="page-container"> <div class="page-container">
<h2>Un petit bout de palestine en Normandie...</h2> <h2>Un petit bout de palestine en Normandie...</h2>
<div class="compare-items"> <div class="compare-items compare-items-dynamic">
<div class="compare-item"> <div class="compare-item compare-east">
<figure> <figure>
{{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }} <div class="compare-duet">
<img class="compare-aubevoye" src="{{ $image.RelPermalink }}" /> <div class="compare-hidden">
{{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
{{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }} <div class="compare-shown">
<img class="compare-judee" src="{{ $image.RelPermalink }}" /> {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
</div>
<figcaption>Comparaison crypte vers l'est</figcaption> <figcaption>Comparaison crypte vers l'est</figcaption>
</figure> </figure>
</div> </div>
<div class="compare-item"> <div class="compare-item compare-west">
<figure> <figure>
{{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }} <div class="compare-duet">
<img class="compare-aubevoye" src="{{ $image.RelPermalink }}" /> <div class="compare-hidden">
{{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
{{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }} <div class="compare-shown">
<img class="compare-judee" src="{{ $image.RelPermalink }}" /> {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
</div>
<figcaption>Comparaison crypte vers l'ouest</figcaption> <figcaption>Comparaison crypte vers l'ouest</figcaption>
</figure> </figure>
</figure> </figure>