<div id="container">
<div id="bg"></div>
<div id="vignette"></div>
<div id="bottom-tagline" >Powered by Celtra</div>
<!-- SOUND SWITCH 32 V3 -->
<div id="sound_boxV3" class="Bstep_sound" onClick="SOUND_SWITCH()" >
<div id="unmute" >
<div class="base"><svg class="vector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;">
<path class="st0" d="M27.7 24L20 16.3 20 3.5 12.6 8.8 6.5 2.8 2.3 7 5.3 10 4 10 4 22 11 22 20 28.5 20 24.7 23.5 28.2z"/>
<path class="st1" d="M18 14.2L18 7.5 14.1 10.4z"/>
<path class="st1" d="M7.3 12L6 12 6 20 12 20 18 24.5 18 22.7z"/>
<path transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.5444 15.1361)" class="st1" d="M14 2.5H16V28.5H14z"/></svg></div>
<div id="sound_wave_clipper1">
<div id="sound_wave_clipper2">
<div id="sound_wave_clipperPOS">
<div id="base_wave" class="wave wave_base_animation"> <svg class="vector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;">
<path class="st0" d="M25,6l-5,5v10l5,5l1.5-1.5c2.2-2.2,3.5-5.3,3.5-8.5s-1.2-6.3-3.5-8.5L25,6z"/>
<path class="st1" d="M25.1,8.9l-1.4,1.4c1.4,1.4,2.3,3.4,2.3,5.7s-0.9,4.2-2.3,5.7l1.4,1.4c1.8-1.8,2.9-4.3,2.9-7.1 S26.9,10.7,25.1,8.9z"/></svg></div>
<div id="lil_wave" class="wave wave_little_animation">
<svg class="vector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;">
<path class="st1" d="M22.2,11.8l-1.4,1.4c0.7,0.7,1.2,1.7,1.2,2.8s-0.4,2.1-1.2,2.8l1.4,1.4 c1.1-1.1,1.8-2.6,1.8-4.2S23.3,12.8,22.2,11.8z"/></svg></div>
</div>
</div>
</div>
</div>
<div id="mute" >
<div class="base"><svg class="vector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;">
</style><path class="st0" d="M20,3.5L11,10H4v12h7l9,6.5V3.5z"/>
<path class="st1" d="M6,12v8h6l6,4.5v-17L12,12H6z"/></svg></div>
<div id="base_wave" class="wave "> <svg class="vector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;">
<path class="st0" d="M25,6l-5,5v10l5,5l1.5-1.5c2.2-2.2,3.5-5.3,3.5-8.5s-1.2-6.3-3.5-8.5L25,6z"/>
<path class="st1" d="M25.1,8.9l-1.4,1.4c1.4,1.4,2.3,3.4,2.3,5.7s-0.9,4.2-2.3,5.7l1.4,1.4c1.8-1.8,2.9-4.3,2.9-7.1 S26.9,10.7,25.1,8.9z"/></svg></div>
<div id="lil_wave" class="wave ">
<svg class="vector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;">
<path class="st1" d="M22.2,11.8l-1.4,1.4c0.7,0.7,1.2,1.7,1.2,2.8s-0.4,2.1-1.2,2.8l1.4,1.4 c1.1-1.1,1.8-2.6,1.8-4.2S23.3,12.8,22.2,11.8z"/></svg></div>
</div>
</div>
<!-- LOADER 32 tp COUNTDWON TO REPLAY -->
<div id="loader_countdown_replay_box">
<!-- LOADER 32 -->
<div id="loader_box" class="Astep_loader">
<div id="loader_rotator">
<svg class="loader-circular" viewBox="0 0 32 32"><circle class="loader-path" cx="16" cy="16" r="12" fill="none" stroke-width="2" /></svg>
<svg class="loader-circular-bg" viewBox="0 0 32 32"><circle class="loader-path-bg" cx="16" cy="16" r="12" fill="none" stroke-width="6" /></svg>
</div>
</div>
<!-- COUNTDOWN 32 -->
<div id="countdown_box" class="Bstep_countdown">
<div class="counterbg"></div>
<div class="counter"></div>
<svg class="countdown-circular" viewBox="0 0 32 32"><circle class="countdown-path"cx="16"cy="16"r="12"fill="none"stroke-width="2"/></svg>
</div>
<!-- REPLAY -->
<div id="replay_box" class="Cstep_replay" onClick="">
<div class="replayer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M25.9,6.1l-1.4-1.4l-4.2,4.2l1.4,1.4c3.1,3.1,3.1,8.2,0,11.3C20.1,23.2,18.1,24,16,24s-4.1-0.8-5.7-2.3 c-1.8-1.8-2.6-4.2-2.3-6.5l1.3,1.3l4.4-13.2L0.6,7.6l2.3,2.3l0.4,0.4C0.9,15.5,2,21.8,6.1,25.9C8.7,28.5,12.3,30,16,30 s7.3-1.5,9.9-4.1C31.4,20.4,31.4,11.6,25.9,6.1z" class="st0"/><path id="path-1_1_" d="M23.1,8.9c3.9,3.9,3.9,10.2,0,14.1S12.9,26.9,9,23c-3.2-3.2-3.8-7.9-1.8-11.7l1.4,1.4l2.1-6.4 L4.3,8.5l1.4,1.4C3,14.5,3.6,20.5,7.5,24.5c4.7,4.7,12.3,4.7,17,0s4.7-12.3,0-17L23.1,8.9z" class="st1"/></svg></div>
</div>
</div>
<!--BI RADAR 32 -->
<div id="radar_box" class="Astep_radar" onClick="RADAR()">
<div id="radarbg"></div>
<div id="radardot"></div>
<div id="radarring"></div>
<div id="radarpizza" class="radar-pizza-spin"></div>
<div id="radardotYcontainer" class="radar-y-spin">
<div id="radarYdot"></div>
</div>
</div>
<!-- 360 spinner V3-->
<div id="bigplay_box" onClick="REPLAY360()">
<div id="spinner360">
<div id="t360"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M55.9,55.2c0,3.6-2.4,5.9-5.9,5.9c-3.8,0-5.9-2.9-5.9-5.8c0-3.6,2.4-5.9,5.9-5.9 C53.4,49.4,55.9,51.7,55.9,55.2 M51.6,43.6c-0.7,0-1.4,0-2.1,0.1l8.4-12h-8.7l-8.7,13.2c-2.4,3.7-3.7,6.4-3.7,10.3 c0,6.8,5.7,12.1,13.2,12.1c7.6,0,13.2-5.1,13.2-12.4C63.2,48.6,58,43.6,51.6,43.6" class="st1"/>
<path d="M30,48.7c2.9-1.3,4.6-4.1,4.6-7.4c0-5.8-4.5-9.6-11.3-9.6c-5.5,0-10.1,3.3-11.4,7.9l-0.1,0.7 l6.6,1.7l0.1-0.7c0.7-2.4,2.4-3.7,4.6-3.7s4.6,1.3,4.6,4.1c0,2.9-2.1,4.2-6.4,4.2h-2.1v5.7h2.1c1.2,0,7.4,0.3,7.4,4.9 c0,3.6-2.8,4.7-5.4,4.7c-2.9,0-5.1-1.6-5.9-4.1l-0.1-0.7l-6.6,2l0.3,0.7c1.7,5.3,6.2,8.2,12.6,8.2c6.1,0,12.2-3.7,12.2-10.7 C35.5,53.1,33.4,50,30,48.7" class="st1"/>
<path d="M94.1,40c-1.3,0-2.4-1.1-2.4-2.4s1.1-2.4,2.4-2.4s2.4,1.1,2.4,2.4S95.4,40,94.1,40 M94.1,31.7 c-3.3,0-5.9,2.6-5.9,5.9s2.6,5.9,5.9,5.9s5.9-2.6,5.9-5.9S97.4,31.7,94.1,31.7" class="st1"/>
<path d="M77,61.2c-5,0-5.4-8.9-5.4-11.7c0-2,0.3-11.8,5.4-11.8c4.9,0,5.3,9.1,5.3,11.8 C82.4,52.3,82,61.2,77,61.2 M85.7,35.7c-2.1-2.6-5-3.9-8.6-3.9c-7.9,0-12.5,6.6-12.5,17.8C64.5,60.7,69.2,67.3,77,67.3 s12.5-6.6,12.5-17.8c0-1.3-0.1-2.6-0.3-3.9C86.8,44.1,84.2,40.3,85.7,35.7z" class="st1"/></svg></div>
<div id="disk"><div class="ring spin1"></div></div>
<div id="diskbg"></div>
</div>
<div id="bigplay">
<div class="bigplaycircle"></div>
<div class="bigplaytriangle"></div>
</div>
</div>
<!-- FULL SCREEN 32 -->
<div id="fullscreen_box" class="Astep_fullscreen">
<div id="topright" class="corner" onClick="FULLSCREEN_SWITCH()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M16 6L6 16 13 16 13 22 19 22 19 16 26 16z" class="st0"/>
<path d="M17,14v6h-2v-6h-4l5-5l5,5H17z" class="st1"/></svg>
</div>
<div id="botleft" class="corner" onClick="FULLSCREEN_SWITCH()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M16 6L6 16 13 16 13 22 19 22 19 16 26 16z" class="st0"/>
<path d="M17,14v6h-2v-6h-4l5-5l5,5H17z" class="st1"/></svg></div>
</div>
</div>
</div>
$BG : rgba(0,0,0,.4);
$FG : rgba(255,255,255,1);
$WAVE: .6666s;
$BOX : none;
body {font-family: "Arial"; background:#000; margin: 0;}
.st0{ fill:$BG; enable-background:new ;}
.st1{ fill:$FG;}
#container {
width: 375px; height: 557px;
//background: #333;
position: absolute;
// top: 0;
//left: 50%;
// transform: translate3d(-50%, 50%, 0) scale(1,1);
}
#bg { width: 375px; height: 557px;
position: absolute;
background: salmon;
//background-image: url('http://lorempixel.com/375/557/');
//background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/767851/bg.jpg');
}
/* VIGNETTE */
#vignette {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
background: gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .2)));
background: radial-gradient(center, circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .2) 100%);
background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .2) 100%);
}
/* BOTTOM TAGLINE */
#bottom-tagline {
font-family: 'Arial';
font-size: 12px;
font-weight: 400;
position: absolute;
z-index: 0;
bottom: 21px;
width: 100%;
line-height: 12px;
text-align: center;
letter-spacing: 0.5px;
pointer-events: none;
opacity: .45;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
#sound_boxV3{ right: 62px ; bottom: 20px; background:$BOX; }
#loader_countdown_replay_box {position:absolute; left: 20px; top: 20px; width:32px; height:32px; background:$BOX; }
#radar_box { left: 62px ; top: 20px; background:$BOX; }
/* SOUND V3**/
#sound_boxV3{
position: absolute;
width:32px;
Height:32px;
z-index: 100;
}
.vector{
width:32px;
height:32px;
// background:rgba(130,23,79,.5);
}
.Bstep_sound{
//animation: STEPBSOUND .333s 1.5s ease-out forwards;
}
@keyframes STEPBSOUND {
0% {transform: scale(.6) ; opacity:0;}
100% {transform: scale(1) ; opacity:1;}
}
#mute{
position:absolute;
width:32px;
height:32px;
}
#unmute{
position:absolute;
width:32px;
height:32px;
}
.base{position: absolute;z-index:300;}
.wave{position:absolute;z-index:0;}
.wave_base_animation{ animation: wave_base_animation $WAVE ease-in-out infinite;}
@keyframes wave_base_animation {
0%,100% {transform: translate3d( 0, 0, 0) scale(1); }
50% {transform: translate3d( -2px, 0, 0) scale(.9); }
}
.wave_little_animation{animation: wave_little_animation $WAVE ease-in-out infinite;}
@keyframes wave_little_animation {
0%,100% {transform: translate3d( 0, 0, 0) scale(1); }
50% {transform: translate3d( -1px, 0, 0) scale(.9); }
}
#sound_wave_clipper1 {
//background:salmon; opacity:.5;
position: absolute;
width: 32px;
height: 32px;
transform: rotate( 45deg) translate(0,-58.3%);
overflow:hidden;
}
#sound_wave_clipper2 {
//background:pink; opacity:.5;
position: absolute;
width: 12px;
height: 32px;
transform: rotate(-45deg) translate(32.25%,50%);
overflow:hidden;
}
#sound_wave_clipperPOS {
position: absolute;
transform: translate(-20px,4px);
}
.switch_on{
animation: switch_on .4s ease forwards ;}
@keyframes switch_on {
0% {transform: scale(0); opacity:0; }
100% {transform: scale(1); opacity:1; }
}
.switch_off{ animation: switch_off .4s ease forwards ;}
@keyframes switch_off {
0% {transform: scale(1); opacity:1; }
100% {transform: scale(0); opacity:0; }
}
/* BI RADAR 32*//////// CLICK ON THE ICON WILL MOVE CAMERA TO STARTING POINT!
#radar_box {
position: absolute;
z-index: 50;
width: 32px;
height: 32px;
cursor:pointer;
}
.Astep_radar{
animation: STEPARADAR .333s ease-out forwards;
}
@keyframes STEPARADAR {
0% {transform: scale(.6) ; opacity:0;}
100% {transform: scale(1) ; opacity:1;}
}
#radarbg { background: $BG;
position:absolute;
width: 30px;
height: 30px;
z-index:100;
top: 50%; left: 50%; transform: translate(-50%,-50%);
border-radius: 15px;
}
#radardot { background: $FG;
position: absolute;
z-index: 151;
width: 4px;
height: 4px;
border-radius: 50%;
left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#radarring { border: 2px solid $FG;
position: absolute;
z-index: 152;
width: 22px;
height: 22px;
border-radius: 100%;
left: 50%;top: 50%; transform: translate(-50%, -50%);
}
#radarpizza{ border: 5px solid $FG;
position: absolute;
z-index: 153;
width: 8px;
height: 8px;
border-radius: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
left: 50%;top: 50%; transform: translate(-50%, -50%) rotate(0deg);
}
.radar-pizza-spin{animation: RADARPIZZA 2s linear infinite;}
@keyframes RADARPIZZA {
0% {transform: translate3d(-50%, -50%, 0) rotate(0deg);}
100% {transform: translate3d(-50%, -50%, 0) rotate(360deg);}
}
.radar-pizza-out{animation: RADARPIZZAOUT 2s ease forwards;}
@keyframes RADARPIZZAOUT {
0% {transform:translate3d(-50%, -50%, 0) rotate(90deg);}
100% {transform: translate3d(-50%, -50%, 0) rotate(360deg);}
}
#radarYdot { background: $FG;
position: absolute;
z-index: 154;
width: 4px;
height: 4px;
border-radius: 100%;
left: 50%; top: 50%; transform: translate( -15px , -50%) rotate(0deg);
}
#radardotYcontainer {
z-index: 154;
position:absolute;
width: 32px;
height: 32px;
left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg);
}
.radar-y-spin {animation: RADARY 4s linear infinite;}
@keyframes RADARY {
0% {transform: translate3d(-50%, -50%, 0) rotate(90deg);}
50% {transform: translate3d(-50%, -50%, 0) rotate(270deg);}
100% {transform: translate3d(-50%, -50%, 0) rotate(90deg);}
}
.radar-y-out{animation: RADARYOUT 2s ease forwards;}
@keyframes RADARYOUT {
0% {transform: translate3d(-50%, -50%, 0) rotate(270deg);}
100% {transform:translate3d(-50%, -50%, 0) rotate(180deg);}
}
/* LOADER */
#loader_box {
position: absolute;
width: 32px;
height: 32px;
z-index:100;
}
#loader_rotator {
position: absolute;
width: 32px;
height: 32px;
animation: LOADERROTORFULL 1.6s linear infinite;
}
@keyframes LOADERROTORFULL {
0% {transform: rotate( 0deg);}
100% {transform: rotate(360deg);}
}
.loader-circular {
position: absolute;
left: 0;
z-index: 100;
animation: ROTOR 2s ease infinite;
}
.loader-circular-bg {
position: absolute;
left: 0;
z-index: 20;
animation: ROTOR 2s ease infinite; /* KILL THE DONUT */
}
.loader-path { stroke: $FG;
stroke-linecap: square;
animation: DASHLOADER 2s ease infinite;
}
.loader-path-bg { stroke: $BG;
stroke-linecap: square;
animation: DASHLOADER 2s ease infinite; /* KILL THE DONUT */
}
@keyframes ROTOR {
0%, 50% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes DASHLOADER {
0%, 100% { stroke-dasharray: 2px, 90px; stroke-dashoffset: 0; }
50% { stroke-dasharray: 70px, 90px; stroke-dashoffset: 0; }
}
.Astep_loader{
animation: STEPALOADER 4.5s ease forwards;
}
@keyframes STEPALOADER {
0%, 100% {transform: scale(1); opacity:0;}
10%, 90% {transform: scale(1); opacity:1;}
}
/* COUNTDOWN */
#countdown_box {
position: absolute;
width: 32px;
height: 32px;
z-index:100;
}
.Bstep_countdown{
opacity:0;
animation: STEPBCOUNTDOWN 5s 4s ease forwards;
}
@keyframes STEPBCOUNTDOWN {
0%, 100% {transform: scale(0); opacity:0;}
10%, 96% {transform: scale(1); opacity:1;}
}
.counterbg {background:$BG;
position: absolute;
width: 30px;
height: 30px;
z-index:100;
top: 50%; left: 50%; transform: translate(-50%,-50%);
border-radius: 15px;
}
.countdown-circular {
position: absolute;
z-index: 100;
transform: rotate( -90deg);
}
.countdown-path { stroke:$FG;
stroke-linecap: square;
animation: DASHCOUNTDOWN 5s 4s linear forwards;
}
@keyframes DASHCOUNTDOWN {
0% {stroke-dasharray: 1px, 100px; stroke-dashoffset: 0;}
100% {stroke-dasharray: 72px, 100px; stroke-dashoffset: 0;}
}
.counter:before { color:$FG;
position: absolute;
z-index:100;
font-family: Arial;
font-size: 12px;
font-weight:900;
letter-spacing: 0;
text-align: center;
left:51%; /* OPTICAL CENTERING */
top:51%; /* OPTICAL CENTERING */
transform: translate(-50%, -50%);
content: "9";
animation: COUNTDOWN 5s 4s linear forwards;
}
@keyframes COUNTDOWN {
0% {content: "10";}
15% {content: "9";}
20% {content: "8";}
30% {content: "7";}
40% {content: "6";}
50% {content: "5";}
60% {content: "4";}
70% {content: "3";}
80% {content: "2";}
90% {content: "1";}
94% {content: "0";}
100% {content: "0";}
}
/* REPLAY */
#replay_box {
position: absolute;
z-index: 160;
width: 32px;
height: 32px;
}
.replayer {
position: absolute;
z-index: 160;
width: 32px;
height: 32px;
cursor: pointer;
transform: rotate(45deg) scale(1);
}
.Cstep_replay{
opacity:0;
animation: STEPCREPLAY 1.5s 8.6s ease forwards;
}
@keyframes STEPCREPLAY {
0% {transform: rotate( -50deg) scale(1); opacity:0; }
100% {transform: rotate( 360deg)scale(1); opacity:1; }
}
/* CENTRAL SPINNER 360*/
#bigplay_box {
position: absolute;
z-index:40;
left: 50%;
top: 50%;
cursor:pointer;
}
#spinner360 {
position: absolute;
width:32px;height:32px;
z-index:0;
left:50%; top:50%;
animation: SPINNER360 4s ease forwards;
}
@keyframes SPINNER360 {
0%, 100% {transform: translate(-50%,-50%) scale(0) ;}
10%,90% {transform:translate(-50%,-50%) scale(1);}
}
#diskbg {
background: $BG;
width: 84px;
height: 84px;
position: absolute;
z-index: 0;
left:50%; top:50%;
border-radius:50%;
transform: translate(-50%,-50%);
}
#disk {
width: 90px;
height: 90px;
position: absolute;
z-index: 100;
left:50%; top:50%;
perspective: 94px;
transform-style: preserve-3d;
//border-radius:50%;
//animation: DISK 2s ease infinite;
transform: translate(-50%,-50%) rotatex( -28deg) rotatey( 0deg) rotatez( 0deg);
}
.ring {
position:absolute;
clip: rect(0, 80px, 80px, 40px);
height: 80px;
width: 80px;
//background:rgba(120,120,120,.5);
//perspective: 10000px;
transform-style: preserve-3d;
}
.ring:after {
clip: rect(0, 80px, 80px, 40px);
content:'';
//background:rgba(120,120,120,1);
border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
//box-shadow: inset #fff 0 0 0 10px;
animation: animate2 1.8s ease-in-out infinite;
}
@keyframes animate2 {
0%,40% {
box-shadow: inset $FG 0 0 0 2px;
transform: rotate( -180deg) scale(.9) ;opacity:0;
}
70% {
box-shadow: inset $FG 0 0 0 8px;opacity:1;
}
100% {
box-shadow: inset $FG 0 0 0 2px;
transform: rotate( 180deg) scale(.9) ; opacity:0;
}
}
.spin1{animation: LOADER1 1.8s linear infinite;}
@keyframes LOADER1 {
0%,40%{ transform: translate(5px, 0px) rotatex( 90deg) rotatey(0deg) rotatez( 0deg); }
100% { transform: translate(5px, 4px) rotatex( 90deg) rotatey(0deg) rotatez( 180deg); }
}
#t360 {
position: absolute;
z-index: 100;
width: 80px;
height: 80px;
transform-style: preserve-3d;
left: 50%;top:50%;
animation: T360 1.8s infinite ease;
}
@keyframes T360 {
0%, 40%, 100% { transform: translate3d(-50%, -50%, 0) rotatex( 0deg) rotatey( 0deg) rotatez( 0deg) scale(.9) ; }
70% { transform: translate3d(-50%, -50%, 0) rotatex( 0deg) rotatey( 0deg) rotatez( 0deg) scale(.8) ; }
}
#bigplay {
position: absolute;
z-index:40;
transform: scale(0);
animation: BIGPLAY .166s 3.9s ease forwards;
}
@keyframes BIGPLAY {
0% {transform: scale(0) rotate(0deg);}
100% { transform: scale( 1) rotate(0deg);}
}
.bigplaycircle { background: $BG;
width: 84px;
height: 84px;
position: absolute;
transform: translate(-50%, -50%) scale(1, 1);
border-radius: 100%;
}
.bigplaytriangle {
position: absolute;
z-index:100;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 34px solid $FG;
border-bottom: 20px solid transparent;
left:5px; /* OPTICAL CENTERING */
top:50%; /* OPTICAL CENTERING */
transform: translate(-50%, -50%);
}
/* FULLSCREEN V3 */
#fullscreen_box{
right: 20px; bottom: 20px;
position: absolute;
z-index:100;
width: 32px;
height: 32px;
cursor:pointer;
}
.corner {
position: absolute;
width: 32px;
height: 32px;
cursor:pointer;
}
#topright {top: -9px; right: -9px; transform: translate( -4px, 4px) rotate(45deg);}
#botleft {bottom: -9px; left: -9px; transform: translate( 4px,-4px) rotate(225deg);}
.toprightANIMA { animation: TOPRIGHT .4s ease forwards;}
.botleftANIMA { animation: BOTLEFT .4s ease forwards;}
.toprightANIMAout { animation: TOPRIGHTOUT .4s ease forwards ;}
.botleftANIMAout { animation: BOTLEFTOUT .4s ease forwards ;}
@keyframes TOPRIGHT {
0% {transform: translate(-2px, 2px) rotate(-135deg);}
30% {transform: translate( 2px,-2px) rotate(-45deg);}
100% {transform: translate(-4px, 4px) rotate(45deg);}
}
@keyframes BOTLEFT {
0% {transform: translate( 2px, -2px) rotate(45deg);}
30% {transform: translate(-2px, 2px) rotate(135deg);}
100% {transform: translate( 4px, -4px) rotate(225deg);}
}
@keyframes TOPRIGHTOUT {
0% {transform: translate(-4px, 4px) rotate(45deg);}
30% {transform: translate( 2px, -2px) rotate(45deg);}
100% {transform: translate(-2px, 2px) rotate(225deg);}
}
@keyframes BOTLEFTOUT {
0% {transform: translate(4px, -4px) rotate(225deg);}
30% {transform: translate(-2px, 2px) rotate(225deg);}
100% {transform: translate(2px, -2px) rotate(405deg);}
}
.Astep_fullscreen{
animation: STEPAFULLSCREEN .333s ease-out forwards;
}
@keyframes STEPAFULLSCREEN {
0% {transform: scale(.6) ; opacity:0;}
100% {transform: scale(1) ; opacity:1;}
}
//MUTE UNMUTE V3
//var INTERVALLER = setInterval(stopanima, 3000);
// function stopanima() {
// animS.classList.remove("unmuteswave");
// animB.classList.remove("unmutebwave");
// clearInterval(INTERVALLER);
// }
var audio = new Audio('https://dl.dropboxusercontent.com/u/579764974/deliver/song.mp3');
var unmute = document.getElementById("unmute");
var mute = document.getElementById("mute");
var sound_is_off = true;
mute.classList.add("switch_off");
function SOUND_SWITCH() {
//console.log(sound_is_off);
if (sound_is_off) {
//audio.currentTime = 0
audio.play();
mute.classList.remove("switch_off");
void mute.offsetWidth;
mute.classList.add("switch_on");
unmute.classList.remove("switch_on");
void unmute.offsetWidth;
unmute.classList.add("switch_off");
window.sound_is_off = false;
} else {
audio.pause();
mute.classList.remove("switch_on");
void mute.offsetWidth;
mute.classList.add("switch_off");
unmute.classList.remove("switch_off");
void unmute.offsetWidth;
unmute.classList.add("switch_on");
window.sound_is_off = true;
}
}
//MAXIMIZE MINIMIZE
var tr = document.getElementById("topright");
var bl = document.getElementById("botleft");
var fullscreen_is_on = false;
function FULLSCREEN_SWITCH() {
//console.log(fullscreen_is_on);
if (fullscreen_is_on) {
tr.classList.remove("toprightANIMAout");
void tr.offsetWidth;
tr.classList.add("toprightANIMA");
bl.classList.remove("botleftANIMAout");
void bl.offsetWidth;
bl.classList.add("botleftANIMA");
window.fullscreen_is_on = false;
} else {
tr.classList.remove("toprightANIMA");
void tr.offsetWidth;
tr.classList.add("toprightANIMAout");
bl.classList.remove("botleftANIMA");
void bl.offsetWidth;
bl.classList.add("botleftANIMAout");
window.fullscreen_is_on = true;
}
}
////////
function REPLAY360() {
var elm = document.getElementById("bigplay_box");
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
}
var rotX = document.getElementById("radarpizza");
var rotY = document.getElementById("radardotYcontainer");
function RADAR() {
rotX.classList.remove("radar-pizza-spin");
rotY.classList.remove("radar-y-spin");
rotX.classList.add("radar-pizza-out");
rotY.classList.add("radar-y-out");
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.