mirror of
https://github.com/RamonGebben/Cquence.git
synced 2026-03-10 08:51:22 +00:00
Ramon Gebben
313
Cquence.js
313
Cquence.js
@@ -1,187 +1,166 @@
|
||||
|
||||
var Cquence;
|
||||
|
||||
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function( f ){ setTimeout( f, 1000/60 ); };
|
||||
var elem = function( id ){ return document.getElementById( id ); }
|
||||
Cquence = 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 ); }
|
||||
|
||||
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 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 ) + ")";// ;
|
||||
|
||||
var last = null;
|
||||
var total = 0;
|
||||
|
||||
for( var i=0; i<timeline.length; i++ ){
|
||||
var 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;
|
||||
}
|
||||
} else { // lieve browsers
|
||||
e.style[k] = v;
|
||||
}
|
||||
} else {
|
||||
e.style[k] = v + "px";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var animate = function( transform ){
|
||||
return function( id, dur, begin, fin ){
|
||||
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: dur,
|
||||
d: d,
|
||||
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 );
|
||||
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++ ){
|
||||
var 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 );
|
||||
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 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return rv;
|
||||
}
|
||||
|
||||
var IEVERSION = getInternetExplorerVersion();
|
||||
var IE8 = IEVERSION === 8;
|
||||
var IEWTF = IEVERSION < 8 && IEVERSION > -1;
|
||||
// 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){} }
|
||||
}
|
||||
|
||||
var timeline = [];
|
||||
var start = (+new Date); // unix timestamp
|
||||
var second = 1000;
|
||||
var stop = 15 * second;
|
||||
var render = null;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
// gets called recursive by request-animation-frame
|
||||
var renderloop = function(){
|
||||
|
||||
var now = (+new Date) - start; // relatieve tijd vanaf begin animatie
|
||||
if( now < stop ) raf( renderloop ); // recursion, baby
|
||||
var IEVERSION = getInternetExplorerVersion();
|
||||
var IE8 = IEVERSION === 8;
|
||||
var IEWTF = IEVERSION < 8 && IEVERSION > -1;
|
||||
|
||||
var timeline = [];
|
||||
var start = (+new Date); // unix timestamp
|
||||
var second = 1000;
|
||||
var stop = 15 * second;
|
||||
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 );
|
||||
|
||||
if( render ) render.f( now );
|
||||
|
||||
}
|
||||
/// Example usage
|
||||
// var render = combine(
|
||||
|
||||
// sequence(
|
||||
// sleep( 100 ),
|
||||
// linear('frame3', 10000, { left: -900 }, {left: 300 })
|
||||
// ),
|
||||
// sequence(
|
||||
// easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
|
||||
// easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
|
||||
// easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
|
||||
// combine(
|
||||
// easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
|
||||
// easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
|
||||
// easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
|
||||
// ),
|
||||
// sleep(1000),
|
||||
// easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
|
||||
// easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 40}),
|
||||
// sleep(1500),
|
||||
// sequence(
|
||||
// combine(
|
||||
// easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
|
||||
// easeOut('frame9', 2000, { opacity: 1, left: 40 }, { opacity: 0, left: 360})
|
||||
// ),
|
||||
// easeIn('frame2', 1000, { opacity: 0 }, { opacity: 1 }),
|
||||
// easeOut('frame10', 1000, { bottom: -260 }, { bottom: -210 })
|
||||
// )
|
||||
|
||||
// ),
|
||||
// sequence(
|
||||
|
||||
// )
|
||||
|
||||
// );
|
||||
}
|
||||
|
||||
return {
|
||||
combine: combine,
|
||||
sequence: sequence,
|
||||
linear: linear,
|
||||
animate: animate,
|
||||
easeIn: easeIn,
|
||||
easeOut: easeOut,
|
||||
sleep: sleep,
|
||||
renderloop: renderloop
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
|
||||
// // launch the animation
|
||||
// renderloop();
|
||||
|
||||
124
example.html
Normal file
124
example.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<title>Banner test</title>
|
||||
<style>
|
||||
|
||||
body { padding: 0; margin: 0; font-family: "Lucida Console", Monaco, monospace; }
|
||||
div { position: absolute; overflow: hidden; }
|
||||
#container { border: 1px solid black; width: 298px; height: 248px; background-color: black;}
|
||||
.frame { width: 300px; height: 250px; }
|
||||
img { position: relative }
|
||||
#frame1 { z-index: 500; left: -1000px; } /* Monk */
|
||||
#frame2 { z-index: 700; left: 0px; top: -40px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); } /* Media Monks*/
|
||||
#frame3 { z-index: 300; width: 750px; left: -1000px; } /* Smoke */
|
||||
#frame4 { z-index: 400; left: -1000px; } /* */
|
||||
#frame5 { z-index: 600; left: 0px; } /* shader */
|
||||
|
||||
#frame6 { z-index: 600; left: 20px; top: 120px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
|
||||
#frame6 p { color: white; font-size: 20px; }
|
||||
/* peeps call me */
|
||||
#frame7 { z-index: 600; top: 150px; left: 20px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
|
||||
#frame7 p { color: white; font-size: 25px; }
|
||||
/* Ramon */
|
||||
|
||||
#frame8 { z-index: 600; top: 130px; left: 20px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
|
||||
#frame8 p { color: white; font-size: 35px; }
|
||||
/* rocking it */
|
||||
#frame9 { z-index: 600; top: 160px; left: -300px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
|
||||
#frame9 p { color: white; font-size: 17px; }
|
||||
#frame9 p strong { color: white; font-size: 20px; }
|
||||
/* Call to action */
|
||||
|
||||
#frame10 { z-index: 750; bottom: -260px; left: 0px; opacity: 1; background-image: url('http://i.imgur.com/OCHWcon.png'); background-repeat: no-repeat; background-size: 100%; background-position: center; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100);}
|
||||
#frame10 #cta { color: #ddd; font-weight: 900; font-size: 20px; width: 100%; background-color: #333; display: inline-block; height: 40px; transition: background-color 0.4s ease;}
|
||||
#frame10 #cta:hover { background-color: #fff; transition: background-color 0.4s ease; }
|
||||
|
||||
#frame10 #cta #button { width: 100%; height: 26px; top: 6px; left: 5px; border-radius: 4px; z-index: 751; cursor: pointer; text-align: center
|
||||
|
||||
; }
|
||||
#frame10 #cta p { position: absolute; left: 60px; top: -11px; z-index: 750; }
|
||||
|
||||
</style>
|
||||
|
||||
<div id='container'>
|
||||
<div id='frame1' class ="frame">
|
||||
<img src="http://ra-ge.net/assets/assets_mediamonks.png">
|
||||
</div>
|
||||
<div id='frame2' class ="frame">
|
||||
<img src="http://ra-ge.net/assets/assets_mediamonks.png" style="left: -300px; top: 40px;">
|
||||
</div>
|
||||
<div id='frame3' class ="frame">
|
||||
<img src="http://ra-ge.net/assets/assets_mediamonks.png" style="left: -602px">
|
||||
</div>
|
||||
<div id='frame4' class ="frame">
|
||||
<img src="http://ra-ge.net/assets/assets_mediamonks.png" style="left: -600px;">
|
||||
</div>
|
||||
<div id='frame5' class ="frame">
|
||||
<img src="http://ra-ge.net/assets/assets_mediamonks.png" style="left: -1350px;">
|
||||
</div>
|
||||
<div id='frame6' class ="frame">
|
||||
<p>Hey there,</p>
|
||||
</div>
|
||||
<div id='frame7' class ="frame">
|
||||
<p>People call me</p>
|
||||
</div>
|
||||
<div id='frame8' class ="frame">
|
||||
<p>Ramon Gebben</p>
|
||||
</div>
|
||||
<div id='frame9' class ="frame">
|
||||
<p>And this is an awesome lib </p>
|
||||
</div>
|
||||
<div id='frame10' class ="frame">
|
||||
<div id="cta">
|
||||
<div id="button">Download</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<script src="Cquence.js"></script>
|
||||
<script>
|
||||
render = Cquence.combine(
|
||||
Cquence.sequence(
|
||||
Cquence.sleep( 100 ),
|
||||
Cquence.linear('frame3', 10000, { left: -900 }, {left: 300 })
|
||||
),
|
||||
Cquence.sequence(
|
||||
Cquence.easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
|
||||
Cquence.easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
|
||||
Cquence.easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
|
||||
Cquence.combine(
|
||||
Cquence.easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
|
||||
Cquence.easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
|
||||
Cquence.easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
|
||||
),
|
||||
Cquence.sleep(1000),
|
||||
Cquence.easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
|
||||
Cquence.easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 10}),
|
||||
Cquence.sleep(1500),
|
||||
Cquence.sequence(
|
||||
Cquence.combine(
|
||||
Cquence.easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
|
||||
Cquence.easeOut('frame9', 2000, { opacity: 1, left: 10 }, { opacity: 0, left: -300 })
|
||||
),
|
||||
Cquence.easeIn('frame2', 1000, { opacity: 0 },{ opacity: 0
|
||||
|
||||
}),
|
||||
Cquence.easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })
|
||||
)
|
||||
|
||||
),
|
||||
Cquence.sequence(
|
||||
|
||||
)
|
||||
);
|
||||
|
||||
// launch the animation
|
||||
Cquence.renderloop();
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user