background preloader

jQuery – Effet smooth scroll (défilement fluide) - Tutoriels

Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 110 465 fois. L’effet de scroll fluide est déjà intégré, en fonction de vos paramètres utilisateur, sur certains navigateurs. Il se manifeste par un défilement fluide de la page web lorsque vous descendez ou montez grâce à la molette de votre souris, ou les touches de votre clavier. Il y a quelques temps de cela (peut-être trois ans maintenant) j’avais trouvé un script JS pour ajouter cet effet, mais celui-ci ne prenait en compte que les ancres dotées de l’attribut name, sous cette forme : <a href="#cible">Aller à "cible"</a> <a name="cible"></a> C’est pourquoi aujourd’hui je vous propose de créer votre propre script jQuery de smoothscroll. Solution de base NB : les codes JavaScript qui vont suivre sont à placer après l’appel à la bibliothèque jQuery, fait sous cette forme, par exemple : <a href="#contact">Contact</a> <h2 id="contact">Contact</h2> Création d’une extension de jQuery if(!

http://www.creativejuiz.fr/blog/tutoriels/jquery-effet-smooth-scroll-defilement-fluide

Related:  jQueryFront-endStructures esthétiques (HTML, CSS, Jquery...)Côté web

50 super plugins jQuery récents pour rendre votre site ergonomique et attrayant Cela fait quelques années que le Javascript et notamment jQuery – qui simplifie et norme son utilisation – continuent d’être de plus en plus utilisés. Aujourd’hui cette technologie est toujours plus facile à exploiter grâce à l’installation de plugins, c’est-à-dire de petits modules de code. Il n’a jamais été aussi facile qu’aujourd’hui de rendre un site ergonomique, originale et attractif ! Ces 50 plugins sélectionnés avec soin parmi les milliers existants vous permettront de transformer n’importe quel site fade en site riche, intuitif, interactif et ergonomique, y compris sur mobile. Leur mise en place est en général très simple. Selon le plugin et ses capacités son utilisation et les réglages varient de très faciles à plus avancé pour les connaisseurs.

Infinite Scroll avec jQuery sur WordPress Dans ce tutoriel vidéo, je vous propose de mettre en place sur votre site un système de défilement infini avec jQuery et sans utiliser de plugins WordPress. Avant de regarder la vidéo, je vous conseille de lire le contenu de cet article afin de mieux comprendre le principe de la technique utilisée durant le tuto. En 2011, le défilement infini (ou la pagination infinie) a été popularisé par les réseaux sociaux tels que Twitter et Facebook. En effet, depuis la découverte de cette technique, de nombreux sites ont mis en place l’Infinite Scroll à la place place des paginations à l’ancienne (bouton suivant et précédent). Par exemple, afin d’améliorer l’expérience utilisateur, Tumblr a su adapté les archives de ses blogs avec ce procédé (ex:

Développer une application web HTML5 Il y a 3 ans sur twitter, un certain Christian Heilmann, évangéliste web chez Mozilla, nous avait donné la clé pour comprendre HTML5: « HTML5, c’est passer des pages statiques aux applications web et des bidouilles aux solutions » Dans cet article, nous allons redécouvrir comment développer une application web HTML5 à travers une série d’exemples et de conseils. Bien démarrer avec HTML5 Commençons par une page HTML5 avec le minimum vital : un doctype HTML5 sur la première ligne : à ne pas oublier sous peine de faire basculer votre navigateur dans un mode de compatibilité dégradéune balise meta UTF-8 à insérer en premier dans la partie « head » de votre document pour éviter les problèmes d’encoding

25 ressources jQuery et CSS3 pour vos sites web Pour que votre futurs projets web soit encore plus beaux, plus agréables et plus utilisables, je vous propose de découvrir 25 plug-ins et tutoriels utilisant jQuery et CSS3. Certains sites de référence comme Codrops méritaient des articles quasi hebdomadaires, tant la qualité des ressources proposées y est impressionnante. Pour garder que le meilleur de cet amas de ressources disponibles sur le web, j’ai sélectionnés pour vous quelques outils utiles pour posséder les ingrédients d’un site moderne. Comment lancer plusieurs fonctions JavaScript au chargement d'une page Lors de l'utilisation de plusieurs bibliothèques JavaScript sur une même page, il arrive que seule l'une d'entre elles fonctionne correctement. Cela est en général dû à un problème d'écrasement des gestionnaires d'événement : en effet, si l'attribut onload est défini plusieurs fois (soit sur l'objet window dans le code JavaScript, soit sur l'élément body dans le code (X)HTML), seule la dernière définition est prise en compte. Par exemple :

25 ressources CSS et plugins Javascript pour vos interfaces Rien de tel que de nouveaux plugins et ressources Javascript pour booster vos sites web et votre inspiration ! Pour assouvir votre soif de nouveauté, je vous invite à découvrir 25 ressources en tout genre pour rendre vos sites plus efficaces. Au-delà de design, une bonne expérience utilisateur est plus qu’essentielle pour accompagner vos utilisateurs sur votre site web. Les ressources suivantes vont vous permettre de rendre votre site plus animé, plus fluide, plus propre, plus innovant, bref plus cool et remarquable que jamais. Utilisables tels quels ou personnalisables à souhait, vous êtes à présent libre d’adapter les scripts pour y apporte une touche originale !

Twitter Feed for WordPress : Afficher vos derniers tweets Twitter est l’un des réseaux sociaux les plus en vogue du moment avec Google+ et Facebook. Si vous avez la gâchette facile au niveau des tweets et que vous souhaitez les afficher sur votre site Internet, l’extension WordPress Twitter Feed for WordPress est pour vous. Twitter Feed for WordPress vous permet tout simplement d’afficher les tweets d’un utilisateur dans vos pages, articles ou widget. Animations pleine page avec CSS - IEBlog Français Depuis la version 9, Internet Explorer prend en charge les transformations 2D CSS. Internet Explorer 10 Developer Preview étend cette prise en charge aux transformations 3D CSS et aux animations CSS. En exploitant la puissance du processeur graphique et en lançant une exécution asynchrone par rapport au code JavaScript standard, ces fonctionnalités d'IE10 offrent une solution plus performante et plus flexible que les animations traditionnelles des contenus Web, généralement basées sur des scripts. Dans de précédents billets de blog, nous avons évoqué les transformations 3D CSS, ainsi que les animations et transitions CSS.

Filtre CSS « flou localisé » ou « flou progressif » - Créer de la profondeur de champ avec les filtres et les masques Cette démo fait suite à Effet « soft-focus » en CSS, mais fait entrer les masques CSS et SVG pour créer des effets de « flou progressif » ou de « flou localisé ». Le principe est donc strictement le même que la démo précédente, hormis l’utilisation des masques sur la seconde image qui superpose la première. (Je vous conseille de lire le premier article avant de continuer) Ajout des filtres CSS et SVG Scroll vers une ancre interne (avec jquery) - Kadur Arnaud - Création site internet Angoulême Quand on veut se rendre sur une ancre interne avec un simple lien HTML c'est assez simple, il suffit de faire pointer l'attribut href du lien en question vers l'id de l'élément vers lequel on souhaite se rendre en le préfixant de # . Rien de bien sorcier mais bon avec un petit exemple c'est bien aussi : C'est sympatoche mais la transition est un peu brutale, ...puisqu'il n'y en a pas en fait ^^ Le but du petit script qui suit est de rendre le même service en ajoutant un petit effet de scroll plus ou moins rapide. Dans un premier temps il s'agit de ne lancer la fonction qu'aux seuls liens dont les attributs href commencent par le préfixe qui désigne ce genre de liaisons internes, le caractère #. En CSS c'est très simple et reconnu par tous les navigateurs.

CSS3 : Transformations 2D CSS3 apporte les transformations en 2 dimensions à travers la propriété transform et une liste de fonctions prédéfinies. Voyons ensemble la prise en charge actuelle de cette propriété et des fonctions qui l'accompagnent. La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Il est donc possible de modifier l'apparence d'un élément grâce à un ensemble fonctions 2D :

Related: