Hey Leute,
Ich würde gerne den grauen Streifen aus diesem code 100% Transparent machen und dann quasi das was vorher grau war unscharf machen. Die Animation ist quasi über einem Video. Aber wenn ich es mit :
Code
-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px);under #line versuche, dann wird alles unscharf. Hat einer von euch eine Idee?
Hier der gesamte code:
Code
#line {
background: rgba(37, 48, 74, .8)
}
#name {
color: rgb(255, 179, 61)
}
#tagline {
color: rgb(240, 242, 245)
}
html, body {
margin: 0;
padding: 0;
font-family: 'BigNoodleTitling', sans-serif;
font-style: italic;
}
#notificationHolder {
position: relative;
overflow: hidden;
width: 1920px;
height: 1080px;
top: 0;
left: 0;
}
#line {
width: 0;
height: 0;
position: absolute;
top: 400px;
left: 50%;
margin-left: 0;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
opacity: 0;
-webkit-animation: lineIn 0.2s .6s forwards,
lineGrow 0.4s 1s forwards,
linehide 0.5s 6.7s forwards;
animation: lineIn 0.2s .6s forwards,
lineGrow 0.4s 1s forwards,
linehide 0.5s 6.7s forwards;
}
@-webkit-keyframes lineIn {
0% {width: 0; height: 0px;}
100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}
@keyframes lineIn {
0% {width: 0; height: 0px;}
100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}
@-webkit-keyframes lineGrow {
0% {}
100% {height: 200px; top: 300px;}
}
@keyframes lineGrow {
0% {}
100% {height: 200px; top: 300px;}
}
@-webkit-keyframes linehide {
0% {height: 200px;top: 300px;}
100% {height: 0px; top: 400px;}
}
@keyframes linehide {
0% {height: 200px;top: 300px;}
100% {height: 0px; top: 400px;}
}
#name {
text-align: center;
font-size: 100px;
width: 2200px;
display: block;
line-height: 100px;
text-indent: -3000px;
position: absolute;
top: 30px;
white-space: nowrap;
opacity: 0;
-webkit-animation: textIn 0.4s 1.4s forwards,
textTravel 4.6s 1.8s linear forwards;
animation: textIn 0.4s 1.4s forwards,
textTravel 4.6s 1.8s linear forwards;
}
@-webkit-keyframes textIn {
0% {text-indent: -3000px;opacity: 1;}
100% {text-indent: -20px;opacity: 1;}
}
@keyframes textIn {
0% {text-indent: -3000px;opacity: 1;}
100% {text-indent: -20px;opacity: 1;}
}
@-webkit-keyframes textTravel {
0% {text-indent: -20px;}
90% {text-indent: 20px;}
95% {text-indent: 3000px;}
100% {text-indent: 3000px;}
}
@keyframes textTravel {
0% {text-indent: -20px;}
90% {text-indent: 20px;}
95% {text-indent: 3000px;}
100% {text-indent: 3000px;}
}
#tagline {
text-align: center;
font-size: 40px;
width: 2200px;
display: block;
line-height: 40px;
text-indent: 3000px;
position: absolute;
bottom: 30px;
white-space: nowrap;
opacity: 0;
-webkit-animation: tagIn 0.4s 1.4s forwards,
tagTravel 4.6s 1.8s linear forwards;
animation: tagIn 0.4s 1.4s forwards,
tagTravel 4.6s 1.8s linear forwards;
}
@-webkit-keyframes tagIn {
0% {text-indent: 3000px;opacity: 1;}
100% {text-indent: 20px;opacity: 1;}
}
@keyframes tagIn {
0% {text-indent: 3000px;opacity: 1;}
100% {text-indent: 20px;opacity: 1;}
}
@-webkit-keyframes tagTravel {
0% {text-indent: 20px;}
90% {text-indent: -20px;}
95% {text-indent: -3000px;}
100% {text-indent: -3000px;}
}
@keyframes tagTravel {
0% {text-indent: 20px;}
90% {text-indent: -20px;}
95% {text-indent: -3000px;}
100% {text-indent: -3000px;}
}Und hier die html
Code
<!--start of follow html -->
<div id="notificationHolder">
<div id="followNotification">
<div id="line">
<span id="name">{name}</span>
<span id="tagline">Has Just Followed!</span>
</div>
</div>
<div class="tts" style="display: none;">
{tts_user_message}
</div>
<script>
$( document ).ready(function() {
var audio = new Audio('{audio}');
audio.play();
});
</script>
</div>
<!--end of follow html -->