With mobile access and tablets, cross-platform media compatibility has become one of the most important features for new web technologies. With Adobe Flash not being supported on iOS and HTML5 not being native to earlier versions of Internet Explorer, the jCS Media Library has arrived just in time.
The developers of jCSML originally created the library to streamline the development of Flash-like web animations in a way that their clientele could access easily. The problem being that the majority of their corporate client base still uses IE 7 and 8 and jQuery does not natively support Z-axis rotation or Opacity animation on .PNG files with the older browsers.
As opposed to other solutions where significant browser-tweaking is required, jCSML provides a structured approach to creating complex animations. Completed animations can be packaged up and incorporated into a website with one line of code with just a few parameters. All developers need is jQuery, the jCSML library, and an understanding of the simple jCSML script structure. Here is an example of the code…
//Set up your image list. var imagelist2 = ['YourImage.png']; //The simplest script structure. It is always the same structure for your animations. //Note: You can have multiple sequences in a single structure by chaining them! var animseq = [{CFG:{parent: 'aImage', playing:true}, SRC:{src:imagelist2, index:0}, SEQ:[{INI: {top:350, left:-75, angleZ:720, opacity:0}, NXT: {width:72, height:72, left:400, top:5, angleZ:0, opacity:1}, FX: {duration:3000, easing:'swing'} }] }]; //Create and play our animation sequence. var anim = new jCS.mediaObject(animseq);
…and here is the codes demo.
Given that the library doesn’t use Flash, Silverlight, SVG, CSS3 Animations, or HTML5, as it is jQuery-based, jCSML works on all browsers and devices that the developer has tested to date. These include “true” IE7/8 browsers (as opposed to emulators), IE9, Chrome, Firefox 3.6+, Safari, iOS, and Android.
jCSML has a free version that contains all the files you need to get started immediately and is powerful enough for most. The Free version does not have the same functionality as the far more powerful jCSML Elite version that boasts more Anidynamics and event support. The most extensive version includes the functionality of the Elite version, but also includes more examples and over 150 .PNG special effect images and website-ready transition templates.
Useful URLs
jCSML Media Library Homepage →
jCSML Getting Started Guide →
jCSML – How it Works →
jCSML Download Page →
Related Posts
- 10 CSS & JavaScript Snippets for Creating Advanced Image Hover Effects
- 8 CSS & JavaScript Snippets for Creating Lighting & Shading Effects
- 10 Amazing Animated Text CSS & JavaScript Code Snippets
- 10 Beautiful Examples of Particle Animation in Web Design
- How to Create Amazing Page Effects with jQuery UI
- 8 CSS & JavaScript Snippets for Creating Beautiful Bokeh Effects
- 10 CSS & JavaScript Snippets for Creating Page Transition Effects
- 8 CSS & JavaScript Snippets for Creating Wild & Crazy Backgrounds
- Code Snippets That Demonstrate the Repelling Effect in Web Design
- 8 CSS & JavaScript Snippets for Creating Background Noise Effects