Depot43-Unterlagen

Code Elemente - HTML - CSS - JS - Cquence

            







    <meta charset="UTF-8">
    <title>Bildergallerie mit HTML5 und Cquence</title>
    
    <style>
            
            /* Allgemeines Setting */
            body { padding: 0; margin: 0; font-family:monospace; }
            #container { position:relative; border: 1px solid #ccc; width: 310px; height: 310px; background-color: #efefef;margin:24px auto;}
            div { position: absolute; overflow: hidden; }
            
            
            /* Zeitleiste - die Frames gestalten */
        #frame1 {z-index: 500; left: 5px; top: 5px;width:300px; height:300px;}
        #frame2 {z-index: 501; left: 5px; top: 5px;width:300px; height:300px;}
        #frame3 {z-index: 502; left: 5px; top: 5px;width:300px; height:300px;}
        #frame4 {z-index: 503; left: 5px; top: 5px;width:300px; height:300px;}
        #frame5 {z-index: 504; left: 5px; top: 5px;width:300px; height:300px;}
        #frame6 {z-index: 505; left: 5px; top: 5px;width:300px; height:300px;}
        #text p {font-size: 3em;text-align: center;}
        button {background-color: #f00;border: 1px solid #333;width:240px;height:30px;margin:0 30px;}
        button a {text-decoration: none;color:#000;display:block;}
        button a:hover {color:#fff;}
        </style>
    


  
 <!-- Das cquence-Projekt wird im Container platziert -->
 <div id="container">
  
        <div id="frame1" class="frame">
            <img src="http://depot43.ch/unterlagen/assets/cquence/eso1.jpg" alt="ElderScrollOnline">
        </div>
        <div id="frame2" class="frame">
            <img src="http://depot43.ch/unterlagen/assets/cquence/eso2.jpg" alt="ElderScrollOnline">
        </div>
        <div id="frame3" class="frame">
            <img src="http://depot43.ch/unterlagen/assets/cquence/eso3.jpg" alt="ElderScrollOnline">
        </div>
        <div id="frame4" class="frame">
            <img src="http://depot43.ch/unterlagen/assets/cquence/eso4.jpg" alt="ElderScrollOnline">
        </div>
        <div id="frame5" class="frame">
            <img src="http://depot43.ch/unterlagen/assets/cquence/eso5.jpg" alt="ElderScrollOnline">
        </div>
        <div id="frame6" class="frame">
            <img src="http://depot43.ch/unterlagen/assets/cquence/eso6.jpg" alt="ElderScrollOnline">
        </div>
        <div id="text" class="frame">
            <p>Screenshots aus dem Spiel Elderscroll Online.</p>
            <button><a href="/unterlagen/cquence/beispiele/bildfolge#">Weitere Informationen</a></button>
        </div>
          
</div>
   
<script>
// Der ganze Code von Cquence.js intern
        
var Cq;

Cq = function(){
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function( f ){ setTimeout( f, 1000/60 ); };
    var elem = function( id ){ return document.getElementById( id ); };

    // IE checking
    var IEVERSION = getInternetExplorerVersion();
    var IE8 = IEVERSION === 8;
    var IEWTF = IEVERSION < 8 && IEVERSION > -1;

    var style = function( e, k, v ){
        if( k === 'opacity' ){
          if( IE8 ){ // gemene browsers
            e.style[ "-ms-filter" ] = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + Math.floor( v * 100 ) + ")";
            e.style.filter = "alpha(opacity=" + Math.floor( v * 100 ) + ")";

          } else { // lieve browsers
            e.style[k] = v;
          }
        } else {
          e.style[k] = v + "px";
        }
    };

    var combine = function(){
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments
        var list = Array.prototype.slice.call( arguments, 0 );
        var d = 0;
        for( var i=0; i<list.length; i++ ){
            d = Math.max( list[i].d, d );
        }
        return {
            d: d,
            f: function( t ){
                for( var i=0; i<list.length; i++ ){
                    var last = list[i];
                    if( last.d > t ){
                        last.f( t );
                    } else {
                      if( !last.done ){
                          last.f( last.d );
                          last.done = true;
                      }
                    }

                }
            }
        };
    };

    var sequence = function(){
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments
        var timeline = Array.prototype.slice.call( arguments, 0 );
        var d = 0;
        for( var i=0; i<timeline.length; i++ ){
            d = d + timeline[i].d;
        }
        return {
            d: d,
            f: function( t ){

                var last = null;
                var total = 0;

                for( var i=0; i<timeline.length; i++ ){
                    last = timeline[i];
                    if( total + last.d > t ){
                        last.f( t - total );
                        return;
                    }
                    if( !last.done ){
                        last.f( last.d );
                        last.done = true;
                    }
                    total = total + last.d;
                }
            }
        };
    };

    var animate = function( transform ){
        return function( id, dur, begin, fin ){
            return {
                d: dur,
                f: function( t ){
                    var e = elem( id );
                    for( var k in begin ){

                        var bv = begin[k]; // begin waarde
                        var fv = fin[k];   // finish waarde
                        var dx = fv - bv;  // verschil (afstand)

                        // p is nu een waarde tussen de 0 en 1 .. en geeft aan hoe ver de animatie is
                        var p = transform( Math.max( t/dur, 0 ) );

                        // nieuwe waarde is de factor maal de afstand
                        var nv = bv + (p * dx);
                        style( e, k, nv );
                    }
                }
            };
        };
    };

    // animation variants
    // http://upshots.org/actionscript/jsas-understanding-easing
    var linear = animate( function( p ){
        return p;
    });
    var easeIn = animate( function( p ){
        return Math.pow( p, 5 );
    });
    var easeOut = animate( function( p ){
        return 1 - Math.pow( 1 - p, 5 );
    });
    var sleep = function( d ){
        return { d: d, f: function(t){} };
    };

    /* from: http://stackoverflow.com/questions/10964966/detect-ie-version-in-javascript */
    function getInternetExplorerVersion()
    // Returns the version of Internet Explorer or a -1
    // (indicating the use of another browser).
    {
        var rv = -1; // Return value assumes failure.
        if (navigator.appName == 'Microsoft Internet Explorer')
        {
            var ua = navigator.userAgent;
            var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if (re.exec(ua) !== null)
                rv = parseFloat( RegExp.$1 );
        }
        return rv;
    }

    var timeline = [];
    var start = (+new Date()); // unix timestamp
    var second = 1000;
    var stop = 21 * second; // Achtung Gesamte Animationszeit kann begrenzt werden ( Standard = 15 Seconds! Die Zeit-(leiste) muss wieder angehalten werden! )
    var render = null;

    // gets called recursive by request-animation-frame
    var renderloop = function(){
        // console.log('1. ', window.render );
        var now = (+new Date()) - start;      // relatieve tijd vanaf begin animatie
        if( now < stop ) raf( renderloop ); // recursion, baby
        // console.log('2. ', window.render );
        if( window.render ) window.render.f( now );
        console.log( "zeige: "+now ); //Anzeige der laufenden Zeitleiste in Millisekunden!
    };

    return {
        combine: combine,
        sequence: sequence,
        linear: linear,
        animate: animate,
        easeIn: easeIn,
        easeOut: easeOut,
        sleep: sleep,
        renderloop: renderloop
    };

}();
    </script> 

    <!-- Der JS-Codeblock wird vorbereitet -->
    <script>
        render = Cq.combine(
             Cq.sequence(
                 Cq.sleep(3000),
                 
                 Cq.easeOut('frame6', 3000, { opacity: 1, left: 10 }, { opacity: 0, left: 310 }),
                 Cq.easeOut('frame5', 3000, { opacity: 1, left: 10 }, { opacity: 0, left: 310 }),
                 Cq.easeOut('frame4', 3000, { opacity: 1, left: 10 }, { opacity: 0, left: 310 }),
                 Cq.easeOut('frame3', 3000, { opacity: 1, left: 10 }, { opacity: 0, left: 310 }),
                 Cq.easeOut('frame2', 3000, { opacity: 1, left: 10 }, { opacity: 0, left: 310 }),
                 Cq.easeOut('frame1', 3000, { opacity: 1, left: 10 }, { opacity: 0, left: 310 })
                 
             )
        );

        Cq.renderloop();

    </script>
    

    








            

Achtung Länge der Animationssequenz

Ohne einen Eingriff in die Javascriptdatei "cquence.js" ist die maximale Laufzeit für eine Animation auf 15 Sekunden begrenzt. Im folgenden Beispiel wurde daher der gesamte Javascript-Code in die HTML-Datei eingefügt.

Zeile 188:

    var stop = 21 * second; 
    // Achtung Gesamte Animationszeit kann begrenzt werden 
    // ( Standard = 15 Seconds! Die Zeit-(leiste) muss wieder angehalten werden! )

Wird dieser Wert nicht gesetzt, läuft die Animation endlos.

Bildfolge

Achtung Länge der Animationssequenz