Home - OK-Studios - Corporate Design & Brand Creation - Typo3 & Magento Agentur Hamburg
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. 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). Illustration pour le scroll Avec une même distance de scroll, l'élément a aura parcouru une distance plus faible que l'élément b. Illustration pour le positionnement de la souris En pratique Démonstration
Tutos
Les recettes de Gavottes
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. 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. Schématisation Base HTML Voici un code allégé qui reprend le contenu du document de démonstration. <! Beaucoup de styles Animation en fonction de la cible
Miss Brown
En tant qu'entreprise responsable, et conformément à notre Code Marketing, nous devons vérifier que votre âge correspond à nos engagements de communication sur nos produits. Indiquez votre date de naissance ci-dessous : Pour plus de détails sur nos activités pour une communication plus responsable, cliquez sur le lien du Code Marketing. Pour plus d'information sur notre Code Marketing, cliquez ici Votre profil n'est pas éligible par rapport à notre Code Marketing pour accéder à l'information que vous avez demandée. Pour plus de détails sur nos activités et pour une communication plus responsable, Cliquez ici.
Fluid CSS3 Slideshow with Parallax Effect
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is shown. The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit). Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The Markup We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. The list elements are the wrappers for each slide and although we are using simply images here, you can use any kind of content. The CSS The styles of the inputs and the labels: … and the sp-parallax-bg div:
NESTLE BREAK KitKat
I'm Google
I’m Google is an ongoing tumblr blog in which batches of images and videos that I cull from the internet are compiled into a long stream-of-consciousness. Both the searching and arranging processes are done manually. The batches move seamlessly from one subject to the next based on similarities in form, composition, color, and theme. This results visually in a colorful grid that slowly changes as the viewer scrolls through it. Images of houses being demolished transition into images of buildings on fire, to forest fires, to billowing smoke, to geysers, to bursting fire hydrants, to fire hoses, to spools of thread. The site is constantly updated week after week, batch by batch, sometimes in bursts, sometimes very slowly. The blog came out of my natural tendency to spend long hours obsessing over Google Image searches, collecting photos I found beautiful and storing them by theme. Firstly, lots of people ask if it's a algorithm or something. I hope you enjoyed my first FAQ – Dina Kelberman
One page design : effet de mode ou réel intérêt pour les marques ?
Il existe de plus en plus de nouveaux sites web construits sur une page unique, complètement navigable et offrant une nouvelle expérience utilisateur. Quels sont les atouts de ces nouveaux types de pages pour les marques ? Article rédigé par Stéphane Cholet. Directeur technique de l’agence web CLAP40, il accompagne ses clients dansleur stratégie web, mobile, sociales et CRM (acquisition, fidélisation, notoriété… ). Stéphane est également photographe à ses heures, et édite le site bokeh.fr. Toujours dans un besoin d’étonner, de surprendre et d’enrichir l’expérience utilisateur, le one-page (ou single-page) design (re)fait son apparition. Les nouvelles technologies au service du one page design Un site en one-page design est un site construit en une seule page web. Pour quels usages ? Dans quel cas les marques auraient elle besoin de construire un site une page ? Exemples de one page design J’ai sélectionné plusieurs pages qui me semblent intéressantes à partager et à comprendre :
SCROLL FOR YOUR HEALTH - by Tomer Lerner
Rich in minerals Rich in vitamin C Makes you less hungry Low on calories Source of B-complex vitamins Rich in anti-oxidants Will make you poop... Rich in vitamin C Contain vitamin A & E Makes your teeth whiter Low in calories Rich in anti-oxidants Makes you feel peachy Rich in natural sugar Rich in vitamin B6 Makes you feel happy :)))
Pepsi Next
