WideArea - Better Textarea. Transit - CSS transitions and transformations for jQuery. What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (! $.support.transition) $.fn.transition = $.fn.animate; Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate.
(Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering. Really easy responsive design. It’s no secret that many believe responsive web is the future. Creating a responsive site means that it’s able to adapt to the many different browsers and sizes that are available.
If I want to make sure my website I’ve created on my desktop can be seen on a tablet with minium scrolling and zooming, I’m going to be interested in creating a responsive site. One reason responsive sites have become popular is because it just makes sense. It’s cheaper than creating one or more extra sites for mobile phones and tablets. It also makes sure there’s a consistent viewing experience amongst devices and desktop screens.
It’s not fun having to increase the size of your window or scroll horizontally to see an entire website. While creating responsive web designs is becoming easier, there are some ways to get it going even quicker. jQuery plugins Isotope Isotope is a jQuery plugin that claims to create magical layouts that cannot otherwise be created by CSS and HTML. Breakpoints.js FitText.js Response.js. Cool About Me Scroll Effect. Quick Tip: Handle Date and Time Like a Boss with moment.js. Martin Angelov Don’t you just hate working with JavaScript’s date and time functions? Have you seen how much code it takes to simply print how much time has passed since a certain event? Luckily for you, there is a small JavaScript library called moment.js that you can drop in your website folder and use right away.
Moment.js Cool things you can do with it The first stop is to create a new moment object. Create a moment object var now = moment(); var m = moment("April 1st, 2005", "MMM-DD-YYYY"); var m = moment([2005, 3, 1]); Notice that just like in the JavaScript Date() object, months start from zero, so 3 is April. Working with time console.log(moment().format('HH:mm:ss')); var day = moment().day(); console.log( moment.weekdays[day] ); console.log( moment.months[moment().month()] ); console.log( moment.utc().format('HH:mm:ss') ); console.log( moment.utc().add('hours',9).format('HH:mm:ss') ); As you can see, the format method is what you need to turn a moment object into something readable. Allofthelights.js - Eteignez la lumière et profitez de votre vidéo.
Allofthelights.js est un plugin jQuery permettant "d'éteindre" la lumière de votre page web pour mettre en évidence la lecture d'une vidéo. Un plugin jQuery gadget made in France, qui vous permettra d'immerger vos visiteurs pendant la lecture d'une vidéo. Le plugin va calculer automatiquement la surface de la vidéo et les éléments alentours pour ajouter un overlay sombre tout autour. Il a été pensé pour utiliser les principaux lecteurs vidéos: Youtube, vimeo et Dailymotion mais permet aussi de prendre en charge des players vidéos personnalisés. Complétement adapté pour les responsives webdesign, la vidéo est redimensionnée automatiquement avec l'overlay autour grâce à FitVids.js. Plusieurs options vous permettront de choisir la couleur de fond, son opacité, l'effet à la transition, etc 1. $(document).ready(function() { 2. 3. 4. 5.
Une utilisation très simple, surtout si vous n'avez pas à utiliser de lecteur vidéo personnalisé. Site Officiel.