CSS3 ex1, Three.js ex1, RaphaelJS ex1, Chaining ex1
var fx = new Fx.Anything({ onReport: function(progress, mixedVar) { // use progress as your variable to control your effect. // optionally pass in mixedVar } }); fx.start(); fx.start('my string'); // mixedVar will contain your string. fx.start([1, 2]); // mixedVar will contain your array.
Demo: CSS3 ex1
var _propeller = document.body.getElement('.propeller'); var rotation = 0; var fx = new Fx.Anything({ duration: 20000, transitions: Fx.Transitions.Quad.easeInOut, onReport: function(progress) { rotation = progress*(360*12); var str_rotation = 'rotate('+rotation+'deg)'; _propeller.setStyles({ 'transform': str_rotation, '-ms-transform': str_rotation, '-webkit-transform': str_rotation, '-o-transform': str_rotation, '-moz-transform': str_rotation }); } }); fx.start();
Demo: WebGL ex1
var fx = new Fx.Anything({ duration: 1600, transition: Fx.Transitions.Bounce.easeOut, onReport: function(progress) { pointLight.position.x = progress*220-100; pointLight.position.y = progress*60-30; renderer.render(scene, camera); } }); fx.start();
Demo: Canvas ex1
var scaleTo = 0.5; var fx = new Fx.Anything({ duration: 2000, link: 'cancel', transition: Fx.Transitions.Elastic.easeOut, onReport: function(progress, state) { var newScale = (state == 'on') ? progress * scaleTo + 1 : (1+scaleTo) - (progress * scaleTo); mainImage.transform('s'+newScale); mainImage.attr({ opacity: newScale-0.5 }); } }); document.id('holder').addEvents({ mouseenter: fx.start.bind(fx, 'on'), mouseleave: fx.start.bind(fx, 'off') });
Demo: Chaining ex1
fx.start().chain(function() { fxCracking.start({ collection: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'], codeLength: 6, fontSize: 12, cracked: [] }).chain(function() { _door.setStyle('background-color', 'green'); document.body.getElements('strong, em').setStyle('color', 'green'); fx.start(true); }); });
More coming soon.
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus