<main>
	<section>
		<span>Go Deep</span>
		<figure class="fish fixed">
<svg x="0px" y="0px" width="392.5px" height="102.3px" viewBox="0 0 392.5 102.3" style="enable-background:new 0 0 392.5 102.3;"xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<defs>
</defs>
<g>
	<path class="st0" d="M61.9,21.4H25.2c-2.2,0-3.2-0.3-3.9-0.7L21,21c0.4,0.7,0.7,2.4,0.7,4.2v12.5c0,1.7-0.3,3.4-0.7,4.1l0.3,0.3
		c0.7-0.4,1.7-0.7,3.9-0.7h32.6v19.3H25.2c-2.2,0-3.2-0.3-3.9-0.7L21,60.2c0.4,0.7,0.7,2.4,0.7,4.3v35.6H0V2.1h61.9V21.4z"/>
	<path class="st0" d="M140.9,30.1c0,15.4-10.5,27.3-23.3,27.3c-1.5,0-2.1,0-2.9-0.1v0.3c4.1,1.1,7.1,3.4,10.9,8.1l27.5,34.5h-26.5
		L96.3,59.7c-1,0-2-0.1-2.8-0.4c-1-0.3-1.7-0.6-2.2-0.8L91,58.7c0.8,2,1.3,4.5,1.3,7.4v34H70.5V2.1h37.3
		C128.7,2.1,140.9,12.5,140.9,30.1z M91.5,20.3c0.4,0.7,0.7,2.2,0.7,4.2v14.1c0,2-0.3,3.6-0.7,4.3l0.3,0.3c0.8-0.6,1.8-0.7,3.9-0.7
		h11.9c7.1,0,11.3-4.1,11.3-11.1c0-6.6-4.2-10.8-11.3-10.8H95.8c-2.1,0-3.1-0.1-3.9-0.7L91.5,20.3z"/>
	<path class="st0" d="M219.9,21.4h-35.6c-2.2,0-3.2-0.3-3.9-0.7l-0.3,0.3c0.4,0.7,0.7,2.4,0.7,4.2V35c0,2-0.3,3.6-0.7,4.3l0.3,0.3
		c0.7-0.4,1.7-0.7,3.9-0.7h31.8V58h-31.8c-2.2,0-3.2-0.3-3.9-0.7l-0.3,0.3c0.4,0.7,0.7,2.4,0.7,4.2V77c0,1.8-0.3,3.5-0.7,4.2
		l0.3,0.3c0.7-0.4,1.7-0.7,3.9-0.7h36.1v19.3h-61.4V2.1h60.8V21.4z"/>
	<path class="st0" d="M295,7.6l-9.5,18.9c-7.7-4.3-14.4-6.4-21.3-6.4c-6.4,0-9.4,1.8-9.4,5.6c0,3.1,1.5,4.9,7.4,8.5l16.4,10.5
		c13,8.3,18.4,16.4,18.4,28.4c0,18.8-12.9,29.1-35.6,29.1c-12.7,0-25.2-3.5-36-9.8l9.8-19.5c9,5.9,18.4,9.1,27,9.1
		c8,0,12.5-3.1,12.5-8c0-3.6-2.4-6.4-9.4-10.8l-15.1-9.7c-11.8-7.4-17.7-16.4-17.7-27.7C232.5,9.8,244.3,0,264,0
		C274.4,0,285.2,2.7,295,7.6z"/>
	<path class="st0" d="M392.5,100.2h-21.7V62.1c0-2,0.3-3.5,0.7-4.2l-0.3-0.3c-0.8,0.4-1.8,0.7-3.9,0.7H333c-2.2,0-3.2-0.3-3.9-0.7
		l-0.3,0.3c0.4,0.7,0.7,2.2,0.7,4.2v38.1h-21.7V2.1h21.7v32.5c0,2-0.3,3.6-0.7,4.3l0.3,0.3c0.7-0.4,1.7-0.7,3.9-0.7h34.3
		c2.1,0,3.1,0.3,3.9,0.7l0.3-0.3c-0.4-0.7-0.7-2.4-0.7-4.3V2.1h21.7V100.2z"/>
</g>
</svg>
		</figure>
	</section>
</main>
main{
	position: absolute;
	//background:PowderBlue;
	top:0;
	left:0;
	width: 100vw;
	overflow-x: hidden;
	overflow-y: visible;
	height: 100%;
	z-index: 1000;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;	
	.scroll-content{
		position: absolute;
		width: 100vw;
		z-index: 100;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transform-origin: 50vw 50vh;
		overflow-x: hidden;
		overflow-y: visible;
	}
	section{
		height:700vh;
		span{
			position:absolute;
			text-transform:uppercase;
			left:50%;
			font-family: monospace;
			top:100vh;
			z-index:10000;
			transform: translateX(-50%) translateY(-100%);
			font-size:10px;
			letter-spacing:1px;
			padding-bottom:30px;
			&:after{
				content:'';
				position:absolute;
				height:20px;
				width:1px;
				background:black;
				left:50%;
				bottom:0;
				opacity:0.5;
			}
		}
	}
}
.fish{
	position: absolute;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 1000;
	pointer-events: none;
	backface-visibility: hidden;
	svg{
		position:absolute;
		color:white;
		text-transform:uppercase;
		font-weight:900;
		left:50%;
		top:50%;
		//letter-spacing:-.5rem;
		width:75%;
		height: auto;
		z-index:200;
		font-family: sans-serif;
		transform:translateX(-50%) translateY(-50%);
	}
	.cod{
		width: 15vw;
		height: auto;
		position: absolute;
		top:0;
		left:0;
		z-index: 100;
		filter: blur(0.025px);	
		//will-change: transform;
		&:nth-of-type(3n){
			width: 17vw;
			z-index: 1000;
			filter: blur(0px);	
		}
		&:nth-of-type(odd){
			width: 12vw;
			z-index: 10;
			filter: blur(.5px);	
		}
		img{
			width: 100%;
			height: auto;
		}
	}
	&.reverse{
		.cod img{
			transform: scaleX(-1);
		}
	}

}
View Compiled
$(document).ready(function(){
	init();
});
var scrollbar;
var rtime;
var timeout = false;
var delta = 300;
$(window).resize(function() {
		rtime = new Date();
		if (timeout === false) {
				timeout = true;
				setTimeout(resizeend, delta);
		}
});	


var container = $('.fish'),
tl;
function getAnimation() {
  var element = $('<figure class="cod"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/fish_od7msy.png"/></figure>');
  container.append(element);
  TweenLite.set(element, {x:$winW*1.2, y:Math.random() + 50, scaleX: -1,  scaleY: -1, skewX: -5, skewY: 5})
  var bezTween = new TimelineLite();
  bezTween.to(element, 70, {
    bezier:{
      type:"soft", 
      values:[ {x:$winW*1.2, y:$winH/2*Math.random() + $winH/4}, {x:$winW/2*Math.random() + $winW/4, y:$winH/2*Math.random() + $winH/4}, {x:-$winW/4, y:$winH/2*Math.random() + $winH/4}],
      autoRotate:true
    },
    ease:Linear.easeNone});
  bezTween.to(element, 0.3, {scaleX:-0.96, repeat:(bezTween.duration() / 0.3) -1, yoyo:true}, 0)
  
  return bezTween;
} 
function buildTimeline() {
  tl = new TimelineMax({repeat:0, delay:1});
  for (i = 0 ; i< 300; i++){
    tl.add(getAnimation(i), i * .5);
  }
}
function setupScrollbar(){
	$scrolled = 0;
	//console.log('setup scrollbar');
	var scrollbar = Scrollbar.init($('main')[0], {
		speed: .3,
		damping: 0.1,
		renderByPixels: true,
		syncCallbacks: true,
		continuousScrolling: false,
		overscrollEffect: false
	});
	scrollbar.addListener(function (status) {
		$scrolled = status.offset.y;
		$('.fixed').css('top',$scrolled + 'px');
		$('section span').css('opacity',1 - $scrolled/200);
		if(tl){
			var progress = tl.totalProgress();
			var pct = $scrolled / $winH;
			tl.pause();
			$('.fish').attr('data-pct',pct);
			tl.progress(pct/8);
		}
		if (status.direction.y == 'down'){
			$down = true;
			if($('.fish').length >= 1){
				$('.fish').removeClass('reverse');
			}
		} else {
			$down = false;
			if($('.fish').length >= 1){
				$('.fish').addClass('reverse');
			}
		}

	});
}
function init(){
	$winW = $(window).width();
	$winH = $(window).height();
	//getAnimation();
	buildTimeline();
	tl.pause();
	setupScrollbar();
	
}
function resizeend() {
		if (new Date() - rtime < delta) {
				setTimeout(resizeend, delta);
		} else {
				timeout = false;
				$('.fish img').remove();
				Scrollbar.destroy($('main')[0]);
				TweenMax.killAll();
				setTimeout(function(){
					$winW = $(window).width();
					$winH = $(window).height();
					//getAnimation();
					buildTimeline();
					tl.pause();
					setupScrollbar();	
					$('section span').css('opacity','1');
				},1500);
		}               
}	

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/7.2.10/smooth-scrollbar.js