Créez votre menu interactif en images en HTML/CSS ! jInvertScroll - A lightweight jQuery horizontal Parallax scrolling plugin. jInvertScroll - A lightweight jQuery horizontal Parallax Plugin What is it? It's a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down. It's extremely easy to setup and requires nearly no configuration. Note: By using this plugin, we expect that you know the limitations of horizontal parallax scrolling, for instance if the screen height is smaller than the content, the content will be clipped, but this plugin is intended anyway for webdesigners and -developers, so we think that you know what you're doing. ;-) Quickstart 1.)
Position: fixed; // All scrollable elements have to be position:fixed bottom: 0; // Make it stick to the bottom (or top) width: xxxxpx; // I recommend to assign the width in px, prevents preloading issues 4. . ) $.jInvertScroll(['yourselector1', 'yourselector2' Options You can tweak some options if you like: Download You can download the script as a zip file here: jInvertScroll.zip ..or get it from our GitHub repository. Créer un menu horizontal centré en CSS (sans JavaScript) Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 93 383 fois. C’est une chose qui peut paraître très simple à faire, mais sur laquelle beaucoup de personnes se sont cassés les dents. Aujourd’hui encore je trouve des solutions en JavaScript qui permettent d’attribuer une marge à gauche de l’élément ul pour centrer les li qu’il contient.
Solution avec li en inline Vous savez sous doute que l’affichage des éléments de liste se fait par défaut en display: list-item;, qui procure à la liste ce comportement particulier, notamment l’attribution de puces de liste. Considérons le code HTML suivant : <ul id="nav"> <li><a href="#">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">À propos</a></li> <li><a href="#">Contact</a></li> </ul> Les commentaires HTML entre chaque élément de liste permettent de supprimer l’espace blanc (white-space) indésirable, visible sur certaines mises en forme. Solution avec li en inline-block. Blur Menu with CSS3 Transitions. There are so many great things we can do with the additional properties and possibilities that CSS3 brings along.
Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering. View demo Download source There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The images in the demos are by fabulous Mark Sebastian and they are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License. The Markup Let’s create the HTML structure for our menu first. Now we’ll add some style! The CSS Now, let’s take a look at each of the seven examples. Example 1. 20 tutoriels pour créer un menu original avec HTML 5 et CSS 3 - ressources.