<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/jhealey5/pen/jWqveR?limit=all&page=6&q=sms" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Raleway:900);
body {
background-color: #dcdfdf;
overflow: hidden;
padding-top: 50px;
cursor: pointer;
}
.outer {
width: 865px;
height: 605px;
margin: auto;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.outer.d3.stage-1 {
-webkit-transform: rotateY(-10deg) rotateX(-10deg);
transform: rotateY(-10deg) rotateX(-10deg);
-webkit-transition: .9s ease;
transition: .9s ease;
}
.outer.d3.stage-2 {
-webkit-transform: rotateY(20deg) rotateX(20deg);
transform: rotateY(20deg) rotateX(20deg);
-webkit-transition: 2.3s ease;
transition: 2.3s ease;
}
.outer.d3.stage-3 {
-webkit-transform: rotateY(-10deg) rotateX(-10deg);
transform: rotateY(-10deg) rotateX(-10deg);
-webkit-transition: .8s ease;
transition: .8s ease;
}
.outer.d3.stage-4 {
-webkit-transform: rotateY(20deg) rotateX(20deg);
transform: rotateY(20deg) rotateX(20deg);
-webkit-transition: 2.3s ease;
transition: 2.3s ease;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.inner--1 {
display: none;
}
.blend .inner--1 {
display: block;
-webkit-filter: url(#blend);
filter: url(#blend);
}
.inner--2 {
z-index: 2;
}
.text {
font-size: 100px;
line-height: .78;
font-family: sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 3;
font-family: raleway;
font-style: italic;
white-space: nowrap;
}
.d3 .text {
-webkit-transform: translate3d(-50%, -50%, 80px);
transform: translate3d(-50%, -50%, 80px);
}
.text strong {
-webkit-text-fill-color: #fff;
}
p.text {
-webkit-text-stroke-width: 1px;
font-size: 60px;
line-height: 1;
}
.slice {
display: block;
-webkit-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1);
transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.stage-1 .slice {
opacity: 0;
}
.stage-1 .slice--1 {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slice--2 {
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.stage-1 .slice--2 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.slice--3 {
-webkit-transition-delay: .7s;
transition-delay: .7s;
}
.stage-1 .slice--3 {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slice--4 {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.stage-2 .slice--4 {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.stage-3 .slice--4 {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.slice--5 {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.stage-2 .slice--5 {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.stage-3 .slice--5 {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slice--6 {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition-delay: .7s;
transition-delay: .7s;
}
.stage-2 .slice--6 {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.stage-3 .slice--6 {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.slice--7 {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.stage-4 .slice--7 {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.slice--8 {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition-delay: .7s;
transition-delay: .7s;
}
.stage-4 .slice--8 {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.slice--9 {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.stage-4 .slice--9 {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.slice--10 {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition-delay: 1.3s;
transition-delay: 1.3s;
}
.stage-4 .slice--10 {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
.orb {
border-radius: 50%;
position: absolute;
-webkit-transition: 1.4s cubic-bezier(0.86, 0, 0.07, 1);
transition: 1.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.orb:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(18px);
filter: blur(18px);
border-radius: 50%;
box-shadow: 0 0 8px #c2ede6;
-webkit-transition: 1.4s cubic-bezier(0.86, 0, 0.07, 1);
transition: 1.4s cubic-bezier(0.86, 0, 0.07, 1);
-webkit-animation: move ease 10s infinite;
animation: move ease 10s infinite;
}
.blend .orb:before {
-webkit-filter: blur(30px);
filter: blur(30px);
box-shadow: 0 0 200px #5992f6;
}
.orb--1 {
width: 280px;
height: 280px;
left: 0;
bottom: 50px;
/* outline: 1px solid red; */
}
.orb--1:before {
background-image: -webkit-radial-gradient(bottom 35% right 32% circle, #5992f6 35%, #c2ede6 75%);
background-image: radial-gradient(circle at bottom 35% right 32%, #5992f6 35%, #c2ede6 75%);
}
.stage-2 .orb--1 {
-webkit-transform: translate(0%, -20%) scale(4) rotate(100deg);
transform: translate(0%, -20%) scale(4) rotate(100deg);
}
.stage-4 .orb--1 {
-webkit-transform: translate(110%, 150%) scale(6) rotate(10deg);
transform: translate(110%, 150%) scale(6) rotate(10deg);
}
.stage-4 .orb--1:before {
-webkit-filter: blur(8px);
filter: blur(8px);
}
.orb--2 {
width: 345px;
height: 345px;
left: 110px;
top: 25px;
/* outline: 1px solid orange; */
}
.orb--2:before {
background-image: -webkit-radial-gradient(bottom 0% left 48% circle, #5992f6 35%, #c2ede6 75%);
background-image: radial-gradient(circle at bottom 0% left 48%, #5992f6 35%, #c2ede6 75%);
-webkit-animation-delay: -18s;
animation-delay: -18s;
}
.stage-2 .orb--2 {
-webkit-transform: translate(-100%, -40%) rotate(30deg);
transform: translate(-100%, -40%) rotate(30deg);
}
.stage-2 .orb--2:before {
-webkit-filter: blur(8px);
filter: blur(8px);
}
.stage-4 .orb--2 {
-webkit-transform: translate(-40%, -80%) scale(3) rotate(40deg);
transform: translate(-40%, -80%) scale(3) rotate(40deg);
}
.stage-4 .orb--2:before {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.orb--3 {
width: 340px;
height: 340px;
right: 290px;
bottom: 0;
/* outline: 1px solid pink; */
}
.orb--3:before {
background-image: -webkit-radial-gradient(bottom 40% left 12% circle, #5992f6 25%, #c2ede6 85%);
background-image: radial-gradient(circle at bottom 40% left 12%, #5992f6 25%, #c2ede6 85%);
-webkit-animation-delay: -14s;
animation-delay: -14s;
}
.stage-2 .orb--3 {
-webkit-transform: translate(150%, -120%) scale(2) rotate(-120deg);
transform: translate(150%, -120%) scale(2) rotate(-120deg);
}
.stage-4 .orb--3 {
-webkit-transform: translate(100%, -50%) scale(1) rotate(-90deg);
transform: translate(100%, -50%) scale(1) rotate(-90deg);
}
.orb--4 {
width: 335px;
height: 335px;
right: 130px;
top: 0;
/* outline: 1px solid green; */
}
.orb--4:before {
background-image: -webkit-radial-gradient(bottom 0% left 42% circle, #5992f6 35%, #c2ede6 75%);
background-image: radial-gradient(circle at bottom 0% left 42%, #5992f6 35%, #c2ede6 75%);
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.stage-2 .orb--4 {
-webkit-transform: translate(-50%, 115%) rotate(-60deg);
transform: translate(-50%, 115%) rotate(-60deg);
z-index: 4;
}
.stage-2 .orb--4:before {
-webkit-filter: blur(8px);
filter: blur(8px);
}
.stage-4 .orb--4 {
-webkit-transform: translate(140%, -80%) scale(2) rotate(-90deg);
transform: translate(140%, -80%) scale(2) rotate(-90deg);
}
.stage-4 .orb--4:before {
-webkit-filter: blur(12px);
filter: blur(12px);
}
.orb--5 {
width: 290px;
height: 290px;
right: 0;
bottom: 40px;
}
.orb--5:before {
background-image: -webkit-radial-gradient(bottom 0% left 35% circle, #5992f6 20%, #c2ede6 60%);
background-image: radial-gradient(circle at bottom 0% left 35%, #5992f6 20%, #c2ede6 60%);
-webkit-animation-delay: -24s;
animation-delay: -24s;
}
.stage-2 .orb--5 {
-webkit-transform: translate(50%, 80%) scale(1.5) rotate(-90deg);
transform: translate(50%, 80%) scale(1.5) rotate(-90deg);
}
.stage-2 .orb--5:before {
-webkit-filter: blur(8px);
filter: blur(8px);
}
.stage-4 .orb--5 {
-webkit-transform: translate(-120%, 80%) scale(2) rotate(-100deg);
transform: translate(-120%, 80%) scale(2) rotate(-100deg);
z-index: 1;
}
.stage-4 .orb--5:before {
-webkit-filter: blur(10px);
filter: blur(10px);
}
@-webkit-keyframes move {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
33% {
-webkit-transform: scale(0.9) translate(20px, 0);
transform: scale(0.9) translate(20px, 0);
}
68% {
-webkit-transform: scale(0.8) translate(20px, 20px);
transform: scale(0.8) translate(20px, 20px);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
@keyframes move {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
33% {
-webkit-transform: scale(0.9) translate(20px, 0);
transform: scale(0.9) translate(20px, 0);
}
68% {
-webkit-transform: scale(0.8) translate(20px, 20px);
transform: scale(0.8) translate(20px, 20px);
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
}
}
</style></head><body>
<div class="outer">
<div class="inner inner--1">
<div class="orb orb--1"></div>
<div class="orb orb--2"></div>
<div class="orb orb--3"></div>
<div class="orb orb--4"></div>
<div class="orb orb--5"></div>
</div>
<div class="inner inner--2">
<div class="orb orb--1"></div>
<div class="orb orb--2"></div>
<div class="orb orb--3"></div>
<div class="orb orb--4"></div>
<div class="orb orb--5"></div>
</div>
<h1 class="text text--1">
<strong class="slice slice--1">click</strong>
<strong class="slice slice--2">this </strong>
<span class="slice slice--3">here</span>
</h1>
<h2 class="text text--2">
<span class="slice slice--4">Customer</span>
<strong class="slice slice--5">Connections </strong>
<span class="slice slice--6">In The <strong>Cloud</strong></span>
</h2>
<p class="text text--3">
<span class="slice slice--7">Handle your <strong>Voice,</strong></span>
<span class="slice slice--8"><strong>Emails, SMS</strong> and <strong>Chat</strong></span>
<span class="slice slice--9">from anywhere using</span>
<span class="slice slice--10">our <strong>cloud</strong> platform</span>
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blend">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="blend" />
<feBlend in="SourceGraphic" in2="blend" />
</filter>
</defs>
</svg>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(document).ready(function() {
handleStages();
//handleMouse();
});
function handleStages() {
var stage = 0;
$('body').on('click', function() {
if (stage == 0) {
$('.outer').addClass('stage-1');
stage++;
setTimeout(function() {
$('.outer').addClass('stage-2');
stage++;
}, 900);
}
if (stage == 2) {
$('.outer').addClass('stage-3');
stage++;
setTimeout(function() {
$('.outer').addClass('stage-4');
stage++;
}, 900);
}
if (stage == 4) {
$('.outer').removeClass('stage-1 stage-2 stage-3 stage-4');
stage = 0;
}
});
}
function handleMouse() {
$(document).on('mousemove', function(e){
var cX = e.clientX,
cY = e.clientY,
degX = (cX * 0.02) - 12,
degY = (cY * 0.02) - 12;
$('.outer').css('transform', 'rotateY('+degX+'deg) rotateX('+degY+'deg)');
});
}
//# sourceURL=pen.js
</script>
</body></html>
