background preloader

Tubular, a YouTube Background Player jQuery Plugin

Tubular, a YouTube Background Player jQuery Plugin
Video controls:Play | Pause | Volume Up | Volume Down | Mute Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way. $(page content wrapper element).tubular(options); Tubular's hello, world Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and specify the video you want to load: and Presto! A word of caution Tubular does not design your website for you. Options and defaults ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?

http://www.seanmccambridge.com/tubular/

Related:  Jquery Pluginsvideo html5technologies webSite Creation

tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect download Download here or go to github. Released under GPL how to use jQuery Video Background plugin Code available for download on Github. Example of the jQuery Video Background plugin. Will place a resizable video in to the background of the page or designated element. Browsers that don't support the HTML5 video element will get an image if a poster image was provided. If the containing element's width and height does not match the aspect ration of the video, the video will not alter it's aspect ratio but will render based on the largest dimension. Public methods

HTML5 & CSS3: Take Your Design to Another Level While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look at them. HTML5 is the latest version of HTML or Hypertext Markup Language. It is currently only fully supported by a handful of browsers but the next year should see a large increase in usage. It isn’t expected to be completed until 2014, but the features that are available now are a great way to become acquainted with HTML5 and add some cool elements to your website. Steve Jobs famously refuses to allow Flash on the iOS due to the many bugs and crashes it experiences, therefore, learning how to use the more intricate features of HTML5 is going to be a must for those who want to develop apps and iOS-friendly websites.

10 Useful jQuery Plugins It seems that jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we’ve found some good ones for you. Here are 10 fresh jQuery plugins that you should find useful. arbor.js jQuery plugin for Avgrund concept popin Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). Tested with jQuery 1.4+, file size is under 2Kb, MIT Licensed. You can simply init Avgrund with one line and linking 'avgrund.css' file: $('element').avgrund();

WebGL Water Loading... Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. jQuery & CSS Sprite Animation Explained In Under 5 Minutes Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screencast I’m going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites. You’ll also get to see some pretty cool out-in-the-wild examples of jQuery Sprite Animation in action, so why not check it out in my screencast below! Demos and text are available for anyone that wants to read/see them in the rest of the post. View Demo Download Source

js A gridster configuration object. Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements. Horizontal and vertical margins respectively for widgets. Base widget dimensions in pixels. The first index is the width, the second is the height.

Related:  Jquery Pluginsjquery plugins