Phosphor is a new way to bring animation and video to the web. Starting with the video track of a standard QuickTime file, Phosphor creates cross platform, web-standards compliant assets which can be played on desktop and mobile devices without plugins or even video decoding capabilities. As long as a browser supports Javascript and the ability to show images, it can display Phosphor content.
Interactive mode creates sequences that can be played in any direction and “scrubbed” back and forth. This is a great way to present 3d models, show products, or create easy interactivity on your site. In addition to mouse interaction, Phosphor interactive compositions support touch interaction on smartphones and tablets. Try it yourself - drag the toy at the left.
Playback of Phosphor compositions in the browser is controlled by an open, extensible, javascript framework. It can be used to easily trigger other javascript events, or completely modified to create custom behaviors. For full details on extensibility, visit the Phosphor Documentation. Developers interested in working with the framework can explore the GitHub project.
In our day to day support, we get a lot of common questions about Phosphor. We've listed some of the more common ones here. If you have a question about Phosphor, there's a good chance you'll find your answer here or in the extensive user manual. If not, please contact us directly, and we'll be happy to help.
function respondCanvas() { var containerWidth = $("#phosphorbanner").width(); var containerHeight = $("#phosphorbanner").height(); var canasWidth = $("#anim_target_phosphorbanner").width(); var canasHeight = $("#anim_target_phosphorbanner").height(); f = containerWidth/canasWidth; f = containerHeight/canasHeight<f?containerHeight/canasHeight:f; $('#anim_target_phosphorbanner').css({ "-webkit-transform" : "scale("+f+")", "-webkit-transform-origin" : "0 0", "-ms-transform" : "scale("+f+")", "-ms-transform-origin" : "0 0", "-moz-transform" : "scale("+f+")", "-moz-transform-origin" : "0 0", "transform" : "scale("+f+")", "transform-origin" : "0 0" }); } $(document).ready(function(){ $(window).resize(respondCanvas); respondCanvas(); });
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
.