CSS Sprites Revisited
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
Les recettes de Gavottes
SVG, le dessin vectoriel pour le web
SVG est un format d'images vectorielles basé sur le langage de balisage XML. Il répond parfaitement à des besoins graphiques légers, qu'ils soient statiques, dynamiques ou interactifs. SVG (Scalable Vector Graphics) est un format de dessin vectoriel, élaboré à partir de 1998 par un groupe de travail comprenant entre autre IBM, Apple, Microsoft, Xerox. Il a mis du temps à être estimé à sa juste valeur sur le Web, notamment à cause de sa lente adoption par les navigateurs. Avantages SVG est un format d'image léger lorsqu'il s'agit de représenter des formes simples, car seules les informations décrivant ces formes sont stockées (coordonnées, couleurs, effets) contrairement aux images bitmap (JPG, PNG, GIF) qui doivent mémoriser le contenu pixel par pixel. Son apprentissage est facile car basé sur une syntaxe simple et intuitive Il peut être édité par un éditeur de texte basique car c'est du XML Il peut être manipulé via JavaScript, car présent dans le DOM Il peut être stylé grâce à CSS <?
Tutos
Un arrière-plan extensible intelligent
Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery. Exemples Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe : Simon & Comet Flavors me Piz'za-za Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le principe Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré. Préparation de l'image de fond La méthode CSS3 Le code HTML
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.
Fresh & Impressive Collection Photoshop Tutorials
Photoshop is an excellent image files editor used by a number of photographers and designers. It provides you with a possibility to edit photos, develop web site designs, create ads, and plenty other functions of the sort. If you are a beginner designer, you will certainly need some help with Photoshop assimilation. Sure, you can attend some Photoshop training courses to learn from coaches. We offer you a set of categorized Photoshop tutorials to learn using this creative design software. All the instructions are comprehensive and straight forward, many lessons are illustrated in details, PSD files with a detailed instruction are attached. Creative Photoshop Text Effect Tutorials Create an Instagram Widget How to Create a UI Sliders Set in Photoshop Funky Retro Wavy Text Effect Cool Text Effect with the Puppet Warp Tool Retro-Style Text How to Create Code Editor Design Music Equalizer Text Effect Retro Folded Typography Distressed Vector Typographic Poster Atmospheric Under-Water Text Effect
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
Effet de parallaxe sur son site – jParallax
(function(jQuery) { function stripFiletype(ref) { var x=ref.replace('.html', ''); return x.replace('#', ''); function initOrigin(l) { if (l.xorigin=='left') {l.xorigin=0;} else if (l.xorigin=='middle' || l.xorigin=='centre' || l.xorigin=='center') {l.xorigin=0.5;} else if (l.xorigin=='right') {l.xorigin=1;} if (l.yorigin=='top') {l.yorigin=0;} else if (l.yorigin=='middle' || l.yorigin=='centre' || l.yorigin=='center') {l.yorigin=0.5;} else if (l.yorigin=='bottom') {l.yorigin=1;} function positionMouse(mouseport, localmouse, virtualmouse) { if (! difference.x = virtualmouse.x - localmouse.x; difference.y = virtualmouse.y - localmouse.y; difference.sum = Math.sqrt(difference.x*difference.x + difference.y*difference.y); virtualmouse.x = localmouse.x + difference.x * mouseport.takeoverFactor; virtualmouse.y = localmouse.y + difference.y * mouseport.takeoverFactor; if (difference.sum < mouseport.takeoverThresh && difference.sum > mouseport.takeoverThresh*-1) { mouseport.ontarget=true; else { var offset; if(!
NESTLE BREAK KitKat
