-
Posts
75 -
Joined
-
Last visited
WillMyers's Achievements
-
Hi Will,
I've used your code snippet for gallery transitions and I'm now trying to add an image pan. This is what I've hacked together but I'm kinda clueless on keyframes. The "pan" is working on screen, but I don't know how to add a fade inbetween each image transition. I just want the images to scroll/pan slowly and fade/transition to the next image...continuously.
the site is ljla.squarespace.com, pw:LJLA
.gallery-fullscreen-slideshow-list {
overflow: hidden;
}
.gallery-fullscreen-slideshow-item {
scale: 1.1;
}#sections .gallery-fullscreen-slideshow[data-transition="fade"] {
--duration: 10s;
figure,
.gallery-fullscreen-slideshow-item-src{
opacity:1;
}
.gallery-fullscreen-slideshow-item{
visibility: visible;
}
figure:last-child {
animation: fadeIn var(--duration, 5s) ease;
}@keyframes fadeIn {
90% {
transform: translate3d(-80px, 0px, 0px);
}100% {
transform: translate3d(-60px, 0px, 0px);
}
}
}