CODEWITHSUNDEEP
htmlcss
Patrickkx
Patrickkx

Reputation: 1870

Shimmer effect with DYNAMIC background position?

I have found that solution on this page. However, the background-position prop is... hardcoded (static). It will fail on different screen sizes (its too narrow for 4K screens - will start over in a half, and it's too wide for small screens - it will animate too quickly).

Is there a way to somehow make it dynamic, so it will work properly for every screen size? And if you ask, 100% do not work unfortunately.

@keyframes shimmerBackground {
  0% {
    background-position: -1000px 0
  }
  100% {
    background-position: 1000px 0
  }
}

.shimmer {
  background-image: -moz-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0)), color-stop(60%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-repeat: repeat-y;
  animation: shimmerBackground 1s linear infinite;
  width: 100%;
  height: 100px;
  background-color: blue;
}
<div class='shimmer' />

Upvotes: 0

Views: 675

Answers (2)

AKX
AKX

Reputation: 169022

You could try the vw (viewport width) / vh (viewport height) / vmin (viewport shorter edge) / vmax (viewport longer edge) units.

@keyframes shimmerBackground {
  0% {
    background-position: -100vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

Upvotes: 1

user1846871
user1846871

Reputation: 68

As I understand

when changing screen size shimer div height is not changing according

here height is fixed height: 100px;

It can be dynamic like height:20% or something you like If you want to change animation speed 

animation: shimmerBackground 1s linear infinite;

You can change 1s to 3s or something you like

Upvotes: 0

Related Questions