图像从pageload上的底部到顶部的图像负载

Question

是否有一种方法可以使图像从pageload上的下部到顶部加载，具有视差效果？类似于此Codepen：-https：//codepen.io/bcarvalho/pen/wxmwbq

到目前为止，我有： - https：//codepen.io/anon/pen/qodnpn，但创建视差动画时没有运气。我只想要图像和文本似乎从下到顶部加载的负载动画，图像也移动。

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

您需要对图像进行动画动画。这可能会帮助您链接。

html

<div class="tree">
<div></div>
<img src="File path" alt="" />

CSS

    .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%;
    }
}