Cool Picture Effect

Jarallax

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.0/SmoothScroll.min.js"></script>
<div id="loading">
    <img src="https://placehold.it/100x100" alt="" id="loading_logo" class="loading_logo" />
</div>

CSS

#loading {
    display: block;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: $black;
}

.loading_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JavaScript

function loadingImg() {
    var loading_logo = document.getElementById("loading_logo");
    setTimeout(function() {
    loading_logo.style.visibility = "hidden"
  }, 5000);
}

loadingImg();