Parallax Hovering And Its Engaging Quality For Web Design Parallax effects are interactive by nature and still relatively new in web design. That’s why they are a great way to make your visitors curious, draw them in, and engage them with your website. On the web, as much as in the real world, we are quite cautious and like to be in control. At times, we are uncertain and appreciate instant feedback on our actions. Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight. – Source If we look at a close object from two different viewpoints, and against a distant background, we get a different perspective for each viewpoint. A while back we talked about parallax effects triggered by scrolling. Attract your visitors’ attention Regarding the visual and animated nature of parallax effects, they are a great way to attract attention. Parallax effects can guide your users’ line of sight. Use parallax hovering to attract your visitors’ attention. Create a sense of depth Entertain your visitors
Onslaught! Arena Introduction In June of 2010, it came to our attention that local publishing "zine" Boing Boing was having a game development competition. We saw this as a perfectly good excuse to make a quick, simple game in JavaScript and <canvas>, so we set to work. After the competition we still had a lot of ideas and wanted to finish what we started. Here's the case study of the result, a little game called Onslaught! The retro, pixelated look It was important that our game look and feel like a retro Nintendo Entertainment System game, given the contest premise to develop a game based on a chiptune. Given how small these sprites are we decided to double-up our pixels, meaning that a 16x16 sprite would now be 32x32 pixels and so forth. Here's a scenario that we considered: This method would consist of 1x1 sprites instead of doubling them up on the asset creation side. Fun canvas tricks We all know that <canvas> is the new hotness, but sometimes developers still recommend using DOM. The Game Loop Audio
Sliding Boxes and Captions with JQuery One Mighty Roar via Ad Packs Jarek Kubicki ArtistMore Work Kamil Smala ArtistMore Work Martin Stranka PhotographerMore Work Florian Nicolle Graphic DesignerMore Work The Nonsense Society Art, Music, WordWebsite This is the Live Demo Go back to the tutorial for a full explanation of what's going on! HTML5 Sites Javascript : 10 plugins que vous devez connaître - ressource-javascript Pour vous aujourd'hui, 10 ressources javascript pour vous aider dans vos projets. Chosen est un plugin javascript ajoutant de nombreuses fonctionnalités aux selects, tout en les rendant beaucoup plus jolis. Disponible pour jQuery et prototype. TypedJS est un outil de test pour javascript. Fancybox est un très bon plugin de lightbox, peut être le meilleur sur le marché. Turnjs est un clone de l'effet de page tournée de ibook sur ios. Jcrop est un plugin jQuery permettant de cropper une image en JS. Comment faire une timeline simplement en JS? Ce plugin permet de transformer simplement des données json un joli diagramme de Gantt Vos clients trouvent wordpress trop complexe? Codemirror est un éditeur de texte en ligne avec coloration syntaxique.
25 free, scrolling plugins for awesome experiences The art of creating a website these days is learning how to create an online experience. Many of these experiences are extensions of a brand or person and are relayed via different colors, fonts, etc. Thanks to awesome advancements in technologies, we can do a lot of stuff with our websites that we couldn’t do a few years ago. One of the trendiest techniques to have fun with is scrolling. Many of these techniques are what is affectionately called parallax scrolling. That’s why today, we’ve put together a bunch of our favorite plugins to get even the least code-savvy started making some great scrolling sites… Scrolld.js Cool Kitten FoldScroll fullPage.js AnimateScroll Parallax.js Jarallax jInvertScroll jQuery Full Content One Page Scroll jQuery Parallax Scroll Path PageScroller Lite jquery-parallax Arbitrary-Anchor Portfoliojs Scrolling Parallax Scrollocue Scrollorama Scrolltab Scrolly Skrollr Sly Smint Super Scrollorama Have you developed a site based around scrolling?
Javascript Mistakes You Must Avoid If you are new to JavaScript and you write raw JavaScript or use any framework (jQuery, Mootools, Dojo, YUI) with it, you must avoid few mistakes. Actually these are my experiences when I was learning JavaScript. Equality Operator You may know that in js, two operators are used for comparing values. Here are more examples. Some of the results are unexpected specially for those who don’t know how JavaScript evaluates == operator. Consider the first example (1 == “1″). In the second example (“true” == true) is false because if the string contain characters other than digits, convertion to number will return NaN which means Not a Number. You can check what value will be returned after conversion to number using the Number constructor. Now you maybe wondering how === operator works. Not Assigning null to Reference Types It’s common mistake that many js developers don’t assign null value to variables of reference types (object or Array) when there use is finished. Don’t Forget Keyword var
Iframe loading techniques and performance First publication: December 20, 2010 Iframe setTimeout() does not work in IE9 Chad Barnsdale of Unfinishedman.com mentioned to me on May 25 that the Iframe setTimeout() technique does not work in IE9. And he was right. The file that gets loaded into the iframe simply does not load. Nothing happens. I will dive into this sometime soon. Iframes are often used to load third party content, ads and widgets. Iframes block onload of the main page The main page and iframe share the same connection pool The onload blocking is the biggest problem of the two and hurts performance the most. How can you load an iframe without blocking onload and as a result improve page performance? This article shows 4 ways to load an iframe in a web page: Normal Iframe, Iframe After Onload, Iframe setTimeout() and Dynamic Asynch Iframe. Normal Iframe You all know this one. Using the Normal Iframe technique will result in the following behaviour in all browsers: Click for bigger version. Iframe After Onload Like it?
20 Top Script.aculo.us Scripts you can’t live without-Speckyboy Design Magazine | Speckyboy Design Magazine 20 Top Script.aculo.us Scripts you can’t live without. 1. Sexy Sliding Menu for script.aculo.us URL: Description: There is also a MooTools variation with this menu, this truelly is a sexy sidebar. I am using this script on a new site I am designing. 2. URL: 3. URL: 4. URL: 5. URL: 6. URL: 7. URL: 8. URL: 9. URL: 10. URL: and the rest… 11. 12. 13. 14. 15. script.aculo.us Reflector. 16. 17. 18. 19.
Bien valider ses formulaires avec Javascript Petit rappel sur les formulaires Rappelons-nous d'abord de quoi est composé un formulaire : de champs de saisie, matérialisés par des balises input, select et textarea ; de boutons pour valider ou annuler / effacer le formulaire, respectivement <input type="submit" /> et <input type="reset" /> ; une balise form qui encadre le tout ; et éventuellement ce fameux script en Javascript qui va vérifier le contenu avant son envoi vers le serveur Web. Cet ensemble peut être complété par des balises label, fieldset, legend, etc. pour améliorer l'accessibilité et la structure d'un formulaire. Je vous renvoie à l'article Utilisation des formulaires pour en savoir plus à ce sujet. Nous ne nous occuperons ici que de l'aspect Javascript. Voila ce que cela pourrait donner : <form action="url_page_suivante" method="get" name="formSaisie"><p><label for="prenom">Saisissez votre prénom :</label><input type="text" name="prenom" id="prenom" /><input type="submit" value="Ok" /></p></form> L'événement "onsubmit"
Programmation orientée objet en JavaScript Je ne sais pas si, vous aussi, avez déjà pratiqué JavaScript sans jamais en apprendre les bases… Par le passé, j’ai ponctuellement fais du JavaScript mais je n’ai jamais convenablement appris ce langage. J’ai aussi fais un amalgame entre JavaScript et jQuery. Depuis peu, j’ai décidé de me plonger dans cet univers controversé. JavaScript est parfois adoré, parfois détesté… Je pense que ses détracteurs sont peu être restés sur le JavaScript des débuts du Web qui servait à afficher des popup intrusives… (je sais je me moque un peu ;-p). Aujourd’hui, JavaScript est indéniablement devenu incontournable! J’ai rencontré pas mal de difficultés pour trouver des explications claires sur ce langage et sur la façon de l’utiliser. JavaScript? Tout le monde (ou presque) peut affirmer: « ben oui! A contrario, en JavaScript, la notion de classe n’existe pas (bien que nous allons parler de classes par la suite, mais ce sera un raccourci, ou plutôt même un abus de langage). Approche objet en JavaScript