techwire/copyparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bbox: tweak end-of-gallery animation

Browse Source
This commit is contained in:
ed 2022-08-03 22:56:51 +02:00
parent 4e7455268a
commit 8b4cf022f2
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
copyparty/web/baguettebox.js
View File

@ -699,18 +699,12 @@ window.baguetteBox = (function () {
showOverlay(index); showOverlay(index);
return true; return true;
} }
if (index < 0) {
if (options.animation)
bounceAnimation('left');
return false; if (index < 0)
} return bounceAnimation('left');
if (index >= imagesElements.length) {
if (options.animation)
bounceAnimation('right');
return false; if (index >= imagesElements.length)
} return bounceAnimation('right');
var v = vid(); var v = vid();
if (v) { if (v) {
@ -893,10 +887,11 @@ window.baguetteBox = (function () {
} }
function bounceAnimation(direction) { function bounceAnimation(direction) {
slider.className = 'bounce-from-' + direction; slider.className = options.animation == 'slideIn' ? 'bounce-from-' + direction : 'eog';
setTimeout(function () { setTimeout(function () {
slider.className = ''; slider.className = '';
}, 400); }, 300);
return false;
} }
function updateOffset() { function updateOffset() {

10
copyparty/web/browser.css
View File

@ -1909,10 +1909,13 @@ html.y #bbox-overlay figcaption a {
transition: left .2s ease, transform .2s ease; transition: left .2s ease, transform .2s ease;
} }
.bounce-from-right { .bounce-from-right {
animation: bounceFromRight .4s ease-out; animation: bounceFromRight .3s ease-out;
} }
.bounce-from-left { .bounce-from-left {
animation: bounceFromLeft .4s ease-out; animation: bounceFromLeft .3s ease-out;
}
.eog {
animation: eog .2s;
} }
@keyframes bounceFromRight { @keyframes bounceFromRight {
0% {margin-left: 0} 0% {margin-left: 0}
@ -1924,6 +1927,9 @@ html.y #bbox-overlay figcaption a {
50% {margin-left: 30px} 50% {margin-left: 30px}
100% {margin-left: 0} 100% {margin-left: 0}
} }
@keyframes eog {
0% {filter: brightness(1.5)}
}
#bbox-next, #bbox-next,
#bbox-prev { #bbox-prev {
top: 50%; top: 50%;