0

I've been reading for couple hours from now, and probably I have problem even with asking right question. What I would like to achieve is: changing the main page background height from 0 to 100% in let's say 10s, so after 1 second background color got 10% page height, after 2 seconds 20% of page height and so on. It should start to change after page load. It could be jquery, css, or some external library, just want it to work.

Borys
  • 2,676
  • 2
  • 24
  • 37
  • This can be achieved with animating linear-gradient. There's an answer on Stack Overflow: https://stackoverflow.com/questions/20751937/transition-background-color-via-slide-up-animation – Vitalii Chmovzh Feb 10 '18 at 22:07

2 Answers2

2

Something like this?

body {
  width: 100vw;
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    background: red;
    height: 0;
    z-index: 0;
    animation-fill-mode: forwards;
    animation-name: expand;
    animation-duration: 10s;
  }
}

@keyframes expand {
    from { height: 0; }
    to { height: 100%; }
}

So basically, you add another layer underneath your content, which animates to the height of your page for 10s (the animation-duration)

Working JSFiddle: https://jsfiddle.net/y4kpcmjc/2/

Arber Sylejmani
  • 2,078
  • 1
  • 16
  • 20
  • thank you, you saved me :) could you please tell me how to make the color stay after animation ends? because now it's disappering – Borys Feb 10 '18 at 22:49
  • 1
    Sure, just add: animation-fill-mode: forwards; or you can use a 1-liner: animation: expand 10s forwards; I'll update the answer :) – Arber Sylejmani Feb 10 '18 at 22:55
1

From the official jquery docs

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

Here is the example

<img id="image" src="..." />
...
<script>
$(document).ready(function() {
    $('#image').css('height', '0');
    $('#image').animate({
        height: "100%"
    }, 10000, function() {
       //Finished loading
    });

})
</script>
Nikola Gavric
  • 3,507
  • 1
  • 8
  • 16