A Pen by MarkYun.

Buoyant-Responsive-Logo.markdown

Buoyant Responsive Logo

Derived from am original design by Ryan McLaughlin. Uses cross-browser filters for underwater blur, vw units to make the logo responsive, and CSS animations triggered by window resizes.

A Pen by MarkYun on CodePen.

License.

index.html

<script type="text/javascript" src="//use.typekit.net/gna0sst.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<div class="float-wrapper">
<h1 class="effra">good</h1>
<div id="ocean">
<h1 class="effra">FLOAT</h1>
<h2 class="effra">STUDIO</h2>
</div>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
        <feGaussianBlur stdDeviation="3" />
    </filter>
</svg>

<!-- from an original design by Ryan McLaughlin: http://codepen.io/ryanmclaughlin/pen/tEHif -->

script.js

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}

/* Creates correct prefixes for AnimationEnd eventListener */
  
function resetanim(elem) { 
	elem.style.removeProperty('-moz-animation');
	elem.style.removeProperty('-webkit-animation');
	elem.style.removeProperty('animation');
	}

/* resets styles at end of animation so they can be fired again */

window.addEventListener('resize', function() {
	var abovewater = document.querySelector('div.float-wrapper > h1');
	var belowwater = document.querySelector('div#ocean h1');
	var studio = document.querySelector('h2.effra');
	studio.style.fontSize="5vw";
	abovewater.setAttribute("style","-moz-animation: topslosh 2.8s; -webkit-animation: topslosh 2.8s; animation: topslosh 2.8s;");
	belowwater.setAttribute("style","-moz-animation: bottomslosh 2.8s; -webkit-animation: bottomslosh 2.8s; animation: bottomslosh 2.8s" );
	PrefixedEvent(abovewater, "AnimationEnd", function() {
	 resetanim(abovewater);
	 resetanim(belowwater);
	});
  /* resizes fonts correctly for Webkit; starts animation on browser window resize and resets the animation after it is finished */
});

style.css

@-moz-keyframes topslosh { 
   0% { margin-top: 9vw; }
   20% { margin-top: 5vw; }
   40% { margin-top: 8vw; }
   50% { margin-top: 5.3vw; }
   60% { margin-top: 7.8vw; }
   72% { margin-top: 5.86vw; }
   81% { margin-top: 7.3vw; }
   92% { margin-top: 6.49vw; }
   100% { margin-top: 7vw; }
  }

@-moz-keyframes bottomslosh { 
   0% { margin-top:  -4vw; }
   20% { margin-top: -10vw; }
   40% { margin-top: -5vw; }
   50% { margin-top: -9vw; }
   60% { margin-top: -6vw; }
   72% { margin-top: -8vw; }
   81% { margin-top: -6.6vw; }
   92% { margin-top: -7.6vw; }
   100% { margin-top: -7vw; }
  }

@-webkit-keyframes topslosh { 
   0% { margin-top: 9vw; }
   20% { margin-top: 5vw; }
   40% { margin-top: 8vw; }
   50% { margin-top: 5.3vw; }
   60% { margin-top: 7.8vw; }
   72% { margin-top: 5.86vw; }
   81% { margin-top: 7.3vw; }
   92% { margin-top: 6.49vw; }
   100% { margin-top: 7vw; }
  }

@-webkit-keyframes bottomslosh { 
   0% { margin-top:  -4vw; }
   20% { margin-top: -10vw; }
   40% { margin-top: -5vw; }
   50% { margin-top: -9vw; }
   60% { margin-top: -6vw; }
   72% { margin-top: -8vw; }
   81% { margin-top: -6.6vw; }
   92% { margin-top: -7.6vw; }
   100% { margin-top: -7vw; }
  }

@keyframes topslosh { 
   0% { margin-top: 9vw; }
   20% { margin-top: 5vw; }
   40% { margin-top: 8vw; }
   50% { margin-top: 5.3vw; }
   60% { margin-top: 7.8vw; }
   72% { margin-top: 5.86vw; }
   81% { margin-top: 7.3vw; }
   92% { margin-top: 6.49vw; }
   100% { margin-top: 7vw; }
  }

@keyframes bottomslosh { 
   0% { margin-top:  -4vw; }
   20% { margin-top: -10vw; }
   40% { margin-top: -5vw; }
   50% { margin-top: -9vw; }
   60% { margin-top: -6vw; }
   72% { margin-top: -8vw; }
   81% { margin-top: -6.6vw; }
   92% { margin-top: -7.6vw; }
   100% { margin-top: -7vw; }
  }
  
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0;  }
.effra { 
  font-family: "Effra",sans-serif;
  text-transform: uppercase;  
}
div.float-wrapper { 
  position: relative; 
  height: 40vw;
  text-align: center;
  border: 1px solid transparent; 
}
div.float-wrapper h1, 
div.float-wrapper h2 { 
  margin: 0; 
}
div.float-wrapper > h1 { 
  font-size: 12vw;
  margin-top: 7vw; 
}
div#ocean { 
  position: absolute;
  background: hsl(195, 87%, 54%); 
  top: 36%;
  height: 100%;
  width: 100%;
  overflow: hidden;  
}
div#ocean h1 { 
  color: #2d72b6;
  margin-top: -7vw;
  font-size: 13vw;
  filter: url(#blur);
  -webkit-filter: blur(3px);   
}
div#ocean h2 { 
  font-weight: 100; 
  color: #fff; 
  font-size: 5vw; 
  letter-spacing: 20px; 
  position: absolute; 
  top: 10vw; 
  width: 100%; 
}