studio-variable/world-game
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

animation rendu plus responsif pour s'assurer qu'une image ne soit jamais trop grand par rapport à .gallery-animation
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
Details

Browse source
This commit is contained in:
antonin gallon 2026-02-05 16:40:40 +01:00
parent c4eb79cb79
commit c4456d587c
19 changed files with 430 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

29
test_anim/style.css
View file

@ -3,13 +3,16 @@ body {
min-height: 100vh;
}
.gallery-animation {
--gap: 40px;
--gap: 20px;
--half-gap: calc(var(--gap) / 2);
--vertical-wrapper-width: 900px;
--shadow-diffusion: 10px;
--shadow-diffusion: 5px;
--gallery-animation-width: 40vw;
--max-portion : 0.7;
position: fixed;
top: 0;
left: 0;
width: 40vw;
width: var(--gallery-animation-width);
height: 100vh;
overflow: hidden;
}
@ -21,6 +24,7 @@ body {
width: 100%;
height: 100%;
display: flex;
background-color: green;
}
.gallery-animation__track {
@ -49,7 +53,7 @@ body {
}
.gallery-animation--vertical .gallery-animation__column {
width: 100%;
width: min(100%, calc(var(--gallery-animation-width) * var(--max-portion)));
display: flex;
flex-direction: column;
align-items: stretch;
@ -60,14 +64,15 @@ body {
flex-direction: column;
align-items: stretch;
width: 100%;
padding-inline: calc(var(--gap) / 2);
padding-inline: var(--half-gap);
}
.gallery-animation--vertical .gallery-animation__image {
width: 100%;
height: auto;
/* height: calc(100vh * var(--max-portion)); */ /* */
object-fit: contain;
margin-block: calc(var(--gap) / 2);
margin-block: var(--half-gap);
}
/* Animations verticales */
@ -96,11 +101,13 @@ body {
.gallery-animation--horizontal .gallery-animation__wrapper {
flex-direction: column;
padding: var(--gap) 0;
padding: var(--half-gap) 0;
height: auto;
}
.gallery-animation--horizontal .gallery-animation__column {
flex: 1;
--gallery-animation__wrapper-inner-height: calc(100vh - var(--half-gap) * 2) ;
height: clamp(calc(var(--gallery-animation__wrapper-inner-height) / 5), calc(var(--gallery-animation-width) / 2), calc(var(--gallery-animation__wrapper-inner-height) / 3));
display: flex;
flex-direction: row;
align-items: stretch;
@ -111,14 +118,14 @@ body {
flex-direction: row;
align-items: stretch;
height: 100%;
padding-block: calc(var(--gap) / 2);
padding-block: var(--half-gap);
}
.gallery-animation--horizontal .gallery-animation__image {
height: 100%;
height: 100%;
width: auto;
object-fit: contain;
margin-inline: calc(var(--gap) / 2);
margin-inline: var(--half-gap);
}
/* Animations horizontales */