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 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> Or la création d’un élément anchor dans le seul but de créer une ancre ne me semblait pas la méthode la plus propre, mais comme j’étais une quiche en JavaScript (ça n’a pas trop changé d’ailleurs, puisque j’utilise principalement jQuery pour me faciliter l’existence), j’ai fait avec ce code jusqu’à ce que je découvre jQuery et le plugin jQuery.scrollTo(). C’est pourquoi aujourd’hui je vous propose de créer votre propre script jQuery de smoothscroll. Solution de base Voyons le code de plus près :

noty - a jquery notification plugin Hi! noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. The notifications can be positioned at the: top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight The API provides lots of other options to customise the text, animation, speed, buttons and much more. It also has various callbacks for the buttons such as opening and closing the notifications and queue control. Layouts & Demos Top Alert Success Error Warning Information Confirm TopLeft Alert Success Error Warning Information Confirm TopCenter Alert Success Error Warning Information Confirm TopRight Alert Success Error Warning Information Confirm CenterLeft Alert Success Error Warning Information Confirm Center Alert Success Error Warning Information Confirm Installation Try! Theme

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 : 150 best jQuery effects for web designers and developers Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications. With jQuery, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do more”. You can utilize jQuery to handle events, generate animations, and even add an Ajax support into your web applications in a very easy way. Certainly you can use JavaScript to execute all the jQuery functions, but if you use it, your programming times will reduce and your effectiveness will increase, and that’s the real magic of jQuery. On this roundup we will show you the most captivating and creative jQuery tools and effects to inspire you, from animations to slideshows, you will find plenty of effects on this article, hope you enjoy it. Transition effects Special Presentation: jQuery SliderShock 1. A standard transition effect that always works well when implemented on your designs. 3. 5. 6. 8. 9.

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. Avec la librairie jQuery c'est la même chose, donc on a juste a rajouter l’événement Click() qui lancera la fonction au moment du clic sur les liens ayant un attribut href commençant par # Récupérer l'id de l'élément L'offset Top

jQuery : l’événement ! Enfin « les », événements. Je voulais un titre sensationnel. Vous connaissez certainement jQuery, l’excellente bibliothèque Javascript. Non ? Alors c’est ici. Le développement DOM/Javascript repose en grande partie sur les événements. jQuery propose deux manières de définir les événements : nous allons les analyser. Les « Event Helpers » Joli nom. Il s’agit d’une série de méthodes, reprenant le nom des événements DOM. Si aucun paramètre n’est passé, cette méthode déclenche l’événement. Si une fonction est passée en paramètre, elle s’exécutera lorsque l’événement sera déclenché (depuis le code comme vu juste au-dessus, ou « naturellement »). Vous trouverez la liste complète de ces méthodes sur la page de documentation des événements : Définir un événement Commençons par un exemple. L’événement onclick peut être défini sur un objet jQuery à l’aide de la méthode click() à laquelle est passée une fonction : La fonction passée en paramètre peut attendre un paramètre.

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. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. 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). En pratique

mishoo/UglifyJS 10 of the Best jQuery Mobile Device Plugins The mobile web grows in importance every year. Mobile access currently accounts for one in five web visits — by the end of 2014 it will exceed one in four, so it’s never been more important to make sure your site or web app play nicely on the mobile web. Here are some excellent jQuery plugins that will help. 1. iosscripts A pair of touch-enabled, responsive jQuery content slider plugins – they come in both horizontal and vertical flavors. 2. Enables swiping and reordering lists of elements on touch screens, with no fuss. 3. jQuery Finger This plugin unifies click and touch events by removing the 300ms delay on touch devices. 4. A super lightweight script (1kb) to detect via Javascript events like ‘tap’ ‘dbltap’ ‘swipeup’ ‘swipedown’ ‘swipeleft’ ‘swiperight’ on any kind of device. 5. rFrame A responsive frame emulator to aid with mobile development. 6. This is a concept aimed at enabling the user to fill out a form as quickly and easily as possible on a mobile device. Source 7. 8. jQuery Navobile

An Introduction To DOM Events Useful JavaScript Libraries and jQuery Plugins For Web Developers Advertisement If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging. A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. In this two-part overview, we feature some of the most useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. Due to the length of this post, we’ve split it into two parts for your convenience: Quick Overview: Below you’ll find a brief overview and links to the libraries and tools featured in this post. Web Forms and Input Validation Select2 jQuery PluginA jQuery-plugin for replacement and enhancement of <select>-boxes.

Unheap - A tidy repository of jQuery plugins

Related: