[Plugin] LocalScroll : effet de défilement animé pour vos ancres

Jos

Bonjour à tous,

Voici le plugin LocalScroll : il vous permet d'ajouter automatiquement un effet de défilement vertical animé sur toutes les ancres nommées de votre site. Ce plugin dispose d'un fichier d'aide pour vous aider à créer une ancre.

Voir sur GitHub
Télécharger LocalScroll

jack31

Trop cool ! Merci :cool:

Jos

Merci. N'hésite pas à me faire un retour pour me dire si tout va bien

jack31

Off course !

Pour le moment, tout va (très) bien.

bg62

yes !!!
mais quand tu parles " d'ancre " de quoi s'agit-t-il exactement ... ???
des ancres sur quoi, mises où, générées par un plugin, .... etc ....
@+

jack31

Explication et démonstration ici Bg62


http://tuto-pluxml.reseauk.info/article37/un-effet-de-defilement-vertical-anime

danielsan

merci pour ce plugin.

Perso, je trouve qu'il y a beaucoup trop de code pour un simple petit effet.
je préfère cependant mon approche ( cf ici )
résumée en une 10aine lignes ... ]:D

jack31

Oui, tu as raison, Danielsan, car plus on rajoute des plugins, moins mes performances naturelles de Pluxml sont au RDV. ]:D


Personnellement, je me suis intéressé à LocalScroll parce que justement je voulais obtenir la même chose et il est vrai qu'une application toute cuite est vraiment séduisante. Lol !


Néanmoins, ayant vu par ailleurs qu'on peut construire un Pluxml qui s'affiche à la vitesse de la lumière, je me questionne sur l'opportunité d'ajouter des plugins pour des implémentations qui finalement peuvent se faire bien autrement.


C’est pourquoi....

danielsan a écrit:

...je trouve qu'il y a beaucoup trop de code pour un simple petit effet.

Tu en as trop dit ou pas assez.


LocalScroll est formidable mais quelle est donc ta méthode pour nous en passer histoire de garder notre Pluxml le plus "vierge" possible ?


Ps: L'idiot du village en recherche de pureté.

danielsan

1/ gabarix s'affiche assez rapidement car il n'y a rien. Ce n'est pas le propre de Gabarix, mais de PluXml ]:D
2/ en cherchant dans le JS du site sus-cité, on trouve un truc du genre ( à modifier selon les besoins ) :

var hauteurHeader = $("#header").height();
		
	$('#header ul.art_menu li a, a.ancre, a#tampon_france').click(function() {
	var
		url = $(this).attr('href'),
		longueur = url.length,
		position = url.lastIndexOf("#"),
		id = url.substr(position,longueur);

		var marginTopCible = $(id).css('margin-top').replace("px", "");
		var cible = $(id).offset().top - hauteurHeader - marginTopCible;
		
			$('#header ul.art_menu li').removeClass('active');
			$(this).parent().addClass('active');
			$('html,body').animate({scrollTop: cible}, 800);
			return false;
	});

ce code dit en gros : "regarde les liens du menu, extrait le nom de l'ancre, trouve celle-ci, calcul la distance et déplace la fenêtre jusqu'à celle-ci"


je comprends bien le caractère universel que doit avoir certain plugin.
Il y a cependant un rapport à respecter : poids de la technique/résultante.
Dans le cas de ce plugin, on pourrait imaginer : soit on utilise jQuery s'il est déjà présent, soit on utilise seulement le bout de code qui va bien

jack31

danielsan a écrit:

Il y a cependant un rapport à respecter : poids de la technique/résultante

C'est en fait un peu à ce que je pensais.


Pour ton code, il faut malheureusement toucher au core ce qui n'est pas bien à moins de savoir ce qu'on fait et encore. Si on trafique trop, bonjour les futures mises à jour. :P


Un point donc pour le plugin même si il utilise jQuery, mais ta phrase....

Daniesan a écrit:

...soit on utilise jQuery s'il est déjà présent, soit on utilise seulement le bout de code qui va bien

...est pleine de (bon) sens mais je crois savoir que le débat est ouvert depuis quelques temps à ce propos.


Bon Dieu ! Quel boulot !

danielsan

il a suffit que Stéphane me tape une seule fois sur les doigts pour que je ne touche plus au core ]:D


Est-est ce que ce code fonctionne avec scrolltotop ? peut-on faire un plugin qui assemble les 2 effets ?

Jos

Grosso modo, si quelqu'un trouve un bout de js plus léger pouvant s'appliquer à toutes les ancres automatiquement, en plus léger, je suis preneur. Bon, mis à part le jQuery, le script fait 6 ko, c'est pas énorme non plus , il est pas obèse quand même... Je suis sensible au poids aussi car ma connexion n'est pas top chez moi


J'ai trouvé des solutions plus légères, mais pour les débutants, il fallait qu'ils rajoutent des class, donc j'ai préféré faire plus simple pour eux, en étant un peu plus plus lourd. Pour ce plugin, je voulais simplement que : tu active le plugin, et çà marche, rien à toucher .


Pour scrolltotop, j'ai pas testé, mais je pense que çà doit fonctionner.


La prochaine évolution de mes plugins n'intègreront pas jQuery : il faudra utiliser le plugin officiel, mais n'ayant pas encore trouvé de solution pour faire une alerte dans l'admin, je l'ai intégré en attendant. En minifiant un poil le code, çà roulera nickel.

jack31

Les débutants t'en remercient. {)

Jos a écrit:

Pour ce plugin, je voulais simplement que : tu active le plugin, et çà marche, rien à toucher

Vu comme ça, il n'y a même pas à discuter car c'est la grande force de Pluxml/plugins et "rien à toucher" (du moins dans le core) est la sécurité pour tout le monde.


Toutefois, et ce n'est pas un scoop, la multiplicité des plugins ralenti la machine et c'est très frustrant car normalement, ça fuse. Lol !


Ce qui serait intéressant, c'est que lors de l'édition d'un plugin, son dev précise dans l'aide les risques de ralentissement et les éventuelles incompatibilité avec ses frères.


Bon, je sais, faut pas rêver, mais il fallait que je le dise

Jos

Pour la multiplicité des plugins, c'est un autre sujet, çà fait partie de la conception d'un site. Je suis d'avis qu'on peu charger deux voire trois plusin à base de jQuery, mais pas plus. Sans oublier que le JavaScript doit être une chose qui améliore l'expérience utilisateur, mais qui ne doit pas être obligatoire pour le bon fonctionnement du site. Il doit pouvoir être lisible même si je JavaScript est désactivé.


Dailleur c'esst un peu pour çà que j'ai lancé ce fil ya quelques jours :
http://forum.pluxml.org/viewtopic.php?id=3902


Malheureusement, tant que je n'aurais pas trouvé de solution pour faire une alerte dans l'admin disant que si le plugin jQuery n'est pas installé, le plugin ne marchera pas, je serais obligé d'intégrer jQuery, pour que se soit plus simple pour les novices.


Heureusement, je trouve que mon plugin n'est pas très lourd, et je m'en sert sur mon site car il ne gène pas.

Jerry Wham

Pour afficher un message d'erreur si le plugin jQuery n'est pas présent (penser à appeler le hook dans la méthode __construct de ton plugin) :

/**
	 * Méthode qui affiche un message s'il y a un message à afficher
	 *
	 * @return	stdio
	 * @author	Stephane F, Cyril MAGUIRE
	 **/
	public function AdminTopBottom() {
		
			$string = '
			$myPlug = $plxAdmin->plxPlugins->aPlugins["adhesion"]["instance"];
			echo $myPlug->msg;
			if ( !isset($plxAdmin->plxPlugins->aPlugins["jquery"]) || (isset($plxAdmin->plxPlugins->aPlugins["jquery"]) && $plxAdmin->plxPlugins->aPlugins["jquery"]["activate"] == "0") ) {
				echo "<p class=\"warning\">My Plugin <br />'.$this->getLang("L_ERR_NO_JQUERY").'</p>";
				plxMsg::Display();
			}';
			echo '<?php '.$string.' ?>';
	}

Il faudra remplacer MyPlugin par le nom de ton plugin et créer un fichier fr.php dans un dossier lang pour la définition de L_ERR_NO_JQUERY.

Sinon, je ne sais pas combien de fois je l'ai dit mais, bon, je me répète, il y a toujours la possibilité de tester en javascript si la bibliothèque jquery est présente et de ne l'appeler à partir de son plugin que si elle est absente. Ça ne mange pas de pain...

bankai

Merci pour ton plugin Jos, c'est super de pouvoir gérer facilement des scroll ou l'on veut, les novices et ceux qui ne veulent pas se prendre la tête vont apprécier.
Le plugin de Jos est en version bêta les amis, il aura tout le temps de l'améliorer et de l'optimiser surtout avec les retours des plus connaisseurs sous PluXml.

Merci de vos travaux

Jos

@Jerry Wham : j'ai noté tes deux solutions, et je les testeraient. Je te remercie beaucoup, çà m'enlève une sacré épine du pied


@bankai : je te remercie. J'essaie de faire au plus simple pour les débutants. Il faut dire que c'est mon premier plugin celui là. J'ai proposé un second plugin sur un autre fil (histoire de proposer au fur et à mesure des plugins simple et sympa pour PluXml).

Jos

Je viens de passer mon plugin en version finale avec quelques améliorations (voir le premier post de ce fil).

bankai

Bien les modifications, bon boulot Jos

danielsan

cool Jos, good job

Jos

Merci

Jos

Mise à jour du plugin en version 1.1. Fonctionne avec PluXml 5.2. Le changelog est disponible sur le premier post de ce fil. Si vous rencontrez des difficultés; faîtes moi signe.

Jos

Passage en version 1.2 et migration vers GitHub.

Jos

Version 1.3 : petite modification du plugin.

pepisan

Bonjour,
comment fait-on pour implémenter un padding-top à l'arrivée du scroll pour pouvoir échapper l'ancre sous un menu en position supérieure de l'écran ?