28
edits
User:Mantaroh/Scroll-driven animations: Difference between revisions
User:Mantaroh/Scroll-driven animations (view source)
Revision as of 03:20, 30 June 2016
, 30 June 2016Fix typo.
(delete problem section.) |
(Fix typo.) |
||
| Line 37: | Line 37: | ||
// example: we have three animations. | // example: we have three animations. | ||
target1.style.animation = "animation1 50s linear | target1.style.animation = "animation1 50s linear Infinite"; | ||
target2.style.animation = "animation2 100s linear | target2.style.animation = "animation2 100s linear Infinite"; | ||
target3.style.animation = "animation3 70s linear 10s";<br/> | target3.style.animation = "animation3 70s linear 10s";<br/> | ||
var anim1 = target1.getAnimations()[0]; | var anim1 = target1.getAnimations()[0]; | ||
| Line 51: | Line 51: | ||
// example: we have two animation which having infinite iterations. | // example: we have two animation which having infinite iterations. | ||
var scrollTimeline = new ScrollTimeline(scrollElem, "vertical"); | var scrollTimeline = new ScrollTimeline(scrollElem, "vertical"); | ||
var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations: | var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations:Infinite}); | ||
var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations: | var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations:Infinite});<br/> | ||
var anim1 = new Animation(keyframe1, scrollTimeline); | var anim1 = new Animation(keyframe1, scrollTimeline); | ||
var anim2 = new Animation(keyframe2, scrollTimeline);<br/> | var anim2 = new Animation(keyframe2, scrollTimeline);<br/> | ||
| Line 59: | Line 59: | ||
// example: we have two infinite animations and specified scroll range. | // example: we have two infinite animations and specified scroll range. | ||
var scrollTimeline = new ScrollTimeline(scrollElem, "vertical", 2000); | var scrollTimeline = new ScrollTimeline(scrollElem, "vertical", 2000); | ||
var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations: | var keyframe1 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:1000, iterations:Infinite}; | ||
var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations: | var keyframe2 = new KeyframeEffect(target, {transform:['none','translate(100px)']}, {duration:3000, iterations:Infinite};<br/> | ||
var anim1 = new Animation(keyframe1, scrollTimeline); | var anim1 = new Animation(keyframe1, scrollTimeline); | ||
var anim2 = new Animation(keyframe2, scrollTimeline);<br/> | var anim2 = new Animation(keyframe2, scrollTimeline);<br/> | ||