Js défilement fluide jusqu'à l'ancre. Scrollissimo – plugin pour une animation de défilement fluide

Récemment, les animations jouées lorsque vous faites défiler la page sont devenues de plus en plus populaires. Cependant, j'ai remarqué que la grande majorité des navigateurs ne sont pas conçus pour de telles animations. Le défilement des pages avec la souris ne se fait pas en douceur (comme dans Firefox), mais par étapes. En conséquence, les animations de défilement sur les pages sont également lues de manière saccadée. À mon avis, le problème ici ne vient pas du tout des navigateurs, mais des plugins utilisés pour créer ces animations. Parce que ce sont eux qui permettent des sauts brusques. Je pense que pour toute animation, il devrait y avoir une vitesse de lecture maximale à laquelle l'animation sera fluide et l'utilisateur pourra comprendre ce qui s'est passé sur la page. Si vous êtes d'accord avec moi, déplacez-vous en douceur et sans saccades sous le chat.

Dans cet article, nous parlerons d'un plugin permettant de créer des animations contrôlées par défilement, que j'ai appelé Scrollissimo. Son analogue le plus proche est le plugin ScrollMagic. Ce qu'ils ont en commun, c'est leur objectif et le fait que Greensock ait été choisi comme moteur d'animation. Si, pour une raison quelconque, vous ne le connaissez pas encore, alors peut-être que pour bien comprendre tout ce qui se passe, vous devriez lire les articles sur Greensock qui ont déjà été publiés sur Habré. Par exemple .

En plus des similitudes, ces plugins présentent également des différences. Mais je voudrais surtout souligner l’essentiel : une animation fluide. Pour que cela ne paraisse pas infondé, en voici la preuve. La page d'accueil de ScrollMagic confirme également mes propos.

Comment l'utiliser ? Se connecter Pour commencer à utiliser Scrollissimo, vous devez faire deux choses. Tout d’abord, connectez Greensock. Vous pouvez connecter uniquement les bibliothèques minimales requises (TweenLite, TimelineLite et CSS) :

ou connectez une bibliothèque contenant tout ce qui précède :

Et deuxièmement, nous connectons Scrollissimo lui-même. La bibliothèque est disponible dans le référentiel. Et pour les utilisateurs de bower il est également possible d'installer avec la commande

Bower installe scrollissimo
Téléchargé, connectez-vous maintenant :

Vous pouvez éventuellement (mais pas nécessairement) inclure jQuery pour votre propre commodité. Plus loin dans l'article, j'écrirai du code en l'utilisant pour une plus grande lisibilité.

J'ai prévu la possibilité de déclencher Scrollissimo non seulement sur le défilement de la page entière, mais aussi sur tout autre événement, mais dans la grande majorité des situations il faut s'abonner à l'événement défilement de page :

$(window).scroll(function())( Scrollissimo.knock(); ));
Désormais, chaque fois qu'un événement de défilement se produit, Scrollissimo calculera la progression actuelle de l'animation et la jouera.

REMARQUE : Si vous ne souhaitez pas que le plugin compte lui-même le défilement de la page, vous pouvez transmettre la valeur de votre propriété scrollTop à la méthode knock(). Ainsi, par exemple, Scrollissimo.knock(1000) indiquera au plugin que vous avez fait défiler. la page 1000 pixels .

REMARQUE : Pour prendre en charge les appareils tactiles, il existe un adaptateur tactile scrollissimo.touch.js, qui combat le gel des pages lors du défilement.

Ça y est, vous pouvez désormais animer directement ! Scrollissimo peut animer des jumeaux (animations uniques) et des chronologies (file d'attente d'animations uniques). Commençons par les jumeaux.

L'animation la plus simple Disons que nous avons un beau div rouge appelé Divy. Il veut vraiment grandir, mais jusqu'à présent, il ne mesure que 50 pixels de large et de haut.

#Divy( position : fixe ; haut : 0 ; gauche : 0 ; hauteur : 50px ; largeur : 50px ; arrière-plan : rouge ; )
Faisons en sorte qu'après 1000 pixels à partir du début de la page, la largeur de la page devienne 300 pixels. Pour ce faire, nous allons d'abord créer l'interpolation correspondante, comme si nous faisions une animation classique à l'aide de Greensock :

Var divyTween = new TweenLite($("#Divy"), 1000, ( width: 300 ));
REMARQUE : Comme vous l'avez remarqué, la seule différence par rapport à l'animation Greensock standard est que nous spécifions la durée de l'animation non pas en secondes, mais en pixels (dans notre cas, 1000).

Super! Il ne reste plus qu'à donner ce jumeau à dévorer par Scrollissimo :

Scrollissimo.add(divyTween, 0, 6);
Maintenant, ralentissons et regardons cette ligne. Le premier argument est le même que celui que nous avons créé. Le deuxième argument est à partir de quelle position démarrer l’animation. Dans notre cas, il s'agit du début de la page (0 pixel). Le troisième argument demeure. Nous arrivons ici à la principale caractéristique qui distingue Scrollissimo des plugins ordinaires. Le troisième argument est la vitesse maximale de lecture de l'animation. Cette vitesse est mesurée en unités abstraites sans dimension et sélectionnée « à l’œil nu ». Je répondrai immédiatement à la question « Que se passe-t-il si vous ne spécifiez pas le troisième paramètre ? Si vous ne précisez pas la vitesse maximale, elle n'existera pas. Cette animation sera jouée de la même manière que par des plugins classiques.

Chronologies Ainsi, Divy a grandi en largeur. Comment pouvons-nous l’aider à grandir en hauteur ? Des chaînes d’animations ou, en termes de Greensock, des chronologies nous aideront ici. Si vous les avez déjà utilisés pour créer des animations, cela n’a rien de nouveau pour vous. De la même manière que nous l'avons fait avec le jumeau ci-dessus, nous le faisons avec la chronologie. jsFiddle

Var divyTimeline = new TimelineLite(); divyTimeline.to($("#Divy"),1000 ( largeur : 300 )); divyTimeline.to($("#Divy"), 1000, ( hauteur : 300 )); Scrollissimo.add(divyTimeline, 0, 6);

Conclusion C'est tout ce dont vous avez besoin pour réussir à créer des animations de défilement à l'aide de Scrollissimo. C’est là que je terminerai probablement l’article. En conclusion, je dirai que le plugin est en développement actif, il a de la place pour grandir et s'améliorer. Par conséquent, je serai heureux de recevoir des questions, des conseils et des demandes de fonctionnalités.

Mise en page, animation !

Bonjour, chers amis !

Aujourd'hui, nous voulons vous parler du défilement fluide d'une page de destination jusqu'à l'élément souhaité.

Le défilement fluide (ou défilement fluide) permet au visiteur de la landing page de se déplacer entre les sections sans perdre le contact visuel avec le contenu de l'offre.

Vous pouvez voir un exemple de. Sur cette page, un défilement fluide se déclenche lorsque vous cliquez sur le bouton « Livraison de la commande ».

Je voudrais également attirer votre attention sur le fait que l'utilisation du défilement fluide est également pertinente en combinaison avec un menu statique. Auparavant, nous avons publié un guide pour en créer un, qui simplifie également grandement la navigation sur les pages de destination contenant une grande quantité d'informations et permet d'augmenter la conversion.

Nous vous suggérons donc d'utiliser un guide illustré détaillé pour créer un défilement fluide pour un élément :

1) Ouvrez la page de destination dans l'éditeur visuel LPgenerator

2) Copiez le code :

jq_144("#block-newID a").click(function(e)( // remplacer #block-newID par l'ID de l'élément sur lequel on clique e.preventDefault(); jq_144("body, html"). animate(( scrollTop: jq_144("#block-newID").offset().top ), 1000 ); // remplace #block-newID par l'ID de l'élément en cours de défilement ));

3) A l'aide de l'outil « Scripts », collez le code copié sur la page

Définissez la position du code : « Avant la balise » :

4) Écrivez dans le code l'identifiant du bouton, lorsque vous cliquez dessus, il défilera. L'identifiant est écrit entre guillemets simples.

5) Vous pouvez visualiser l'identifiant de l'élément dans ses propriétés étendues à droite :

6) Attention: si l'élément qui déclenche le défilement lors d'un clic n'est pas un bouton, alors supprimez la lettre « a » dans le code :

Attention : après le défilement, l'élément aura un remplissage nul à partir de la bordure supérieure de la fenêtre, c'est-à-dire qu'il sera tout en haut de la page.

Ainsi, si vous souhaitez déplacer un visiteur vers un formulaire lead, nous vous recommandons de préciser dans le code l'identifiant de son entête ou de son élément qui se situe au dessus du premier champ du formulaire, par exemple une flèche :

Attention : le défilement fluide ne fonctionne pas pour les sections. Par conséquent, ne spécifiez pas les identifiants de section dans le code.

8) Par défaut, le temps de défilement vers l'élément spécifié est de 1000 ms = 1 seconde. Vous pouvez ralentir le défilement (par exemple 5000 ms = 5 sec).

Entrez l'heure souhaitée dans le code :

9) Vérifiez la position du script, n'oubliez pas de donner un nom au script. Après cela, enregistrez vos modifications et enregistrez la page de destination dans l'éditeur visuel.

Bonjour les amis. Je voudrais aborder un sujet tel qu'une transition en douceur vers un lien d'ancrage sur une page de site Web. Si vous écrivez des textes volumineux sur votre site Web, formatez-le correctement, utilisez des captures d'écran et d'autres éléments, puis un défilement fluide jusqu'à l'ancre rendra le design encore plus attrayant. Mais découvrons d’abord ce que c’est et comment cela fonctionnera. Vous pouvez voir un exemple de travail sur cette page en cliquant sur les éléments de cette liste.

Qu'est-ce qu'un lien d'ancrageComment créer un lien d'ancrage HTML

Les liens d'ancrage sont créés dans un langage de balisage hypertexte. Créer une ancre en HTML n'est pas du tout délicat. Tout ce dont vous avez besoin est un peu de connaissance de ce langage et une compréhension de son fonctionnement. Si cela ne vous pose aucun problème, vous pouvez le faire sans trop de difficultés. Ainsi, pour créer une ancre sur une page HTML, vous devez écrire quelque chose comme ce qui suit dans le code.

Et pour vous rendre à cet endroit de la page où est indiquée cette étiquette, vous devez écrire ceci dans le lien :

Accéder à une étiquette sur une page

Accéder à une étiquette sur une page

Avec cette approche, la transition s'effectuera par un saut instantané d'un endroit à un autre

Défilement fluide jusqu'à l'ancrage

Avec le développement des technologies Web, il est devenu possible de créer des sites Web plus beaux, plus dynamiques, avec divers effets, etc. Et c’est vraiment génial quand on peut intéresser un visiteur à autre chose que le contenu et laisser une bonne impression de visite sur le site. Dans une certaine mesure, cela fait le jeu du propriétaire du site. Pour une transition en douceur vers l'ancre, nous utiliserons la bibliothèque et connecterons un très petit script.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< script type= "text/javascript" >$(document) .ready (function () ( $("a" ) .click (function () ( elementClick = $(this ) .attr ( "href" ) ; destination = $(elementClick) .offset () .top ; if ($.browser .safari ) ( $("body" ) .animate ( ( scrollTop: destination ) , 1100 ) ; ) else ( $( "html" ) .animate ( ( scrollTop: destination ) , 1100 ) ; ) renvoie faux ; ) ;

$(document).ready(function() ( $("a").click(function () ( elementClick = $(this).attr("href"); destination = $(elementClick).offset().top ; if($.browser.safari)( $("body").animate(( scrollTop: destination ), 1100); )else( $("html").animate(( scrollTop: destination ), 1100); ) renvoie faux ; ));

Il existe trois façons de connecter ce script. La première consiste à l'insérer dans la page entre les balises head. La seconde consiste à le mettre dans un fichier séparé et à le connecter séparément comme ceci :

Étiquette sur la page pour y accéder

Deuxièmement, si vous souhaitez que le défilement fluide ne se produise pas pour toutes les ancres, mais uniquement pour certaines d'entre elles, vous devez modifier la troisième ligne du script comme ceci :

Accéder à une étiquette sur une page

Une autre nuance que je voudrais mentionner est que, contrairement à une simple ancre HTML, une ancre jQuery n'écrit pas de lien vers l'ancre dans la barre d'adresse du navigateur lors de la navigation vers celle-ci. Pour que vous compreniez de quoi je parle, je vais vous donner un exemple de ce à quoi pourrait ressembler un lien vers une ancre dans la barre d’adresse d’un navigateur.

#ancre

Bon après-midi. Aujourd'hui, je veux vous parler d'un effet aussi intéressant que le défilement fluide jusqu'à l'ancre. Par exemple, il peut s'agir d'un menu en haut de la page qui, lorsque vous cliquez dessus, défilera en douceur jusqu'à l'élément correspondant.

Vous avez probablement constaté un effet similaire sur d’autres pages de destination. Aujourd'hui, vous apprendrez comment le mettre en œuvre.

Défilement fluide vers l'ancre à l'aide de javascript

Dans l'un des projets, la tâche consistait à implémenter un effet similaire avec un défilement fluide vers un certain élément en cliquant sur l'un des éléments de menu.

Commençons par connecter la bibliothèque jquery à notre projet et spécifier le chemin d'accès au script responsable du défilement fluide :

Nous avons réglé ce problème. Vous devez maintenant mettre des étiquettes et des ancres sur lesquelles le défilement se produira.

Je vais vous donner l'exemple du menu qui figurait dans le projet de location de matériel professionnel pour les travaux de construction et de nettoyage. Voici son code source :

• Matériel de nettoyage
• Matériel de chantier
• Action

Comme vous pouvez le constater, tout est standard et sans astuce. Des blocs correspondant au menu ont ensuite été créés sur la landing page. Ils ont révélé un service spécifique. Il était nécessaire d'effectuer une transition en douceur vers ces blocs.

Afin de naviguer jusqu'à l'endroit souhaité sur le site, il suffit d'ajouter un lien vers l'identifiant du bloc souhaité. Faisons ça.

• Matériel de nettoyage
• Matériel de chantier
• Action

Vous devez maintenant définir les identifiants « nettoyage », « bâtiment », « actions » sur les blocs correspondants. Pour moi, cela ressemblait à ceci :

Faites attention à l'attribut name="cleaning". Il doit correspondre à l'ID. Voici le script lui-même :

$(function () ( $("a.scrollto").click(function () ( let elementClick = $(this).attr("href") let destination = $(elementClick).offset().top; $ ("html:not(:animated),body:not(:animated)").animate(( scrollTop: destination), 1100 ));

Si vous avez, comme moi, besoin d'implémenter le défilement vers plusieurs éléments, alors mettez simplement les identifiants de la même manière et c'est tout ! Une méthode très pratique et facile à mettre en œuvre. Je ne dis pas que c’est la meilleure, mais ça marche. Si quelqu’un pouvait le simplifier, le raccourcir ou l’améliorer d’une manière ou d’une autre, je vous en serais très reconnaissant. Quant à moi, cet effet peut être utile à beaucoup.

Veuillez noter qu'au début de l'article nous avons indiqué le nom et le chemin du script comme suit :

Autrement dit, vous devez créer un dossier à la racine de votre site appelé js et y placer un fichier appelé perehod.js. Et puis insérez-y le code du script lui-même. C'est moi, juste au cas où. Et si quelqu'un ne comprend pas ?

Et c'est tout pour aujourd'hui. Vous savez maintenant comment implémenter un effet aussi intéressant qu'un défilement fluide des pages jusqu'à l'ancre. Au revoir tout le monde !

P.s. : Merci à ceux qui ont répondu à l'appel sur les réseaux sociaux pour nous aider avec des idées de nouveaux articles. Je ne sais pas pourquoi vous avez décidé d'écrire en messages privés, il vaut mieux le laisser dans les commentaires, il sera donc plus facile pour d'autres personnes d'écrire un avis s'ils voient que quelqu'un de plus courageux l'a déjà fait.

Cette méthode présente un inconvénient : elle ne fonctionne pas bien avec wow.js, que nous avons utilisé pour créer l'animation dans l'article. Certaines animations ne sont pas lues et il y a un espace vide à leur place. Si quelqu'un sait comment résoudre ce problème, écrivez-le dans les commentaires ou dans

Salutations, chers amis. Comme vous l'avez peut-être remarqué, dans presque tous les navigateurs, le défilement sur les sites Web est très net et peu esthétique. Et bien sûr, j'aimerais rendre le défilement de mon site plus fluide ; bien sûr, cela peut se faire et, en plus, sans trop forcer. Cela se fait à l'aide d'un simple plugin jQuery et de quelques règles CSS. Et afin de voir comment tout cela fonctionne, je vous propose de jeter un œil à la démo ci-dessous.

Ι

Eh bien, passons maintenant à l'ajout d'un défilement fluide à notre site.

HTML

Tout d’abord, nous devrons attacher la bibliothèque JQuery. Si vous l'avez déjà joint, ignorez cette étape :

Ensuite, nous devons attacher le plugin JQuery lui-même, qui est responsable de notre défilement fluide, et avec lui, il existe des règles CSS distinctes qui modifient la barre de défilement elle-même sur le site. Nous parlerons davantage de la barre de défilement dans la prochaine leçon, mais pour l'instant uniquement du défilement fluide. Et voici les règles et le plugin :

Tous. Nous avons désormais franchi la première et importante étape. Nous devons maintenant ajouter une règle simple aux styles CSS de notre site.

CSS html, corps (hauteur : 100 % ; )

Ceci est nécessaire pour faire savoir à notre plugin que la largeur de la page est étirée et correspond à 100 % de la hauteur. Assurez-vous d'ajouter cette règle à votre CSS, sinon le défilement ne fonctionnera pas.

Scénario

Et maintenant, je propose d'examiner de plus près l'exemple de démonstration. Et nous commencerons par HTML.

HTML en démo Défilement fluide pour le site Contenu Bonjour, Ceci est un texte pour démontrer le défilement fluide des pages de votre site. Ça n'a vraiment pas l'air mal, n'est-ce pas :) Ce texte sera répété.

(function($)( $(window).load(function())( $("body").mCustomScrollbar(( theme:"dark-thin" )); )); ))(jQuery);

Comme vous pouvez le voir, j'ai utilisé ici un balisage HTML5 entièrement standard, avec tous les scripts et fichiers CSS insérés dont nous avons parlé ci-dessus. Je pense qu'il n'y a rien à expliquer ici ; si quelque chose n'est pas clair pour vous, assurez-vous de le demander dans les commentaires.

CSS de la démo @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic) ; @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic) ; corps (couleur d'arrière-plan : #fff ; couleur : #555 ; taille de police : 14 px ; famille de polices : "Mauvais script", cursive ; marge : 0 ; remplissage : 0 ; largeur minimale : 480 px ; ) html, corps ( hauteur : 100 % ; ) h2 (taille de la police : 80 px ; alignement du texte : centre ; famille de polices : "Lobster", cursive ; poids de la police : 700 ; style de police : italique ; couleur : #444 ; ) hr( hauteur : 0 ; bordure inférieure : 1 px solide #eee ; marge inférieure : 50 px ; : 15px ; rembourrage-bas : 20px)

Les règles CSS sont également très simples et elles ne sont pas nombreuses, et vous pouvez également voir que les polices Google sont jointes ici pour rendre la démo visuellement belle.