JSFiddle

  • selectmeuü 6

    jQuery 3.2.1, HTML, CSS, JavaScript

    (function($){
    	
    	/* -------------------------------------------------------- */ 
    	/*	//set Global variables
    	/* -------------------------------------------------------- */ 
    	var cards = $(".card-drop"),
    		toggler = cards.find(".toggle"),
    		links = cards.find("ul>li>a"),
    		li = links.parent ...
  • select menü 4 und 5

    jQuery 3.2.1, HTML, SCSS, JavaScript

     $(document).ready(function() {
      $(".drop .option").click(function() {
        var val = $(this).attr("data-value"),
            $drop = $(".drop"),
            prevActive = $(".drop .option.active").attr("data-value ...
  • svg grafiken animiert

    jQuery 3.2.1, HTML, CSS, JavaScript

    Vivus.prototype.eco_remove = function () {
    	this.el.classList.remove('finished');
    }
    function eco_finished(){
      this.el.classList.add('finished');
    }
    function eco_replay(icon){
    	icon ...
  • loading animationen

    No-Library (pure JS), HTML, CSS, JavaScript

    
        <body>
        	<h1>CSS3 Loader Animations</h1>
            <section>
            	<h2>Three Dots</h2>
                <div class="loader-threedots">
                	<span></span>
                    <span></span>
                    <span></span>
                </div>
                
            	<h2>Alone</h2>
                <div class="loader-alone"><span></span></div>
                
            	<h2>Zoom</h2>
                <div class="loader-zoom"></div>
                
            	<h2>Classic</h2>
                <div class="loader-classic">
                	<span></span>
                    <span></span>
                	<span></span>
                    <span></span>
                	<span></span>
                    <span></span>
                	<span></span>
                    <span></span>
                	<span></span>
                    <span></span>
                </div>
                
            	<h2>Sonar</h2>
                <div class="loader-sonar">
                	<span></span>
                    <span></span>
                </div>
                
            	<h2>Little Cube</h2>
                <div class="loader-littlecube">
                	<span></span>
                </div>
                
            	<h2>Pendulum</h2>
                <div class="loader-pendulum">
                	<span></span>
                </div>
                
            	<h2>Alternator</h2>
                <div class="loader-alternator">
                	<span></span>
                	<span></span>
                </div>
                
            	<h2>Rectangular</h2>
                <div class="loader-rectangular">
                	<span></span>
                	<span></span>
                </div>
                
            	<h2>Intersect</h2>
                <div class="loader-intersect">
                	<span></span>
                	<span></span>
                </div>
                
            	<h2>Transporter</h2>
                <div class="loader-transporter">
                	<span></span>
                	<span></span>
                	<span></span>
                	<span></span>
                	<span></span>
                </div>
                
            	<h2>Simplistic</h2>
                <div class="loader-simplistic"></div>
                
                
                
            	<h2>Spinner</h2>
                <div class="loader-spinner"></div>
                
                
                
            	<h2>Stuck</h2>
                <div class="loader-stuck">
                	<span></span>
                </div>
                
            	<h2>Symmetric ...</h2></section></body>
  • ANIMATE:CSS

    jQuery 3.2.1, HTML, CSS, JavaScript

      function testAnim(x) {
        $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
          $(this).removeClass();
        });
      };
    
      $(document).ready(function ...
  • selectmenü 3

    jQuery 3.2.1, HTML, CSS, JavaScript

    /* ===== Logic for creating fake Select Boxes ===== */
    $('.sel').each(function() {
      $(this).children('select').css('display', 'none');
      
      var $current = $(this);
      
      $(this).find ...
  • selectmenü 2

    No-Library (pure JS), HTML, SCSS, JavaScript

    
     
     
     
     
     
     
      
     <h1 class="animated fadeInDown"><i class="icon icon-arrow-down"></i></h1>
    
    <h1 class="animated rotateIn">PURE CSS SELECT</h1>
    <p>1. Normal</p>
    <div class="select animated zoomIn">
      <!-- You can toggle select (disabled) -->
      <input type="radio" name="option">
      <i class="toggle icon icon-arrow-down"></i>
      <i class="toggle icon icon-arrow-up"></i>
      <span class="placeholder">Choose...</span>
      <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-speedometer"></i>Speedometer</span>
      </label>
      <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-fire"></i>Fire</span>
      </label>
      <label class="option">
        <input type="radio" name="option" disabled>
        <span class="title animated fadeIn"><i class="icon icon-handbag"></i>Handbag</span>
      </label>
      <label class="option">
        <input type="radio" name="option">
        <span class="title animated fadeIn"><i class="icon icon-badge"></i>Badge</span>
      </label>
    </div>
     
    
  • flipbords buttons und animierter orbit bewegung

    No-Library (pure JS), HTML, CSS, JavaScript

    	<div class="flip-boards">
    		<div class="board top">
    			<div class="front">
    				<h2>Front Board</h2>
    			</div>
    
    			<div class="flipped">
    				<h2>Flipped Board</h2>
    			</div>
    		</div>
    
    		 <div class="board left">
    			<div class="front">
    				<h2>Front Board</h2>
    			</div>
    
    			<div class="flipped">
    				<h2>Flipped Board</h2>
    			</div>
    		</div>
    	</div>
    
    	<div class="flip-boards">
    		<div class="board top">
    			<div class="front">
    				<img src="http://lorempixel.com/200/200/" />
    			</div>
    
    			<div class="flipped">
    				<img src="http://lorempixel.com/g/200/200/" />
    			</div>
    		</div>
    
    		 <div class="board left">
    			<div class="front">
    				<img src="http://lorempixel.com/200/200/" />
    			</div>
    
    			<div class="flipped">
    				<img src="http://lorempixel.com/g/200/200/" />
    			</div>
    		</div>
    	</div>
    
    
    
    
    
    
    
    
    
    	<div class="wrapper">
    		
    		<a href="#" class="button green"><div class="light"></div>Click Here</a>
    		<a href="#" class="button red"><div class="light"></div>Click Here</a>
    		<a href="#" class="button blue"><div class="light"></div>Click Here</a>
    		<a href="#" class="button yellow"><div class="light"></div>Click Here</a>
    		<a href="#" class="button grey"><div class="light"></div>Click Here</a>
    		<a href="#" class="button black"><div class="light"></div>Click Here ...</a></div>
  • Loding animationen css

    No-Library (pure JS), HTML, CSS, JavaScript

    <section class="container">
    
    	<div class="aligncenter">
    		<h2>Loading Bars</h2>
    		<div class="loading bar">
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    
    		<h2>Bar Spinner</h2>
    		<div class="spinner bar">
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    
    		<h2>Circle Spinner</h2>
    		<div class="spinner circles">
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    
    		<h2>Facebook Loader</h2>
    		<div class="facebook">
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    
            <h2>Spinning Square</h2>
            <div class="spinning-square"></div>
    
            <h2>Spinner Bounce Circle</h2>
            <div class="spinner-bounce-circle">
                <div></div>
                <div></div>
            </div>
    
            <h2>Wave Spinner</h2>
            <div class="spinner-wave">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
    
            <h2>Rotating Cube</h2>
            <div class="spinner-cube">
                <div></div>
                <div></div>
            </div>
    	</div>
    
  • alles mögliche slid in bottom hover bild menü script it jquery einbinden iframe

    jQuery 3.2.1, HTML, CSS, JavaScript

    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript"
    scriptTag.src = "http://www.domain.com/social_media.js";
    scriptTag.async = true ...