<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);
}
}
}$(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.