Skip to content
Permalink
Browse files

modified opening screen, user toggle, waiting for dom notificaiton, a…

…nimations, logo
  • Loading branch information
johnnycoyle committed May 22, 2017
1 parent 8996e62 commit 566f5dc2fa7916dd333e66e5f7cd717637c6bfe0
@@ -1,40 +1,53 @@
@import url('https://fonts.googleapis.com/css?family=Karla|Lato');
#main_container{
position:absolute;
margin:0;
background: #ededed;
width:100%;
font-family: 'Open Sans', sans-serif;
min-width: 300px;
}

@keyframes bannerContainerEnterAnimation {
0% {
transform: translateY(-110%);

}
90% {
transform: translateY(-110%);

}
100% {
transform: translateY(0%);
}
}

#bannerContainer{
position:absolute;
display:block;
width:100%;
height:30px;
background: #fff;
background: rgba(237,237,237, .1);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.26);
font-family: 'Open Sans', sans-serif;
text-align:center;
font-size: 10px;
color:#919191;
letter-spacing:6px;
text-justify: distribute-all-lines;
color:#707070;
font-size:11px;
top:25%;
animation:bannerContainerEnterAnimation 2.5s ease-out;
/*text-justify: distribute-all-lines;*/
}

#bannerText {
margin-top:7px;
#bannerTitle {
letter-spacing:6px;
position:relative;
display:block;
margin-left:2%;
}

@keyframes logoFadeIn {
0% {
/*transform: translateX(-100%);*/
visibility:none;
opacity:0;
}
100% {
visibility:visible;
opacity:1;
}
#bannerByLine {
letter-spacing:2px;
padding:0;
color:#919191;
margin-left:2%;
font-size:9px;
}

.message_container{
@@ -43,87 +56,175 @@
width:100%;
}

/*.message {
position:relative;
display:block;
margin-right:auto;
margin-left:auto;
font-size:14px;
width:fit-content;
height:fit-content;
background: rgba(202,202,202, .9);
box-shadow: 0 2px 5px 0 rgba(145, 145, 145, 0.46);
z-index:1;
border-radius:15px;
padding:10px;
}*/

#toggleMessage{
position:absolute;
text-align:center;
left: 0;
right:0;
top:30px;
top:40px;
margin-right:auto;
margin-left:auto;
font-size:14px;
width:fit-content;
font-size:45px;
font-weight:bolder;
font-family: 'Karla', sans-serif;
height:fit-content;
color:rgba(66,66,66,.7);
background: rgba(213,213,213, .3);
font-weight:bold;
box-shadow: 0 2px 5px 0 rgba(145, 145, 145, 0.96);
border-radius:5px;
padding:10px;
z-index:3;
transition: background 200ms ease-in-out;
box-shadow: 0px 2px 10px 0px rgba(145, 145, 145, 0.66);
padding:5px;
z-index:20;
letter-spacing:30px;
transition: letter-spacing .2s ease-in-out;
background: rgba(139, 237, 255, .25);
}

#toggleMessage:hover{
background: rgba(189,212,175, .5);
transition: background 200ms ease-in-out;
background: rgba(139, 237, 255, .46);
letter-spacing:32px;
}

@keyframes idleListeningAnimation {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}

#listening{
position:absolute;
top:350px;
left: 0;
right:0;
margin-right:auto;
margin-left:auto;
font-size:13px;
width:fit-content;
height:fit-content;
background: rgba(255,127,93, .5);
font-weight:bold;
box-shadow: 0 2px 5px 0 rgba(145, 145, 145, 0.46);
border-radius:5px;
height:50px;
box-shadow: 0px 2px 10px 0px rgba(145, 145, 145, 0.66);
width:100%;
text-overflow: hidden;
overflow:hidden;
background: rgba(255,0,0, .5);
text-align:center;

}

#listen_idle_container{
position:absolute;
font-size:17px;
font-family: 'Karla', sans-serif;
padding:8px;
margin-top:420px;
width:100%;
letter-spacing:5px;
color:rgba(255,255,255,.7);
overflow:hidden;
text-overflow: hidden;
animation: idleListeningAnimation 3s infinite;
}

@keyframes logo_load {
@keyframes logoFadeIn {
0% {
/*transform: translateX(-100%);*/
visibility:none;
transform: translateY(100%);
opacity:0;
}
70% {
visibility:visible;
40% {
/*transform: translateX(-100%);*/
visibility:none;
transform: translateY(100%);
opacity:0;
}
90% {
/*transform: translateX(-100%);*/
opacity:.5;
86% {
visibility:visible;
transform: translateY(-1%);
opacity:1;
transition-timing-function: ease-out;
}
100% {
/*transform: translateX(0);*/
opacity:1
visibility:visible;
transform: translateY(0%);
opacity:1;
transition-timing-function: cubic-bezier(.42,.97,.44,1.5)
}
}

#rpm_logo{
position:fixed;
width:80%;
left:9%;
top:10%;
animation: logoFadeIn 3s ease-out;
display:block;
top:0;
left:0;
right:0;
bottom:0;
margin-top:20%;
margin-right:auto;
margin-left:auto;
width:400px;
animation: logoFadeIn 3s;
}

@keyframes slideDown {
0% {
/*transform: translateX(-100%);*/
transform: translateY(-100%);
opacity:1;
}
97%{
transform: translateY(-1%);
}
100% {
transform: translateY(0%);
}
}

#divider{
position:absolute;
width:100%;
height:400px;
background:linear-gradient(#ededed, #e1e1e1);
animation:slideDown 1s ease-out;
}

@keyframes removeMask {
0% {
/*transform: translateX(-100%);*/
visibility:visible;
transform: translateY(0%);
opacity:1;
}
50% {
/*transform: translateX(-100%);*/
visibility:visible;
transform: translateY(0%);
opacity:1;
}
100% {
visibility:none;
/*transform: translateY(10%);*/

opacity:0;
transition-timing-function: cubic-bezier(1,.26,.44,1.11)
}
}

#logoMask{
position:absolute;
display:inline-block;
bottom:0;
left:0;
right:0;
top:0;
width:100%;
height:400px;
margin-top:80%;
background:#ededed;
/*background:red;*/
/*background: rgba(255,0,0,.3);*/
z-index:999999;
opacity:0;
/*opacity:0;*/
animation: removeMask 5.3s;
}
Binary file not shown.
@@ -2,7 +2,7 @@
0% {
opacity:0;
}
80%{
90%{
opacity:0;
transform:translateY(-100%);
}
@@ -25,36 +25,28 @@
@keyframes slideUp {
0%{
opacity:0;
transform:translateX(300%);
}
40%{
opacity:0;
transform:translateX(300%);
}
98% {
opacity:1;
transform:translateX(-1%);
transform:scaleY(-100%);
}
100%{
transform:translateX(0);
transform:scaleY(100%);
opacity:1;
}
}

.appear.appearActive{
animation-name:fadeIn;
animation-duration:3s;
animation-timing-function: ease-out;
/*transition: opacity 1500ms ease-in;*/
animation-duration:4.5s;
transition-timing-function: ease-out;
/*transition: opacity 0500ms ease-in;*/
}
.enter.enterActive {
animation-name:slideUp;
animation-duration:2s;
animation-timing-function: ease-out;
animation-duration:3s;
transition-timing-function: ease-out;
}
.leave.leaveActive {
animation-name:fadeOut;
animation-duration:300ms;
animation-timing-function: ease-in;
transition-timing-function: ease-in;
}

0 comments on commit 566f5dc

Please sign in to comment.
You can’t perform that action at this time.