jQuery.parallax Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
Behind The Scenes Of Nike Better World Learning from Twitter An issue popped up on Twitter this past week that caused the web site to be generally unusable for many users. It appears as if attempts to scroll were unbearably slow and caused the site to be unresponsive. The Twitter team investigated and determined that if they reverted the version of jQuery that they used back to 1.4.2 from 1.4.4 the site would be responsive again. After more investigation they determined that the code that was slow was doing a contextual selector search for an item by class name, for example: $something.find(".class"). So – what happened? However, as with every performance change, while some things get way faster some things can also get slower. What’s interesting here is that we’ve been using querySelectorAll for our default selector engine in jQuery for quite some time now (doing $(‘.class’) would use querySelectorAll). This brings up the important point: Just how much faster is getElementsByClassName compared to querySelectorAll? So. Comments are closed.
CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!
Parallax Tutorials. Roundup from DesignFloat The WOW effect is the very thing that can make the public interested in your online project. You can achieve this effect using parallax, for instance. Today’s roundup features Parallax Tutorials that can teach you how to create cool parallax effects using clear examples. Following them step by step, you’ll learn how to develop the awesome websites that will attract plenty of visitors. Browse this tiny but useful collection of Parallax Tutorials and try them in order to start your own effective projects! Building a Parallax Scrolling Storytelling Framework jQuery Parallax Tutorial – Animated Header Background Create a Funky Parallax Background Effect with jQuery Create a Realistic Camera Move with Parallax Parallax Mapping Tutorial Parallax Scrolling Tutorial Parallax Slider with jQuery The Parallax Effects with jQuery Tutorial Awesome 3D Parallax Background Effect with jQuery Tutorial Parallax Serial Terminal
Comparaison Etsy, DaWanda, A Little Market, SiandSo Depuis que j’ai découvert Pinterest, ma fièvre créatrice s’est réveillée, au grand bonheur des vendeurs de perles près de chez moi. :-) J’espère arriver à faire des bijoux qui se vendront (un petit peu ça m’irait), au moins pour vider mes placards des créations qui s’entassent ! Mais quelle plateforme de vente choisir ? Le choix est ardu ! Voici donc les critères que j’ai rassemblés et cherchés sur chaque site : frais de vente (avec toutes les subtilités que cela comporte)outils de promotion proposésla visibilité qu’on peut en espérer Je n’ai pas toujours trouvé toutes les infos parce que c’était pas toujours indiqué : ça explique les « nsp » (« ne sais pas »). Assez parlé, voilà le tableau, mis à jour régulièrement (attention, les chiffres pour Etsy sont en US dollar $$$) : Les exemples en fin de tableau montrent qu’au final Etsy est le moins cher (eh oui, puisque ce sont des dollars…), sauf si on vend beaucoup beaucoup de créations. Et vous, vous avez choisi quoi ?
jquery Scroll event in $(window), find out the position difference Augmenter sa visibilité sur internet - Formation Internet Augmenter la visibilité de son site internet pour se faire connaitre, c'est primordial. Vous déjà avez mis en place les conseils précédents, votre site internet est opérationnel, il est optimisé (balises, mots clés, navigation, vitesse, etc), son esthétique est adapté, le contenu est riche, ciblé sur vos futurs clients ? Alors après les « oui mais », voyons maintenant quelques pistes, simples et gratuites, à explorer afin d’augmenter sa visibilité et par la même, trouver de nouveaux clients : Commencez par inscrire votre site sur Google, oui cela peut sembler bête mais c’est primordial pour votre référencement. Rendez-vous sur Google Webmaster Tools, inscrivez-vous, soumettez votre sitemap (plan regroupant toutes les pages de votre site), faîtes la même chose avec Bing.N'oubliez surtout pas Google Adresse pour enregistrer votre Auto-entreprise, c'est simple et vous n'avez même pas besoin d'un site internet, une simple adresse mail suffit. Booster sa visibilité grâce aux Réseaux Sociaux
One page website Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery