Beiträge von Auberginenzwerg

Auberginenzwerg

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;} 
}

Alles anzeigen

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 -->

Alles anzeigen