PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 29/03/2013 10:48:00

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

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

Dernière modification par Jos (03/12/2014 12:05:50)

Hors ligne

#2 29/03/2013 11:10:17

jack31
Membre
Lieu : Luchon
Inscription : 03/04/2012
Messages : 461
Site Web

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

Trop cool ! Merci  cool


--
Tout va bien !
Des Pluxml tant qu'on en veut avec Pluxautomatic.
Pluxml pour Les Nuls :   Un petit tuto pour mes besoins personnels et ceux des débutants qui voudraient avoir une autre approche de notre CMS favori.

Hors ligne

#3 29/03/2013 11:32:35

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

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

Hors ligne

#4 29/03/2013 11:37:12

jack31
Membre
Lieu : Luchon
Inscription : 03/04/2012
Messages : 461
Site Web

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

Off course !

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


--
Tout va bien !
Des Pluxml tant qu'on en veut avec Pluxautomatic.
Pluxml pour Les Nuls :   Un petit tuto pour mes besoins personnels et ceux des débutants qui voudraient avoir une autre approche de notre CMS favori.

Hors ligne

#5 29/03/2013 12:49:34

bg62
Membre
Inscription : 18/05/2007
Messages : 1 782
Site Web

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

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 ....
@+


le 'www' est fait pour communiquer et échanger, non ?
fonds d'écran   | référencement efficace | Portfolio | Fonds d'écran automobile | outils SEO | échange de liens en dur

Hors ligne

#6 29/03/2013 12:57:13

jack31
Membre
Lieu : Luchon
Inscription : 03/04/2012
Messages : 461
Site Web

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

Explication et démonstration ici Bg62


http://tuto-pluxml.reseauk.info/article … ical-anime


--
Tout va bien !
Des Pluxml tant qu'on en veut avec Pluxautomatic.
Pluxml pour Les Nuls :   Un petit tuto pour mes besoins personnels et ceux des débutants qui voudraient avoir une autre approche de notre CMS favori.

Hors ligne

#7 29/03/2013 13:59:52

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 278

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

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 ...  devil


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#8 29/03/2013 16:09:55

jack31
Membre
Lieu : Luchon
Inscription : 03/04/2012
Messages : 461
Site Web

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

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


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. wink


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é.  lol


--
Tout va bien !
Des Pluxml tant qu'on en veut avec Pluxautomatic.
Pluxml pour Les Nuls :   Un petit tuto pour mes besoins personnels et ceux des débutants qui voudraient avoir une autre approche de notre CMS favori.

Hors ligne

#9 29/03/2013 19:50:22

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 278

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

1/ gabarix s'affiche assez rapidement car il n'y a rien. Ce n'est pas le propre de Gabarix, mais de PluXml  devil
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


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#10 29/03/2013 20:09:56

jack31
Membre
Lieu : Luchon
Inscription : 03/04/2012
Messages : 461
Site Web

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

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. wink


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.  tongue


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 ! wink


--
Tout va bien !
Des Pluxml tant qu'on en veut avec Pluxautomatic.
Pluxml pour Les Nuls :   Un petit tuto pour mes besoins personnels et ceux des débutants qui voudraient avoir une autre approche de notre CMS favori.

Hors ligne

#11 29/03/2013 21:12:14

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 278

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

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


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

Dernière modification par danielsan (29/03/2013 21:12:31)


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#12 29/03/2013 21:26:33

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

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  wink, il est pas obèse quand même... Je suis sensible au poids aussi car ma connexion n'est pas top chez moi wink


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 wink.


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.

Dernière modification par Jos (29/03/2013 21:44:55)

Hors ligne

#13 29/03/2013 21:47:27

jack31
Membre
Lieu : Luchon
Inscription : 03/04/2012
Messages : 461
Site Web

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

Les débutants t'en remercient.  kiss


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 wink


--
Tout va bien !
Des Pluxml tant qu'on en veut avec Pluxautomatic.
Pluxml pour Les Nuls :   Un petit tuto pour mes besoins personnels et ceux des débutants qui voudraient avoir une autre approche de notre CMS favori.

Hors ligne

#14 29/03/2013 21:54:35

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

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.

Hors ligne

#15 30/03/2013 03:34:42

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 550
Site Web

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

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...


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#16 30/03/2013 08:42:21

bankai
Pluxml Forever :)
Lieu : Saint-Pierre-la-cour
Inscription : 06/02/2011
Messages : 611
Site Web

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

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 smile


Mon site web : Mon blog tout simplement avec sa version de pluXml : version dev Github
Un soucis, une angoisse, une question ? le Wiki est là pour tous ici, pour le reste, on est là pour ça :-)
Suivre PluXml sur les réseaux sociaux : Google+ Twitter

Hors ligne

#17 30/03/2013 14:32:39

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

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


@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).

Hors ligne

#18 01/04/2013 12:43:49

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

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

Hors ligne

#19 01/04/2013 13:29:05

bankai
Pluxml Forever :)
Lieu : Saint-Pierre-la-cour
Inscription : 06/02/2011
Messages : 611
Site Web

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

Bien les modifications, bon boulot Jos smile


Mon site web : Mon blog tout simplement avec sa version de pluXml : version dev Github
Un soucis, une angoisse, une question ? le Wiki est là pour tous ici, pour le reste, on est là pour ça :-)
Suivre PluXml sur les réseaux sociaux : Google+ Twitter

Hors ligne

#20 01/04/2013 17:54:31

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 278

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

cool Jos, good job


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#21 03/04/2013 12:48:26

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

Merci wink

Hors ligne

#22 18/08/2013 14:49:17

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

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.

Dernière modification par Jos (18/08/2013 14:53:24)

Hors ligne

#23 20/09/2013 15:42:09

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

Passage en version 1.2 et migration vers GitHub.

Hors ligne

#24 14/10/2014 10:28:20

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

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

Version 1.3 : petite modification du plugin.

Hors ligne

#25 15/10/2015 17:23:19

pepisan
Membre
Inscription : 14/10/2015
Messages : 1

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

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 ?

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés