<div class="cont">
	<div class="mouse"></div>
	<div class="app">
		<div class="app__bgimg">
			<div class="app__bgimg-image app__bgimg-image--1">
			</div>
			<div class="app__bgimg-image app__bgimg-image--2">
			</div>
		</div>
		<div class="app__img">
			<img onmousedown="return false" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/whiteTest4.png" alt="city" />
		</div>
		
		<div class="app__text app__text--1">
			<div class="app__text-line app__text-line--4">imperdiet </div>
			<div class="app__text-line app__text-line--3">ut le</div>
			<div class="app__text-line app__text-line--2">non tincidunt </div>
			<div class="app__text-line app__text-line--1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt="" /></div>
		</div>
		
		<div class="app__text app__text--2">
			<div class="app__text-line app__text-line--4">habitant</div>
			<div class="app__text-line app__text-line--3">ut eget</div>
			<div class="app__text-line app__text-line--2">Nam imperdiet</div>
			<div class="app__text-line app__text-line--1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt="" /></div>
		</div>
	</div>
	<div class="pages">
		<ul class='pages__list'>
			<li data-target='1' class='pages__item pages__item--1 page__item-active'></li>
			<li data-target='2' class='pages__item pages__item--2'></li>
		</ul>
	</div>
</div>
<a href="https://dribbble.com/shots/2936160-Opus-Animation" target="_blank" class="icon-link">
    <img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png">
  </a>
  <a href="https://twitter.com/mrspok407" target="_blank" class="icon-link icon-link--twitter">
    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
  </a>
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

$contBgClr: linear-gradient(to left bottom, #F2E3C6 0%, #A7A1A5 100%);
$appShadowClr: rgba(#000, .3);

.cont {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-image: $contBgClr;
	overflow: hidden;
}

.app {
 	position: relative;
	min-width: 850px;
	height: 540px;
	box-shadow: 0 0 60px $appShadowClr;
	overflow: hidden;
	
	&__bgimg {
		position: absolute;
		top: 0;
		left: -2.5%;
		width: 105%;
		height: 100%;
		transition: transform 3.5s 770ms;
		
		&-image {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			
			&--1 {
				background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city22222.jpg') center center no-repeat;
				background-size: cover;
			}
			
			&--2 {
				background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/forest.jpg') center center no-repeat;
				background-size: cover;
				opacity: 0;
				transition: opacity 0ms 1300ms;
				will-change: opacity;
			}
		}
	}
	
	&__text {
		position: absolute;
		right: 165px;
		top: 150px;
		font-family: 'Roboto', sans-serif;
		text-transform: uppercase;
		z-index: 1;
		
		&-line {
			transition: transform 1500ms 400ms, opacity 750ms 500ms;
			will-change: transform, opacity;
			user-select: none;
			@for $i from -4 through -1 {
			&--#{abs($i)} {
				transition: transform 1500ms 2000ms + 100ms * ($i - 1), opacity 1500ms 2750ms + 250ms * ($i - 1);
			}
		}
			&--4 {
				font: {
					size: 50px;
					weight: 700;
				}
				color: #0A101D;
			}
			&--3 {
				font: {
					size: 40px;
					weight: 300;
				}
			}
			&--2 {
				margin-top: 10px;
				font: {
					size: 14px;
					weight: 500;
				}
				color: #0099CC;
			}
			&--1 {
				margin-top: 15px;
				img {
					width: 50px;
				}
			}
		}
		
		&--1 {
			
			.app__text-line {
				transform: translate3d(0, -125px, 0);
				opacity: 0;
			}
		}
		
		&--2 {
			right: initial;
			top: 250px;
			left: 80px;
			z-index: -1;
			transition: z-index 1500ms;
			
			@for $i from -4 through -1 {
			.app__text-line--#{abs($i)} {
				opacity: 0;
				transition: transform 1500ms 300ms + 75ms * ($i - 1), opacity 400ms 500ms + 75ms *($i - 1);
			}
		}
		}
	}
	
	&__img {
		position: absolute;
		transform: translate3d(0, -750px, 0);
		width: 850px;
		height: 100%;
		transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
		will-change: transform;
		
		img {
			min-width: 100%;
			user-select: none;
		}
	}
}

.initial {
	.app__img {
		transform: translate3d(0, 0, 0);
	}
	.app__text--1 {
		@for $i from 1 through 4 {
			.app__text-line--#{$i} {
				transform: translate3d(0, 0, 0);
				transition: transform 1500ms 1400ms + 75ms * ($i - 1), opacity 400ms 1600ms + 75ms *($i - 1);
				opacity: 1;
			}
		}
	}
}

.active {
	.app__bgimg {
		transform: translate3d(10px, 0, 0) scale(1.05);
		transition: transform 5s 850ms ease-in-out;
		.app__bgimg-image--2 {
			opacity: 1;
			transition: opacity 0ms 1500ms;
		}
	}
	.app__img {
		transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
		transform: translate3d(0, -1410px, 0);
	}
	.app__text--1 {
		z-index: -1;
		transition: z-index 0ms 1500ms;
		@for $i from 1 through 4 {
			.app__text-line--#{$i} {
				transform: translate3d(0, -125px, 0);
				transition: transform 1500ms 300ms + 75ms * ($i - 1), opacity 400ms 500ms + 75ms *($i - 1);
				opacity: 0;
			}
		}
	}
	.app__text--2 {
		z-index: 1;
		
		@for $i from 1 through 4 {
			.app__text-line--#{$i} {
				transform: translate3d(0, -125px, 0);
				transition: transform 2500ms 1100ms + 75ms * ($i - 1), opacity 1300ms 1300ms + 275ms *($i - 1);
				opacity: 1;
			}
		}
	}
}

.mouse {
	position: relative;
	margin-right: 20px;
	min-width: 50px;
	height: 80px;
	border-radius: 30px;
	border: 5px solid rgba(255, 255, 255, .8);
	&:after {
		content: '';
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translate(-50%, 0);
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #fff;
		animation: scroll 1s infinite alternate;
		@keyframes scroll {
			100% {transform: translate(-50%, 15px)}
		}
	}
}

.pages {
	margin-left: 20px;
	&__list {
		list-style-type: none;
	}
	&__item {
		position: relative;
		margin-bottom: 10px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: 3px solid #fff;
		cursor: pointer;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0, 0);
			width: 75%;
			height: 75%;
			border-radius: 50%;
			background-color: #fff;
			opacity: 0;
			transition: 500ms;
		}
		&:hover:after {
			transform: translate(-50%, -50%) scale(1, 1);
			opacity: 1;
		}
	}
}

.page__item-active {
	&:after {
		transform: translate(-50%, -50%) scale(1, 1);
		opacity: 1;
	}
}

.icon-link {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 50px;
  img {
    width: 100%;
    vertical-align: top;
  }
  &--twitter {
    left: auto;
    right: 5px;
  }
}
View Compiled
$(document).ready(function() {
	const $app = $('.app');
	const $img = $('.app__img');
	const $pageNav1 = $('.pages__item--1');
	const $pageNav2 = $('.pages__item--2');
	let animation = true;
	let curSlide = 1;
	let scrolledUp, nextSlide;
	
	let pagination = function(slide, target) {
		animation = true;
		if (target === undefined) {
			nextSlide = scrolledUp ? slide - 1 : slide + 1;
		} else {
			nextSlide = target;
		}
		
		$('.pages__item--' + nextSlide).addClass('page__item-active');
		$('.pages__item--' + slide).removeClass('page__item-active');
		
		$app.toggleClass('active');
		setTimeout(function() {
			animation = false;
		}, 3000)
	}
	
	let navigateDown = function() {
		if (curSlide > 1) return;
		scrolledUp = false;
		pagination(curSlide);
		curSlide++;
	}

	let navigateUp = function() {
		if (curSlide === 1) return;
		scrolledUp = true;
		pagination(curSlide);
		curSlide--;
	}

	setTimeout(function() {
		$app.addClass('initial');
	}, 1500);

	setTimeout(function() {
		animation = false;
	}, 4500);
	
	$(document).on('mousewheel DOMMouseScroll', function(e) {
		var delta = e.originalEvent.wheelDelta;
		if (animation) return;
		if (delta > 0 || e.originalEvent.detail < 0) {
			navigateUp();
		} else {
			navigateDown();
		}
	});

	$(document).on("click", ".pages__item:not(.page__item-active)", function() {
		if (animation) return;
		let target = +$(this).attr('data-target');
		pagination(curSlide, target);
		curSlide = target;
	});
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js