flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adapt style of Photos viewer

Browse Source 
- Change opacities
- Change photo background
- Disable image selection (prepping for a swipe)
- Fix mobile x and y offsets
This commit is contained in:
Félix Péault
2021-11-17 19:52:11 +01:00
parent 4714c111ca
commit 873c2d94ac
2 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/style/pages/_viewer-photo.scss
View File

@@ -40,10 +40,10 @@
.photo {
--opacity: 1;
--scale: 1.0;
--scale: 0.6;
--rotate: 0deg;
--offset-x: -50%;
--offset-y: -50%;
--offset-y: -30%;
position: absolute;
top: 50%;
left: 50%;
@@ -53,20 +53,18 @@
z-index: 8;
overflow: hidden;
opacity: 0;
background: $color-primary;
transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
transform-origin: top center;
cursor: default;
will-change: transform;
transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
--scale: 0.6;
--offset-x: 20%;
--offset-y: -64%;
opacity: 0;
@include bp (md) {
--scale: 0.6;
--rotate: 5deg;
--offset-x: 13%;
--offset-y: -65%;
--rotate: 5deg;
top: 50%;
left: 0;
transform-origin: bottom right;
@@ -79,24 +77,31 @@
object-fit: cover;
opacity: var(--opacity);
transform: translateZ(0);
pointer-events: none;
user-select: none;
}
// Hidden photo over
&--0 {
--scale: 1.1;
--rotate: -1deg;
--scale: 1.05;
--rotate: 0deg;
--offset-x: -50%;
--offset-y: -62.5%;
z-index: 9;
opacity: 0;
@include bp (md) {
--offset-x: -5%;
--offset-y: -45%;
--scale: 1.075;
--rotate: -1deg;
--offset-x: -4%;
--offset-y: -47.5%;
}
}
// First visible photo
&--1 {
--scale: 1;
--rotate: 0deg;
--offset-y: -50%;
opacity: 1;
box-shadow:
0 12px 12px rgba(#000, 0.15),
@@ -152,7 +157,7 @@
}
&--5 {
--scale: 0.68;
--opacity: 0.3;
--opacity: 0.25;
--offset-y: -1.5%;
z-index: 4;
opacity: 1;
@@ -165,7 +170,7 @@
}
}
&--6 {
--opacity: 0.3;
--opacity: 0.25;
z-index: 3;
opacity: 0;
}