Led laufschrieft

led laufschrieft versuch

by basti1012

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

<p class="animationSandbox" id="small">
    
   Vorschau Effekt</p> 
<div id="ein">
  <br>
  <br>
  <br>
  <form>
    <select class="input input--dropdown js--animations">
      <optgroup label="By Basti1o12">
             <option value="1">LetterSpacing</option>
        <option value="letter"> </option>
        <option value="letter"> </option>   
        
        
      </optgroup>
      
      
            <optgroup  label="Attention Seekers">
        <option value="bounce">bounce</option>
        <option value="flash">flash</option>
        <option value="pulse">pulse</option>
        <option value="rubberBand">rubberBand</option>
        <option value="shake">shake</option>
        <option value="swing">swing</option>
        <option value="tada">tada</option>
        <option value="wobble">wobble</option>
        <option value="jello">jello</option>
      </optgroup>

      <optgroup label="Bouncing Entrances">
        <option value="bounceIn">bounceIn</option>
        <option value="bounceInDown">bounceInDown</option>
        <option value="bounceInLeft">bounceInLeft</option>
        <option value="bounceInRight">bounceInRight</option>
        <option value="bounceInUp">bounceInUp</option>
      </optgroup>

      <optgroup label="Bouncing Exits">
        <option value="bounceOut">bounceOut</option>
        <option value="bounceOutDown">bounceOutDown</option>
        <option value="bounceOutLeft">bounceOutLeft</option>
        <option value="bounceOutRight">bounceOutRight</option>
        <option value="bounceOutUp">bounceOutUp</option>
      </optgroup>

      <optgroup label="Fading Entrances">
        <option value="fadeIn">fadeIn</option>
        <option value="fadeInDown">fadeInDown</option>
        <option value="fadeInDownBig">fadeInDownBig</option>
        <option value="fadeInLeft">fadeInLeft</option>
        <option value="fadeInLeftBig">fadeInLeftBig</option>
        <option...

SCSS

/* vietnamese */

$step:56;
$zeit:3s;
$zeit1:13s;

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v9/dvfL0PQWcCvR-NKPSswI4A.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 700;
  src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v9/sGAiBQsp8g2VFBBw5u-taQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v9/lo_L7yCDHYN9FAxvMCI1vQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

#vorne {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: transparent;
  background-image: linear-gradient(black 1px, transparent 1px), linear-gradient(90deg, black 2px, transparent 2px), linear-gradient(rgba(1, 1, 1, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 1, 1, .3) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px;
  z-index: 3;
}

#ein {
  position: absolute;
  background: black;
  width: 100%;
  height: 10%;
  top:0px;
  z-index: 21;
  color: red;
}


#small {
position:fixed;
top:0px;
left:25%;
height:20px;
  background:none;
  color:green;
  font-size:15px;
  z-index:25;
}




#lauf {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#lauf1 {
  position: absolute;
  top: 0px;
  left: 0;
  animation: laufweg $zeit1 steps($step) infinite;
}

@keyframes laufweg {
  from {
    left:...

JavaScript

function testAnim(x) {

    $('.animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
 
      $(this).removeClass();
    });
  };

  $(document).ready(function() {
    $('.js--triggerAnimation').click(function(e) {
      e.preventDefault();
      var anim = $('.js--animations').val();
 

      testAnim(anim);
    });

    $('.js--animations').change(function() {
      var anim = $(this).val();
    if(anim==1){
    letter()
    }

      testAnim(anim);
     
 
    });
  });
 
  document.getElementById('lauf1').innerHTML ='trest';
  
function letter(){
 
 
      var min = 5;
      var max = 30;
 a=0;
     function step() {
      
 a++;
       if (a > max) {
       a=min;
}
      var style='#lauf1{letter-spacing: '+a+'px;}'   
     $(' <style type="text/css">' + style + '</style>').appendTo($('head'));

     }
   
  window.setInterval(function () { step() }, 200);
     

 

}
  /*
  $(' <style type="text/css">' + style + '</style>').appendTo($('head')); 
    $(' <style type="text/css">' + style + '</style>').appendTo($('head')); 
  document.getElementById('ww').innerHTML  = '<div olor:#e63a00; }		20%   { background-color:#ffefc5; }		30%   { background-color:#f1c40f; }        50%  { background-color:#d68cff;}        100% { background:-color:#ffbd31; }}');
  addGlobalStyle('@-moz-keyframes blink {         0%   { background-color:#ffc5ef; }		10%   { background-color:#e63a00; }		20%   { background-color:#ffefc5; }		30%   { background-color:#f1c40f; }        50%  { background-color:#d68cff;}        100% { background:-color:#ffbd31; }}');
  addGlobalStyle('@-ms-keyframes blink {         0%   { background-color:#ffc5ef; }		10%   { background-color:#e63a00; }		20%   { background-color:#ffefc5; }		30%   { background-color:#f1c40f; }        50%  { background-color:#d68cff;}        100% { background:-color:#ffbd31; }}');

  addGlobalStyle('body...