Image load from bottom to top on pageload

Question

Is there a way to get an image to load from bottom to top on pageload, with a parallax effect? Similar to this codepen:- https://codepen.io/bcarvalho/pen/WXmwBq

So far I have:- https://codepen.io/anon/pen/QodNpN but no luck in creating the Parallax animation. I just want the load animation where the image and text seems to load from bottom to top, with the image moving too.

jQuery('.overlay').delay(1000).animate({height:'0'},1000);

    html,body {height:100%;}
    .site-featured-image {width:1500px;margin:auto;}
    
    .post-thumbnail {
      position:relative;
      display:block;
      width:100%;
      top:100%;
    }
    
    .post-thumbnail img{
      height:80%;
    }
    
    .entry-header {
        position: absolute;
        z-index: 9;
      bottom:0;
    }
    
    
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index:9;
      background:rgba(255,255,255,1);
      width: 100%;
      height:100%;
      transition: .5s ease;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-featured-image">
 <figure class="post-thumbnail">
  <img width="766" height="693" src="http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/03/home2.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image">	<div class="overlay"></div>		</figure><!-- .post-thumbnail -->
<div class="entry-header">
 <h1 class="entry-title">TITLE™</h1><p>TEXT. </p>
</div>
    </div>

Answer 1

您需要为图像设置动画。这可以帮助您link。

HTML

    .tree {
    width: 300px;
    position: relative;
}

.tree > div {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    top: 0;
    left: 0;
    -webkit-animation-name: hello;
    -webkit-animation-duration: 5s;
    -webkit-animation-fill-mode: forwards;
    animation-name: hello;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

.tree img {
    max-width: 100%;
}



@keyframes hello {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

@-webkit-keyframes hello {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

CSS

stripslashes