<body>
    <nav class="nav">
      <div class="header-image1"></div>
      <div class="header-image2 hidethis"></div>
    </nav>
    <div>
        <div class="block1">
            <img class="image1" src="http://placehold.it/100/E8117F"/>
            <img class="image2" src="http://placehold.it/100/E8117F"/>
            <img class="image3" src="http://placehold.it/100/E8117F"/>
            Block 1
        </div>
        <div class="block2">
            Block 2
        </div>
        <div class="block3">
            Block 3
        </div>
    </div>

    <!-- jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
html {
  font-family: sans-serif;
}

.nav {
  width: 100%;
  padding: 20px;
  background: lightgray;
  position: fixed;
  z-index: 3;
  transition: all 0.4s ease;
}
.header-image1{
  background: url('http://placehold.it/80/3399FF?text=LOGO') no-repeat #fff;
  background-size: cover;
  width: 80px;
  height: 80px;
  float: left;
  transition: all 0.4s ease;
}
.header-image2{
  background: url('http://placehold.it/200x80/FF9900?text=SOME TEXT') no-repeat #fff;
  background-size: cover;
  width: 200px;
  height: 80px;
  float: left;
  transition: all 0.4s ease;
  opacity: 1;
}
.header-image1.scaled {
  height: 40px;
  width: 40px;
}
.header-image2.scaled {
  height: 40px;
  opacity: 0;
}

.block1 {
  position: fixed;
  top: 50%;
  left: 0;
  height: 200px;
  width: calc(50% - 20px);
  padding: 10px;
  background: lightblue;
  transition: all 0.7s ease;
  z-index: 2;
}

.block1.moveup1 {
  top: 30%;
}

.block1.moveup1_2 {
  top: 15%;
}

.image1 {
  position: absolute;
  top: 40px;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  transition: left 1s ease-out;
}

.image1.scrolled {
  opacity: 1;
  left: 20px;
}

.image2 {
  position: absolute;
  top: 40px;
  left: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  transition: left 1.3s ease-out;
}

.image2.scrolled {
  opacity: 1;
  left: 140px;
}

.image3 {
  position: absolute;
  top: 40px;
  left: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  transition: left 1.6s ease-out;
}

.image3.scrolled {
  opacity: 1;
  left: 260px;
}

.block2 {
  position: fixed;
  height: 400px;
  width: calc(50% - 20px);
  padding: 10px;
  top: 60%;
  left: 50%;
  background: pink;
  transition: all 0.7s ease;
  z-index: 2;
}

.block2.moveup2 {
  top: 30%;
}

.block2.moveup2_2 {
  top: 15%;
}

.block3 {
  height: 1400px;
  width: 100%;
  background: lightyellow;
  padding-top: 250px;
}
$(window).scroll(function() {
	var $this = $(this);

	if ($this.scrollTop() > 1){
		$('.nav, .header-image1, .header-image2').addClass("scaled");
	}
	else{
		$('.nav, .header-image1, .header-image2').removeClass("scaled");
	}

	if($this.scrollTop()>100){
		$('.block1').addClass("moveup1");
		$('.block2').addClass("moveup2");
		$('.image1, .image2, .image3').addClass("scrolled");
	}
	else{
		$('.block1').removeClass("moveup1");
		$('.block2').removeClass("moveup2");
	}

	if($this.scrollTop()>500){
		$('.block1').addClass("moveup1_2");
		$('.block2').addClass("moveup2_2");
	}
	else{
		$('.block1').removeClass("moveup1_2");
		$('.block2').removeClass("moveup2_2");
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.