Material Design Lite Zoom sur l'effet parallaxe Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Des exemples Utilisant le positionnement de la souris digitalhands.net bikingboss.com Utilisant le niveau du scroll nikebetterworld.com ok-studios.de driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). En pratique
Deep Sea Cowboys | Epic Magazine Since graduating first in his class from New York's Webb Institute, a preeminent undergraduate naval architecture school, Johnson has traveled the world with his laptop, building 3-D models and helping refloat sunken things. He was on the team that recovered the Japanese fishing trawler sunk by a US submarine off Hawaii in 2001, and he oversaw a system to lift a submerged F-14 from 220 feet of water near San Diego in 2004. In his free time, he wins boat races in which the skippers build their vessels from scratch in six hours or less. But so far, Johnson has refloated only vessels that are already sunk. He's about to get his chance. The job is daunting: Board the Cougar Ace with the team and build an on-the-fly digital replica of the ship. Johnson will have to unravel the complexity. Habib thinks Johnson is up to the task. Habib refused. Habib smiled. Johnson told the Coast Guard not to worry; the ferry would be floating again in three days at exactly 10:36 in the morning.
Ariel Flesler: jQuery.ScrollTo Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ? Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash.
Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! CSS Zen Garden: The Beauty of CSS Design A Game of Shark and Minnow - Who Will Win Control of the South China Sea? A Game of Shark and Minnow In a remote corner of the South China Sea, 105 nautical miles from the Philippines, lies a submerged reef the Filipinos call Ayungin. Satellite imagery: NASA In most ways it resembles the hundreds of other reefs, islands, rock clusters and cays that collectively are called the Spratly Islands. But Ayungin is different. A Game of SharkAnd Minnow By Jeff HimmelmanPhotographs and video by Ashley Gilbertson Produced by Mike Bostock, Clinton Cargill, Shan Carter, Nancy Donaldson, Tom Giratikanon, Xaquín G.V., Steve Maing and Derek Watkins Ayungin Shoal lies 105 nautical miles from the Philippines. In early August, after an overnight journey in a fishing boat that had seen better days, we approached Ayungin from the south and came upon two Chinese Coast Guard cutters stationed at either side of the reef. Bito-onon stood at the prow, nervously eyeing the cutters. We didn’t know if they would ram us, either. Dangerous Ground Sources: C.I.A.; Mayor Bito-onon Source: C.I.A.
IanLunn/jQuery-Parallax ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. Current version: 2.1 beta4. IE7.js Upgrade MSIE5.5-6 to be compatible with MSIE7. IE8.js Upgrade MSIE5.5-7 to be compatible with MSIE8. You do not need to include IE7.js if you are using IE8.js IE9.js Upgrade MSIE5.5-8 to be compatible with modern browsers. You do not need to include IE7/IE8.js if you are using IE9.js The script only fixes images named: *-trans.png If you want the fix to apply to all PNG images then set a global variable as follows: var IE7_PNG_SUFFIX = ".png"; You must set this variable before including the IE7.js script. <script src="IE8.js">IE7_PNG_SUFFIX=".png";</script> The suffix will ignore query string parameters. var IE7_PNG_SUFFIX = ":"; By default, the PNG will be stretched (this simulates tiling). You may link directly to these files if you wish:
Télécharger Easy Thumbnails 3.0 Plus d'images Easy Thumbnails est un logiciel gratuit dans la Gestion de la Photo qui va vous permettre tout simplement de créer vos propres vignettes ou images miniatures. Au sein de son interface conviviale, vous allez pouvoir rechercher vos images et créer vos miniatures. Vous allez pouvoir travailler sur un seul fichier, mais également sur un groupe d’images, ou sur plusieurs dossiers. Le logiciel vous permettra également d’effectuer des rotations, d’ajuster le contraste de l’image, la luminosité, la hauteur et la qualité. Easy Thumbnails prend également en charge la quasi totalité des formats d'images connus : JPEG, JPG, JPEG2000, GIF, PNG, TIFF, BMP, TGA, ICO, etc. Plus d'infos sur Windows sont sur la page consacrée à l'Actualité de Windows et vous pouvez vous rendre sur le Forum dédié aux Logiciels si vous souhaitez participer aux discussions.
Reshaping New York - Interactive Feature Loading Celebrating the Waterfront New buildings constructed during Mr. Celebrating the Waterfront Mr. Brooklyn Bridge Park, 2006 Photo: Alex S. Brooklyn Bridge Park, 2013 Photo: Richard Perry/The New York Times Red Hook Container Terminal Sources: Heights of buildings built before 2010 from an analysis of lidar data by Professor Sean C. By Ford Fessenden, Tom Giratikanon, Josh Keller, Archie Tse, Tim Wallace, Derek Watkins, Jeremy White and Karen Yourish Nikebetterworld Parallax Effect Demo | Ian Lunn - Web Designer & Developer A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level. In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld. If you’d like to see what we’ll be creating, go check out the demo or download the files. The HTML Our page will consist of 6 sections: header, footer and 4 articles. To start, at the top of the page, we’ll reference all of the JavaScript files we’ll use to make the effect work. We also need to initiate the localScroll function on the unordered list of article links that are fixed to the right of the page. Inside of our body tag, we begin with the unordered list that provides a quick link to each section.
Mootools en 30 jours : jour 1 - Introduction Installation de Mootools 1.2 Tout d'abord, téléchargez et installez le noyau (core) de la librairie Mootools 1.2. Téléchargez la librairie Mootools 1.2 CoreUploadez la librairie de Mootools 1.2 sur votre serveur ou espace de travailFaites un lien vers la librairie Mootools 1.2 Core entre les balises de votre page - 2. Créer un fichier JavaScript externe et faire le lien vers celui-ci dans votre : A partir de là, vous pouvez utiliser l'une ou l'autre des méthodes. Placer dans le domready Les fonctions Mootools doivent être appelées dans l'évènement domready. window.addEvent('domready', function() { exampleFunction();}); Placer dans une Fonction Vous pouvez quand même placer vos fonctions en dehors du domready, puis les appeler à l'intérieur de celui-ci. var exampleFunction = function() { alert('hello')}; Description de la librairie Noyau Natif Classes Une classe JavaScript (c'est différent d'une classe CSS), est un objet réutilisable avec des fonctionnalités. Elements Utilitaires Request Plugins