bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better doleance transition #2233

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2024-01-09 22:27:39 +01:00
parent 510ca72d0a
commit 89889df66c
3 changed files with 102 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/assets/main.scss
View File

@@ -662,25 +662,80 @@ body{
}
nav.doleance-switch{
position: fixed;
pointer-events: none;
overflow: hidden;
top: 0; left: 0;
width: calc(100vw - $cartouch_width - 0.5rem);
height: 100vh;
div{
pointer-events: all;
$height:60vh;
position: fixed;
position: absolute;
top: calc((100vh - $height) * 0.51);
cursor: pointer;
width:150px;
width:605px;
height: $height;
background-image: url(../assets/cercle_politique.png);
background-size: cover;
&:hover{
visibility: hidden;
&.visible{
visibility: visible;
}
&:hover:not(.animeleft):not(.animeright){
background-image: url(../assets/cercle_politique-hover.png);
}
&.prev{
left: 0rem;
left: calc(-605px + 150px);
background-position: right;
}
&.next{
right:calc($cartouch_width + 0.5rem);
right:calc(-605px + 150px);
}
transition: opacity 1s ease-in-out;
transform: translateX(0);
&.animeleft,
&.animeright{
// animation-duration: 1.5s;
transition: opacity 1s ease-in-out,transform 1s ease-in-out;
opacity: 0;
}
&.animeleft{
// animation-name: animeleft;
transform: translateX(calc(-100vw / 2));
}
&.animeright{
// animation-name: animeright;
transform: translateX(calc(100vw / 2));
}
// @keyframes animeleft {
// from {
// transform: translateX(0);
// opacity: 1;
// }
// to {
// transform: translateX(calc(-100vw / 2));
// opacity: 0;
// }
// }
// @keyframes animeright {
// from {
// transform: translateX(0);
// opacity: 1;
// }
// to {
// transform: translateX(calc(100vw / 2));
// opacity: 0;
// }
// }
}
}