background preloader

Zoom sur l'effet parallaxe

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

http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html

Related:  création site dreamweaverdevhtml5 cssCSS & Sass Tita Créa

Des pixels et du code #27 - Stéphanie Walter : Webdesign - intégration web Une petite semaine avec beaucoup de liens orientés code : CSS, CSS3 et responsive webdesign, du retina display, et quelques articles sur le débat de la semaine, le skeuomorphisme Les tutoriels de la semaine CSS target for off screen designs, ou comment re-créer l’interface de l’envoie de sms iOS en CSS uniquement en utilisant :target Utiliser un logo cliquable SVG sur un site avec fallback, mon article sur Noupe avec 6 techniques pour utiliser une image SVG en logo avec différents fallbacks

« Le Héros c’est toi ! » un serious game développé au CHU de Rennes pour les enfants hospitalisés « AzaGAME Pour améliorer le confort et réduire les angoisses des enfants hospitalisés, l’association d’infirmiers et médecins anesthésistes « Les p’tits doudous de l’hôpital Sud » du CHU de Rennes redouble d’efforts depuis près de 3 ans et multiplie les actions. Début 2014, elle a mis au point un jeu sur tablette, pour égayer le chemin parcouru par les enfants, de la chambre au bloc opératoire. Une association pour dédramatiser les interventions chirurgicales des tout-petits, Une réponse : les serious games ! L’idée vient de Nolwenn Febvre, infirmière-anesthésiste au CHU de Rennes, et présidente-fondatrice de l’association. C’est en 2013 que l’association lance un nouveau projet, celui de développer un jeu vidéo pour détendre les enfants, réduire leurs peurs et leurs angoisses tout au long de leur parcours hospitalier mais aussi le traumatisme psychologique qu’il constitue plusieurs mois après l’intervention et son passage à l’hôpital. Lire la suite de l’article sur themavision.fr

7 ressources Javascript pour créer un site full-page ou parallax - ressource-javascript Aujourd'hui sur le Blog du Webdesign, découvrez 7 ressources javascript et jQuery pour créer des sites fullpage ou parallax. Une des grosses difficultés à gérer sur les sites de type full page, ou en construction au scroll est que tous les utilisateurs n'ont pas tous la même résolution d'écran. Comment, dans ces conditions-là, faire en sorte que les sections de pages ressemblent toutes exactement à la maquette, fournis dans une seule taille, évidemment ?

Prepros est le compagnon de vos projets SASS - Seemios Blog Prepros est un petit logiciel qui va vous faciliter la vie, surtout si vous ne supportez pas la ligne de commandes. Il permet de compiler vos fichiers SCSS ou SASS très simplement. Plus besoin d’installer Ruby et d’ouvrir votre invite de commande sur Windows. Tout est graphique et automatique après un petit paramétrage. Prepros est capable de compiler de nombreux langages tels que Less, Coffeescript, Markdown ou encore Haml. Cependant, nous allons plus particulièrement nous intéresser à la compilation des fichiers SCSS du préprocesseur SASS présenté dans un précédent billet.

La boîte à outils ultime pour le responsive design Si vous ne savez pas par où commencer votre webdesign responsive, ni quels outils vont vous faciliter la vie, cette liste d’outils concoctée à l’aide du dernier article de Smashing Hub devrait vous égayer. Faisons un petit tour des outils pratiques ou simplement indispensables… Le responsive design est relativement récent et les choses bougent très vite. A peine a-t-on pris connaissance d’une technique qu’il faut déjà apprendre une nouvelle chose ou maîtriser le dernier outil sorti. Le responsive design n’est pas une simple mode de passage mais bel et bien une possibilité et une philosophie de conception de sites web bien en place qui fait ses preuves. Avec sa popularité toujours grandissante, de nombreux outils ont vu le jour pour faciliter le travail des concepteurs et intégrateurs de sites.

La structure d’une page HTML5 Comme l’HTML5 est actuellement mis en œuvre par quasiment tous les webmasters sur Internet, enfin du moins les plus « passionnés », j’ai pensé qu’il était nécessaire d’expliquer certains des nouveaux éléments et de poser les bases de la structure d’une page HTML5. D’autant que plusieurs des sites que j’ai davantage regardés et qui montrent une structure HTML5, ne semblent pas avoir compris comment les nouveaux éléments structurels doivent être utilisés. Effectivement la structure de base d’un document HTML5 n’a pas changé. Chaque structure comprend une section d’entête (head) contenant des détails invisibles et des liens vers des ressources et une section de corps (body) où les éléments visibles du document résident.

nouscontacter Nous contacter Contactez l’Association Docteur Souris pour demander ou soutenir l’installation d’un dispositif Docteur Souris, pour toutes questions concernant notre action et propositions de partenariats. Nos coordonnées Adresses email : Tous contacts : info@docteursouris.fr Support technique : support@docteursouris.fr N° de téléphone : Le guide ultime pour accélérer son développement frontend Il existe deux types de développeurs : ceux qui développent vite (et bien) et les autres. En tant que développeur frontend vous vous êtes sûrement déjà rendu compte que certaines parties de votre travail/passion était redondantes et qu'il était souvent possible d'aller plus vite. Bref, je vais vous apprendre à passer au niveau supérieur de productivité à travers une (longue) liste de conseils et d'astuces glanées sur le web. Sommaire

Revue : Prepros - Geek'n'Lady Et bonjour ! Comme vous le savez maintenant, je suis une adepte de Sass. Mais qui dit Sass (ou même Less), dit compilation. Très sincèrement, ça m’embêtait de devoir à chaque fois lancer cmder et de demander à Ruby d’écouter les dossiers de mes sites et de les compiler. Les 5 mythes et vérités de HTML5 Les mythes Avec HTML5, mon site sera plus beau HTML5 dispose certainement d'un beau logo orange rayonnant inauguré par le W3C pour en faire la promotion, cependant il fonctionne toujours en osmose avec CSS pour régir l'apparence, la présentation, la disposition du contenu. Cela signifie donc que rien ne change par rapport aux précédentes versions de HTML : il vous faudra toujours jongler avec habileté entre CSS, les images issues de la maquette graphique, éventuellement des effets en JavaScript, du SVG, voire Canvas, pour construire le côté visuel d'un document ou d'une page web.

Related:  ParallaxTutorielSite infographie informatiqueSite en paralaxWebInformatiqueRessourcesDoriane MouhéA tester