Led laufschrieft

led laufschrieft versuch

by basti1012

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<p class="animationSandbox lauf1" 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 ok</option>
        <option value="2">Zitterner Text ok</option>
        <option value="3">Mehrere Texte halb ok</option>   
        
 <option value="4">Schreibmaschiene</option>
        <option value="5">Regenbogen</option>
        <option value="6" >Kopfstand ok</option> 
     <option value="7" >Zick Zack ok</option> 
        
              <option value="8">dreh wurm ok</option>
        <option value="9" >Kopfstand ok</option> 
     <option value="10" >Zick Zack ok</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...

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;
   display: flex;
 flex-direction: row;
}




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

}

#lauf1 {
  position: absolute;
  top: 0px;
  left: 0;
   display: flex;
 flex-direction: row;
  animation:...

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()
    }
    if(anim==2){zittern()}
      if(anim==3){texte()}  
    if(anim==4){schreib()}
        if(anim==5){regenbogen()}
         if(anim==6){flip()}
           if(anim==7){zick()}
             if(anim==8){drehen()}
      testAnim(anim);
     
 
    });
  });
 
 
  
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;}#small{letter-spacing: '+a+'px;}'   
     $(' <style type="text/css">' + style + '</style>').appendTo($('head'));

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


function zittern(){
var x, y; 
 
function ie() { 
	x=-30+Math.random()*50;
	y=30+Math.random()*50;
//	document.getElementById('lauf1').style.top = x+'px';
//	document.getElementById('lauf1').style.left = y+'px';
	 $(".lauf1,#small").css("top",x+"px"); 
   $(".lauf1,#small").css("left",y+"px"); 
} 
window.setInterval(function () { ie() }, 100);
}

function texte(){
var textcount = 0;

var titletext = new Array();

titletext[textcount++] = "Herzlich Willkommen";
titletext[textcount++] = "auf meiner";
titletext[textcount++] = "Homepage";
titletext[textcount++] = "hier kann noch mehr Text stehen...";


var i  = 1;
var wo = 0;
var ud = 1;

function animatitle() {
	window.document.title = titletext[wo].substr(0, i)+"_"; 
	if ( ud== 0 ) i--;
	if ( ud== 1 ) i++;
	if ( i== -1 ) {
		ud = 1;
		i  = 0;
		wo++;
		wo = wo %...