Entity view (Content)

Front end developing tricks

By youfei
Oct. 19, 2015
Although I happen to be a backend developer when I joined Appnovation a few weeks ago, I still in fond of some frontend developing tricks: 1. Full screen background If you are planning to add a responsive backgrounds photo slideshow, then this may be the ideal  plugin for you. Vegas uses jQuery and it has been tested on various browsers. The presets of this plugin saves you plenty of time implementing/hacking CSS styles to make the image stretched into the right place, fill in the whole screen or manage to replace images in some interval. With a simple function call, to the desired element you want to have a background: $('body').vegas({ slides: [ { src: 'img1.jpg' }, { src: 'img2.jpg' }, { src: 'img3.jpg' } ] }); All the features you could think of for a background is already there. And it is super customizable: timer, ant to add so feel free to add as many photos as you like. Even if you want only a static image as a background, this is way better than set every CSS rules by hand. If you are interested, 2. ActionScript like Animation in HTML5 We don’t remember how long we have been abandoning Flash in browsers, but the ActionScript has come back in the HTML5 standard, the GSAP TweenMax. You are able to manipulate any DOM element just like you have done in Flash: you can even setup a sequence to play your animations anyway you like: pausing it anywhere, reverses the animation to react to some fired event, or even modify your sequence on the fly. One more important thing you should use Tween is, it is significantly faster, way faster than CSS transitions, and way faster than jQuery animations. This product is free for most of the individual developers, and for some usages you are collecting money from multiple customers (i.e. game), there is going to be a charge for that. 3. Transparency html5 video. No, that’s not possible to have alpha channel in html5 browser’s video player, the only way to do it is using flash videos. But actually with the powerful canvas, we can pre-make an alpha channel for the video, and then render the video with anything below the canvas, to make this transparency effect. There is already some documentation on how to implement this kind of video http://www.sciencelifeny.com/transparency/transparency.html , but if you don’t like to dig through the code yourself, you can use the SeeThru project already there: https://github.com/m90/seeThru
Post Tags: