simplified lazy loading placeholder animation

nk-crew · Sep 26, 2023 · 1561cdb · 1561cdb
1 parent 915f2bc
commit 1561cdb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 34 deletions.
diff --git a/src/assets/css/_variables-lazyload.scss b/src/assets/css/_variables-lazyload.scss
@@ -4,10 +4,9 @@
 
 :root {
   // Lazy.
-  --vp-lazyload-images__background: linear-gradient(270deg, rgba(140, 140, 140, 15%), rgba(140, 140, 140, 5%));
-  --vp-lazyload-images__background-second: linear-gradient(90deg, rgba(140, 140, 140, 15%), rgba(140, 140, 140, 5%));
-  --vp-lazyload-images__animation-duration: 1.5s;
-  --vp-lazyload-images__animation-second-delay: 0.3s;
+  --vp-lazyload-images__background: linear-gradient(270deg, rgba(140, 140, 140, 15%), rgba(140, 140, 140, 5%), rgba(140, 140, 140, 5%), rgba(140, 140, 140, 15%));
+  --vp-lazyload-images__background-size: 400% 100%;
+  --vp-lazyload-images__animation-duration: 7s;
 
   // Transitions.
   --vp-lazyload-transition-duration: 0.3s;

diff --git a/src/assets/css/lazyload-fallback.scss b/src/assets/css/lazyload-fallback.scss
@@ -5,8 +5,7 @@
 :is(.vp-portfolio__item-img, .vp-portfolio__thumbnail-img) {
   // Extra check for lazy loading class on the inner image
   // to make sure image will be lazy loaded by Visual Portfolio.
-  &:is(.vp-has-lazyload, .vp-has-lazyloading, .vp-has-lazyloaded)::before,
-  &:is(.vp-has-lazyload, .vp-has-lazyloading, .vp-has-lazyloaded)::after {
+  &:is(.vp-has-lazyload, .vp-has-lazyloading, .vp-has-lazyloaded)::before {
     position: absolute;
     top: 0;
     right: 0;
@@ -16,23 +15,17 @@
     pointer-events: none;
     visibility: visible;
     content: "";
-    background: var(--vp-lazyload-images__background);
+    background-image: var(--vp-lazyload-images__background);
+    background-size: var(--vp-lazyload-images__background-size);
     opacity: 1;
     transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
   }
 
-  &:is(.vp-has-lazyloading)::before,
-  &:is(.vp-has-lazyloading)::after {
+  &:is(.vp-has-lazyloading)::before {
     animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) linear infinite;
   }
 
-  &:is(.vp-has-lazyload)::before {
-    background: var(--vp-lazyload-images__background-second);
-    animation-delay: var(--vp-lazyload-images__animation-second-delay);
-  }
-
-  &:is(.vp-has-lazyloaded)::before,
-  &:is(.vp-has-lazyloaded)::after {
+  &:is(.vp-has-lazyloaded)::before {
     visibility: hidden;
     opacity: 0;
   }

diff --git a/src/assets/css/lazyload.scss b/src/assets/css/lazyload.scss
@@ -22,8 +22,7 @@ img.vp-lazyloaded {
 :is(.vp-portfolio__item-img, .vp-portfolio__thumbnail-img) {
   // Extra check for lazy loading class on the inner image
   // to make sure image will be lazy loaded by Visual Portfolio.
-  &:has(img:first-of-type:is(.vp-lazyload, .vp-lazyloading, .vp-lazyloaded))::before,
-  &:has(img:first-of-type:is(.vp-lazyload, .vp-lazyloading, .vp-lazyloaded))::after {
+  &:has(img:first-of-type:is(.vp-lazyload, .vp-lazyloading, .vp-lazyloaded))::before {
     position: absolute;
     top: 0;
     right: 0;
@@ -33,35 +32,28 @@ img.vp-lazyloaded {
     pointer-events: none;
     visibility: visible;
     content: "";
-    background: var(--vp-lazyload-images__background);
+    background-image: var(--vp-lazyload-images__background);
+    background-size: var(--vp-lazyload-images__background-size);
     opacity: 1;
     transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
   }
 
-  &:has(img:first-of-type.vp-lazyloading)::before,
-  &:has(img:first-of-type.vp-lazyloading)::after {
-    animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) linear infinite;
+  &:has(img:first-of-type.vp-lazyloading)::before {
+    animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) ease-in-out infinite;
   }
 
-  &:has(img:first-of-type.vp-lazyload)::before {
-    background: var(--vp-lazyload-images__background-second);
-    animation-delay: var(--vp-lazyload-images__animation-second-delay);
-  }
-
-  &:has(img:first-of-type.vp-lazyloaded)::before,
-  &:has(img:first-of-type.vp-lazyloaded)::after {
+  &:has(img:first-of-type.vp-lazyloaded)::before {
     visibility: hidden;
     opacity: 0;
   }
 }
 
 @keyframes vp-lazyload-placeholder {
-  0%,
-  100% {
-    opacity: 1;
+  0% {
+    background-position: 200% 0;
   }
 
-  50% {
-    opacity: 0;
+  100% {
+    background-position: -200% 0;
   }
 }