La boite à outils de la parallaxe Bientôt deux ans que les effets de parallaxe font parti du quotidien sur le web. Si vous n’avez pas encore sauté le pas, c’est le moment de vous y mettre ! Petite piqure de rappel sur la parallaxe avec cet article « 11 sites avec effet de parallaxe » mis en ligne début 2011. L’effet ne date pas d’hier, utilisé sur le web à l’époque, notamment avec Flash, la parallaxe donne de la profondeur et du relief aux interfaces plates. Cet effet de profondeur est obtenu au déplacement de plusieurs éléments sur différents plans et à des vitesses différentes. L’ancien site Nike Better World avait remis l’effet au goût du jour en utilisant un subtil mélange de Javascript et d’images PNG transparentes. Peut-on imaginer voir cette tendance se développer même avec l’ampleur que prend le responsive design ? Voici l’intérêt de cet article, qui est en quelque sorte une boite à outils et à utiles. 1 – Pour commencer, quelques exemples : Lois Jeans Mario Kart Wii Iutopi Dentsunetwork Activated Drinks Von Dutch
jQuery TwentyTwenty Plugin Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them! Download TwentyTwenty The Problem We recently needed a way to showcase the visual differences between two images. Folks tend to typically place two images next to each other in hopes that it'll be clear exactly what changed. One of our Design Leads pointed us to Canada Goose, a cold weather outfitter. This sparked a few new ideas on how to do something similar for our own needs. Responsive and functional on all devices Doesn't require images to workWorks with Foundation out of the box How it works TwentyTwenty works by stacking two images on top of each other. We're using custom movement events from the jquery.event.move library in order to support 1:1 slider movement on mobile devices. Setting up It's easy to get started, just wrap two images inside of a container. Then call twentytwenty() on this container once the images have loaded: And voila! Preventing FOUC JavaScript Options
El Monstruo que no dejaba ir a los niños al colegio El trabajo de Serch (Malo) Galindo Written on Dec 26, 2011 // Diseño. Inspirado fuertemente por las mujeres y (seguramente) por los cómics, Serch (Malo) Galindo se ha dedicado desde hace un par de años a la ilustración editorial y el diseño gráfico. Su labor según sus propias palabras le ofrece “dibujar lo que a mí me dé la gana, como me dé la gana, pero siempre con pasión y calidad”. Ha puesto su firma en campañas publicitarias, revistas impresas y digitales, editoriales y exposiciones entre otras; también le entra a todos los proyectos que le parezcan originales, sin importar la técnica. A continuación les dejamos una galería con su obra. Más imágenes en
Textillate.js textillate.js A simple plugin for CSS3 text animations. Download on Github About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries. Playground Grumpy wizards make toxic brew for the evil Queen and Jack. Dependencies Textillate.js depends on the following libraries: jQuery animate.css, by Daniel Eden lettering.js, by Dave Rupert
Space Milkshake - In 2012, We're Ducked! Design Embraced - Anthony Goodwin Créer un formulaire de contact Nous allons ici crer un formulaire permettant d'envoyer un message sous forme d'email au webmaster du site (vous en l'occurrence) tout en dissimulant l'adresse mail de ce dernier aux yeux des robots spammeur qui parcours le web. La page contenant le formulaire de contact Le code ci dessous est celui que doit contenir la page partir de la quelle vos visiteurs vont rdiger le message vous tant adresse. Nom : nom du visiteur (ce champ n'est pas d'une très grande importance) E-mail : vous permet de répondre à la personne qui vous a écrit Sujet : permet de résumer le contenu du message Message : c'est la que le message sera tapé par votre visiteur Vous êtes libre de modifier l'emplacement des champs afin de l'adapter au design de votre site Envoi du forulaire et de redirection du visiteur <? /////voici la version Mine $headers = "MIME-Version: 1.0\r\n"; //////ici on détermine le mail en format text $headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
by Breezi - Generate Product Screenshots in Realistic Environments How do I record my iOS app? Please click here for instructions on how to record your iOS app. How do I record my Android app? Please click here for instructions on how to record your Android app. I've installed Recordit but it keeps asking me to install Recordit If you're on a Mac, you'll want to check to see if you have your notifications on "Do Not Disturb". If you're on a PC, try shutting Recordit down. Which gestures do you support? We currently support swipe up, swipe down, swipe left, swipe right and tap. I can't get Recordit to work... what can I do? What does Recordit do? Recordit is our app so yes, it's perfectly safe to use. I don't like the camera movement. Yes!
30 one-page sites you’ll wish you had built With web users bombarded with so much information, web designers are constantly exploring new ways to deliver content. One-page websites are now being widely adopted with some of the biggest brands in the world using them to provide users with a fast, clean and simple experience that is simultaneously effective and beautiful. Over the past few years, we’ve seen the trend towards one-page websites grow thanks to the introduction of HTML5 and jQuery, which make it easy to build stunning websites with nifty transitions and effects. Below are 30 stunning one-page HTML5 websites, covering everything from minimalist design and simple navigation to parallax scrolling. If you’re looking for inspiration for your new single page HTML5 website, take a look at the list below: 1. Having won several awards, Trionn Design’s one-page HTML5 website uses parallax scrolling to make it easier for users to navigate through the site. 2. 3. 4. 5. This one’s for all the romantics out there. 6. 7. 8. 9. 10. 12.