jlengrand/Cquence
1
0
Fork 0
mirror of https://github.com/RamonGebben/Cquence.git synced 2026-03-10 08:51:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Shorter name space

Browse Source
This commit is contained in:
Ramon Gebben
2015-01-18 12:14:50 +01:00
parent 671fd20a6c
commit 6affdfd97c
3 changed files with 83 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Cquence.js
View File

@@ -1,7 +1,7 @@
var Cquence;
var Cq;
Cquence = function(){
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 ); };

70
README.md
View File

@@ -17,54 +17,49 @@ render = Cquence.combine() // Combine fires the sequences in its body the same t
render = Cquence.sequence() // Define the animations in order to create a timeline
Cquence.sequence(
Cquence.easIn( :id, :time, { :from }, { :to }),
Cquence.easOut( :id, :time, { :from }, { :to }),
Cquence.sleep( :time ) // Wait utill time is passed
Cq.sequence(
Cq.easIn( :id, :time, { :from }, { :to }),
Cq.easOut( :id, :time, { :from }, { :to }),
Cq.sleep( :time ) // Wait utill time is passed
)
```
## Full example
```javascript
render = Cquence.combine(
Cquence.sequence(
Cquence.sleep( 100 ),
Cquence.linear('frame3', 10000, { left: -900 }, {left: 300 })
render = Cq.combine(
Cq.sequence(
Cq.sleep( 100 ),
Cq.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})
Cq.sequence(
Cq.easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
Cq.easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
Cq.easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
Cq.combine(
Cq.easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
Cq.easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
Cq.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 })
Cq.sleep(1000),
Cq.easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
Cq.easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 10}),
Cq.sleep(1500),
Cq.sequence(
Cq.combine(
Cq.easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
Cq.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 })
Cq.easeIn('frame2', 1000, { opacity: 0 },{ opacity: 0 }),
Cq.easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })
)
)
);
// launch the animation
Cquence.renderloop();
Cq.renderloop();
```
@@ -119,6 +114,17 @@ To minify/uglify for production use:
```
### Linting
We use jshint for linting.
Run the gulp task to check.
```bash
gulp lint
```
## Licence

56
example.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<title>Banner test</title>
<title>Cquence example</title>
<style>
body { padding: 0; margin: 0; font-family: "Lucida Console", Monaco, monospace; }
@@ -78,47 +78,41 @@
<script src="Cquence.js"></script>
<script>
render = Cquence.combine(
Cquence.sequence(
Cquence.sleep( 100 ),
Cquence.linear('frame3', 10000, { left: -900 }, {left: 300 })
render = Cq.combine(
Cq.sequence(
Cq.sleep( 100 ),
Cq.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})
Cq.sequence(
Cq.easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
Cq.easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
Cq.easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
Cq.combine(
Cq.easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
Cq.easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
Cq.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 })
Cq.sleep(1000),
Cq.easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
Cq.easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 10}),
Cq.sleep(1500),
Cq.sequence(
Cq.combine(
Cq.easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
Cq.easeOut('frame9', 2000, { opacity: 1, left: 10 }, { opacity: 0, left: -300 })
),
Cquence.easeIn('frame2', 1000, { opacity: 0 },{ opacity: 0
Cq.easeIn('frame2', 1000, { opacity: 0 },{ opacity: 0
}),
Cquence.easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })
Cq.easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })
)
),
Cquence.sequence(
Cq.sequence(
)
);
// launch the animation
Cquence.renderloop();
Cq.renderloop();
</script>