<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/loreunjohn/pen/dXWEwa?depth=everything&order=popularity&page=4&q=mobile+detect&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">.logo-wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
max-width: 380px;
height: auto;
}
.logo-wrapper #logo-webbab {
overflow: visible;
}
.logo-wrapper #logo-webbab .word {
fill: #fff;
opacity: 0;
}
.logo-wrapper #logo-webbab #mask #alpha {
fill: #fff;
}
.logo-wrapper #iso {
fill: #fff;
opacity: 0;
-webkit-mask: url(#mask);
mask: url(#mask);
}
html,
body {
width: 100%;
height: 100%;
min-height: 100%;
}
body {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/458169.jpg);
background-repeat: no-repeat;
background-position: bottom center;
-ms-background-size: cover;
background-size: cover;
}
.control {
margin: 2em 0;
position: fixed;
left: 50%;
bottom: 0;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
width: 100%;
}
.control ul {
display: block;
margin: 0;
}
.control ul li {
display: inline-block;
margin: 1em 0.5em;
}
.control ul li a {
border-bottom: 1px solid #eee;
color: #fff;
text-decoration: none;
padding: 0.7em 2.5em 0.5em;
letter-spacing: 1px;
font-size: 0.9em;
-webkit-transition: color 500ms ease, border 500ms ease;
transition: color 500ms ease, border 500ms ease;
}
.control ul li a:hover {
color: #ccc;
border-bottom: 2px solid #ccc;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
</style></head><body>
<div class="logo-wrapper">
<!-- SVG-based animation and responsive -->
<svg version="1.1" id="logo-webbab" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 388.691 120">
<polygon id="w" class="word" fill="#FFFFFF" points="152.605,40.084 158.51,69.689 158.787,69.689 163.832,40.084 175.141,40.084 180.186,69.689
180.462,69.689 186.588,40.084 196.65,40.084 186.533,80.661 175.141,80.661 169.625,51.758 169.348,51.758 163.832,80.661
152.246,80.661 142.322,40.084 "/>
<polygon id="e" class="word" fill="#FFFFFF" points="197.371,40.084 228.139,40.084 228.139,48.531 207.488,48.531 207.488,55.322
226.337,55.322 226.337,63.656 207.488,63.656 207.488,72.102 228.997,72.102 228.997,80.661 197.371,80.661 "/>
<path id="b1" class="word" fill="#FFFFFF" d="M232.518,40.084H251.2c9.535,0,14.303,3.564,14.303,10.691c0,2.133-0.453,3.854-1.358,5.164
c-0.851,1.235-2.272,2.31-4.27,3.227c2.015,0.187,3.688,1.271,5.019,3.255c1.2,1.796,1.801,3.779,1.801,5.949
c0,4.957-1.932,8.381-5.793,10.27c-2.717,1.348-6.819,2.021-12.307,2.021h-16.077V40.084z M249.675,55.996
c4.084,0,6.127-1.375,6.127-4.126c0-2.487-1.913-3.731-5.738-3.731h-7.706v7.857H249.675z M256.633,68.202
c0-3.143-1.743-4.714-5.229-4.714h-9.047v9.119h7.968C254.53,72.589,256.633,71.121,256.633,68.202"/>
<path id="b2" class="word" fill="#FFFFFF" d="M270.104,40.084h18.682c9.535,0,14.303,3.564,14.303,10.691c0,2.133-0.453,3.854-1.358,5.164
c-0.851,1.235-2.273,2.31-4.269,3.227c2.014,0.187,3.687,1.271,5.017,3.255c1.202,1.796,1.802,3.779,1.802,5.949
c0,4.957-1.931,8.381-5.792,10.27c-2.717,1.348-6.819,2.021-12.309,2.021h-16.075V40.084z M287.262,55.996
c4.083,0,6.126-1.375,6.126-4.126c0-2.487-1.913-3.731-5.738-3.731h-7.706v7.857H287.262z M294.219,68.202
c0-3.143-1.743-4.714-5.229-4.714h-9.047v9.119h7.968C292.116,72.589,294.219,71.121,294.219,68.202"/>
<path id="a" class="word" fill="#FFFFFF" d="M318.001,40.084h10.894l14.718,40.576h-10.921l-2.493-7.576H316.81l-2.384,7.576h-10.727
L318.001,40.084z M327.869,64.695l-4.297-14.256l-4.379,14.256H327.869z"/>
<path id="b3" class="word" fill="#FFFFFF" d="M345.276,40.084h18.682c9.535,0,14.304,3.564,14.304,10.691c0,2.133-0.453,3.854-1.358,5.164
c-0.851,1.235-2.273,2.31-4.269,3.227c2.014,0.187,3.686,1.271,5.017,3.255c1.201,1.796,1.802,3.779,1.802,5.949
c0,4.957-1.932,8.381-5.793,10.27c-2.717,1.348-6.819,2.021-12.308,2.021h-16.076V40.084z M362.434,55.996
c4.084,0,6.126-1.375,6.126-4.126c0-2.487-1.912-3.731-5.737-3.731h-7.706v7.857H362.434z M369.392,68.202
c0-3.143-1.743-4.714-5.229-4.714h-9.046v9.119h7.968C367.288,72.589,369.392,71.121,369.392,68.202"/>
<g id="tm">
<polygon class="word" fill="#FFFFFF" points="381.69,45.389 381.69,41.776 380.356,41.776 380.356,41.019 383.862,41.019 383.862,41.776
382.565,41.776 382.565,45.389 "/>
<polygon class="word" fill="#FFFFFF" points="384.384,45.389 384.384,41.019 385.749,41.019 386.535,44.028 387.325,41.019 388.691,41.019
388.691,45.389 387.858,45.389 387.858,41.904 386.925,45.389 386.134,45.389 385.207,41.904 385.207,45.389 "/>
</g>
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect id="alpha" class="rhombus" width="93.237" height="93.237" x="13.4" y="13.678"/>
<circle class="logo-circle" fill="#000000" cx="87" cy="61.2" r="9"/>
<circle class="logo-circle" fill="#000000" cx="41" cy="35" r="6"/>
<circle class="logo-circle" fill="#000000" cx="53" cy="78" r="7"/>
<ellipse class="logo-ellipse" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" cx="6" cy="-64" rx="150" ry="150"/>
<ellipse class="logo-ellipse" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" cx="138" cy="-80" rx="150" ry="150"/>
<ellipse class="logo-ellipse" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" cx="190" cy="15" rx="150" ry="150"/>
</mask>
<rect id="iso" class="rhombus" width="93.237" height="93.237" x="13.4" y="13.678"/>
</svg>
</div>
<!--Control buttons - delete-->
<div class="control">
<ul class="cf">
<li><a href="#" class="play">play</a></li>
<li><a href="#" class="reverse">reverse</a></li>
</ul>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script >/*global $:false, TweenMax, TimelineMax, Power2, Cubic, Elastic*/
/*
author: Marco Barría
devDependencies:
- GSAP TweenMax https://greensock.com/tweenmax (Necessary for animation.)
- jQuery
*/
function logoWebbab() {
// VARIABLES
var self = this;
self.wrapperLogo = $('.logo-wrapper');
self.svgLogo = $('#logo-webbab');
self.isoLogo = $('#logo-webbab #iso');
self.rhombusLogo = $('.rhombus');
self.logoCircle = $('.logo-circle');
self.logoEllipse = $('.logo-ellipse');
self.wordLogo = $('.word');
// MOBILE DETECT: IF A MOBILE IS DETECTED THE LOGO IS REPLACED FOR AVOID PERFORMANCE PROBLEMS.
self.isDevice = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));
self.mobileLogoColor = '#FFFFFF';
self.mobileLogo = '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 388.691 120"><path fill="'+self.mobileLogoColor+'" d="M152.605 40.084l5.905 29.605h.277l5.045-29.606h11.31l5.044 29.605h.276l6.126-29.606h10.062L186.533 80.66H175.14l-5.515-28.902h-.277l-5.516 28.903h-11.586l-9.924-40.576M197.37 40.084h30.77v8.447h-20.652v6.792h18.85v8.334h-18.85v8.446h21.51v8.56H197.37M232.518 40.084H251.2c9.535 0 14.303 3.564 14.303 10.69 0 2.134-.453 3.855-1.358 5.165-.85 1.234-2.272 2.31-4.27 3.226 2.015.187 3.688 1.27 5.02 3.255 1.2 1.797 1.8 3.78 1.8 5.95 0 4.957-1.932 8.38-5.793 10.27-2.717 1.348-6.82 2.02-12.307 2.02h-16.077V40.085zm17.157 15.912c4.084 0 6.127-1.375 6.127-4.126 0-2.487-1.913-3.73-5.738-3.73h-7.706v7.856h7.317zm6.958 12.206c0-3.143-1.743-4.714-5.23-4.714h-9.046v9.12h7.968c4.205-.02 6.308-1.487 6.308-4.406M270.104 40.084h18.682c9.535 0 14.303 3.564 14.303 10.69 0 2.134-.454 3.855-1.36 5.165-.85 1.234-2.272 2.31-4.268 3.226 2.014.187 3.687 1.27 5.017 3.255 1.2 1.797 1.8 3.78 1.8 5.95 0 4.957-1.93 8.38-5.79 10.27-2.718 1.348-6.82 2.02-12.31 2.02h-16.075V40.085zm17.158 15.912c4.083 0 6.126-1.375 6.126-4.126 0-2.487-1.913-3.73-5.738-3.73h-7.706v7.856h7.318zm6.957 12.206c0-3.143-1.744-4.714-5.23-4.714h-9.047v9.12h7.968c4.206-.02 6.31-1.487 6.31-4.406M318 40.084h10.895l14.718 40.576h-10.92l-2.494-7.576h-13.39l-2.384 7.576H303.7L318 40.084zm9.87 24.61L323.57 50.44l-4.38 14.255h8.677zM345.276 40.084h18.682c9.535 0 14.304 3.564 14.304 10.69 0 2.134-.453 3.855-1.358 5.165-.85 1.234-2.273 2.31-4.27 3.226 2.015.187 3.687 1.27 5.018 3.255 1.2 1.797 1.802 3.78 1.802 5.95 0 4.957-1.932 8.38-5.793 10.27-2.716 1.348-6.818 2.02-12.307 2.02h-16.076V40.085zm17.158 15.912c4.084 0 6.126-1.375 6.126-4.126 0-2.487-1.912-3.73-5.737-3.73h-7.706v7.856h7.317zm6.958 12.206c0-3.143-1.743-4.714-5.23-4.714h-9.045v9.12h7.968c4.203-.02 6.307-1.487 6.307-4.406"/><g fill="'+self.mobileLogoColor+'"><path d="M381.69 45.39v-3.614h-1.334v-.757h3.506v.756h-1.297v3.613M384.384 45.39v-4.37h1.365l.785 3.008.79-3.01h1.366v4.37h-.832v-3.484l-.933 3.485h-.79l-.928-3.486v3.485"/></g><g fill="'+self.mobileLogoColor+'" fill-rule="evenodd" clip-rule="evenodd"><path d="M4.07 50.13l7.843-7.842c3.55 3.73 7.49 7.37 11.785 10.866-.068.11-.13.22-.19.335-5.64-.22-11.217-.923-16.575-2.205-1.046-.25-2.104-.53-3.17-.838.1-.106.204-.212.308-.316M13.547 40.654L50.13 4.07c5.428-5.427 14.31-5.427 19.74 0l12.28 12.283c-.23 5.728-.842 11.477-1.78 17.163-.132-.007-.267-.01-.403-.01-4.545 0-8.232 3.686-8.232 8.232 0 1.01.182 1.978.516 2.87-5.156 2.09-10.422 3.802-15.633 5.14-7.445 1.912-15.36 3.21-23.318 3.65-.942-1.72-2.77-2.89-4.872-2.89-1.163 0-2.242.36-3.134.97-4.165-3.38-8.108-6.99-11.747-10.824M97.83 32.032l18.098 18.1c5.43 5.427 5.43 14.31 0 19.738l-14.753 14.753c-9.12-1.293-18.182-3.546-26.86-6.483l.003-.19c0-2.334-1.18-4.393-2.977-5.612 1.513-3.513 2.926-7.132 4.23-10.848 1.355-3.866 2.552-7.724 3.595-11.558.264.026.532.04.803.04 4.546 0 8.232-3.687 8.232-8.233 0-.986-.174-1.93-.49-2.806 3.648-2.16 7.032-4.474 10.12-6.902M99.146 86.652L69.87 115.928c-5.43 5.43-14.31 5.43-19.74 0l-3.82-3.82c7.042-7.742 13.585-17.082 19.227-27.68.633.195 1.304.302 2 .302 2.868 0 5.32-1.782 6.312-4.298 8.586 2.89 17.087 4.953 25.296 6.22M44.676 110.474L4.07 69.87C-.797 65-1.3 57.353 2.567 51.912c6.122 1.844 13 2.966 20.377 3.29-.043.28-.066.564-.066.855 0 3.064 2.485 5.55 5.55 5.55 1.624 0 3.086-.7 4.1-1.813 8.105 5.624 17.172 10.738 27.023 15.09.542.24 1.085.477 1.628.71-.272.734-.422 1.527-.422 2.356 0 2.218 1.067 4.188 2.715 5.426-5.194 9.767-11.474 19.048-18.794 27.098M76.903 49.38c-1.6-.642-2.95-1.77-3.87-3.204-5.04 2.052-10.386 3.827-15.983 5.264-7.904 2.03-15.698 3.232-23.155 3.67.053.308.08.625.08.947 0 .604-.096 1.184-.274 1.73 8.515 5.913 17.646 10.933 26.79 14.97.62.275 1.246.547 1.874.813 1.243-1.468 3.1-2.4 5.175-2.4.58 0 1.145.073 1.683.21 1.523-3.54 2.91-7.105 4.155-10.66 1.292-3.69 2.474-7.48 3.525-11.34M84.357 18.56L96.59 30.79c-3.038 2.383-6.272 4.575-9.646 6.575-.99-1.578-2.502-2.796-4.294-3.414.862-5.242 1.427-10.387 1.707-15.394"/></g></svg>';
// INCREASE OR DECREACE THE ANIMATION SPEED.
self.timer = 0.9;
self.init = function() {
if(!self.isDevice) {
self.setObj();
self.animation();
} else {
self.wrapperLogo.empty().append(self.mobileLogo);
}
};
self.setObj = function() {
TweenMax.set(self.isoLogo, {attr:{rx: 50, ry: 50}, transformOrigin:"50% 50%", rotation: 90, scale: 0, autoAlpha: 1});
TweenMax.set(self.logoCircle, {transformOrigin:"50% 50%", scale: 2, autoAlpha: 0});
TweenMax.set(self.logoEllipse, {attr:{cx: 100, cy: 150, rx: 180, ry: 180}, strokeWidth: 60, transformOrigin:"50% 50%", autoAlpha: 0});
};
self.animation = function() {
TweenMax.ticker.fps(60);
// SCENES
function rhombusRotation() {
var tl = new TimelineMax();
tl.to(self.isoLogo, 0.6, {
autoAlpha: 1,
scale: 1,
ease: Power1.easeIn
})
.to(self.isoLogo, 0.6, {
attr:{rx: 15, ry: 15},
rotation: -45,
ease: Power1.easeOut
});
return tl;
}
function ellipsesAnimation() {
var tl = new TimelineMax();
tl.to(self.logoEllipse.eq(0), 0.4, {
attr:{
cx: 6,
cy: -64,
rx: 150,
ry: 150
},
strokeWidth: 2,
autoAlpha: 1,
ease: Power2.easeOut
})
.to(self.logoEllipse.eq(1), 0.4, {
attr:{
cx: 138,
cy: -80,
rx: 150,
ry: 150
},
strokeWidth: 2,
autoAlpha: 1,
ease: Power2.easeOut
}, '-=0.2')
.to(self.logoEllipse.eq(2), 0.4, {
attr:{
cx: 190,
cy: 15,
rx: 150,
ry: 150
},
strokeWidth: 2,
autoAlpha: 1,
ease: Power2.easeOut
}, '-=0.2');
return tl;
}
function circleIntersection() {
var tl = new TimelineMax();
tl.staggerFromTo(self.logoCircle, 0.4, {
autoAlpha: 0,
scale: 0
}, {
autoAlpha: 1,
scale: 1,
ease: Cubic.easeInOut
}, 0.1);
return tl;
}
function textAnimation() {
var tl = new TimelineMax();
tl.staggerFromTo(self.wordLogo, 1.5, {
autoAlpha: 0,
scale: 0.8,
x: -20,
transformOrigin: "left center",
ease: Elastic.easeOut.config(1, 0.3)
}, {
autoAlpha:1,
scale: 1,
x: 0,
ease: Elastic.easeOut.config(1, 0.5)
}, 0.05);
return tl;
}
// MASTER SCENES
var master = new TimelineMax({
// LOOP
/*repeat: -1,
repeatDelay: 0.5,
yoyo: true*/
});
master//.add(pulseCircle(), "scene1")
.add(rhombusRotation(), "scene2")
.add(ellipsesAnimation(), "-=0.6", "scene3")
.add(circleIntersection(), "-=0.4", "scene4")
.add(textAnimation(), "-=0.5", "scene5");
master.timeScale(self.timer);
// Control buttons - delete
$('.play').on('click', function(e){
e.preventDefault();
master.play(!master.play());
});
$('.reverse').on('click', function(e){
e.preventDefault();
master.reversed(!master.reversed());
});
};
}
var runLogo;
$(window).load(function() {
runLogo = new logoWebbab();
runLogo.init();
});
//# sourceURL=pen.js
</script>
</body></html>
