Forum - Skins - Effet parallaxe skin_transparence04 (sujet initié par Rich38)

Bonjour,

Ci dessous le message passé par Richard (Rich38) via le contact de ce site le 07/01/2019

J'ai remis en forme le code inclus pour le rendre plus lisible.

Bonsoir,

Suite à la migration de mon site vers Guppy 5.02.08 j'ai eu un petit problème avec mon skin et l'équipe FreeGuppy m'a gentiment recommandé de mettre à jour mon skin qui n'est pas 100% compatible 5.0

Je commence donc mon travail de recherche et j'ai trouvé, sur ton site, le skin Transparence04 dont le concept me plait beaucoup, félicitations pour ce beau skin.

J'essaie maintenant de lui ajouter les 2 menus latéraux droits que tu as créé sur le skin de ton site. J'ai compris et suis arrivé à refaire le 2nd menu latéral (correspondant à mon menu bandeau), mais je n'arrive pas à comprendre comment tu fais les 3 boutons de navigation du 1er menu (haut, centre, bas) !

Dans le skin Transparence4, l'équivalent de ces boutons sont gérés par des images dans le Paralax du styleplus:

#paranav li:nth-child(1) a {
background: url(img/1.png)no-repeat 50% 50%;
}

Mais tu as fait différemment dans ton propre skin.

Voudrais-tu bien partager ton secret de fabrication ? ... ou pas. En te remerciant par avance

Cordialement,

Richard

Cordialement,

Ma réponse par courriel le 08/01/2019

Bonjour Richard,

Tout d'abord, merci de tes appréciations, et merci de tenter l'aventure avec une de mes skins et mes petits aménagements... (et bravo à toi pour l'utilisation du menu latéral fixe...)

Tu aurais pu éventuellement poster sur le forum du site afin que d'autres lecteurs puissent profiter de la réponse (si tu en es d'accord, je copierai ces messages sur le forum)

J'accepte bien volontiers de partager ces méthodes, c'est le but de ce site...

1) il y a 6 images de 24*24px rangées dans le dossier img de la skin : 1.png 1hover.png 2.png 2hover.png 3.png 3hover.png

2) dans styleplus.css (accessible par config Style) il y a

@media screen and (min-width: 760px), screen and (min-device-width: 760px) { /* paranav fixe en haut au delà de 760px : à ajuster...*/
#paranav { /*position*/
  top: 5px;
  right: 0px; 
}
#paranav li { /*marges extérieures*/
  margin: 0 0 10px;
}
#paranav li a { /*bouton : dimensions, bordures, arrondis, ombres*/
  width: 40px;
  height: 28px; 
  border: none;
  border-top: 1px solid rgba(255,255,255,0.5);
  border-bottom: 2px solid rgba(0,0,0,0.5);
  border-left: 2px solid rgba(0,0,0,0.3);
  border-radius:8px 0px 0px 8px;
  box-shadow:0px 3px 10px rgba(0,0,0,0.7);
}
#paranav li:nth-child(1) a {  /*lien 1 image et couleur de fond*/
  background: url(img/1.png)no-repeat 50% 50%, #9B5124;
}
#paranav li:nth-child(1) a:hover {  /*lien 1 au survol image et couleur de fond*/
  background: url(img/1hover.png)no-repeat 50% 50%, #9B5124;
}
#paranav li:nth-child(2) a {  /*lien 2 image et couleur de fond*/
  background: url(img/2.png)no-repeat 50% 50%, #C2662E;
}
#paranav li:nth-child(2) a:hover {  /*lien 2 au survol image et couleur de fond*/
  background: url(img/2hover.png)no-repeat 50% 50%, #C2662E;
}
#paranav li:nth-child(3) a {  /*lien 3 image et couleur de fond*/
  background: url(img/3.png)no-repeat 50% 50%, #DD976C;
}
#paranav li:nth-child(3) a:hover {  /*lien 3 au survol image et couleur de fond*/
  background: url(img/3hover.png)no-repeat 50% 50%, #DD976C;
} 
} /* fin disposition min-width: 760px */

NB : la règle @media screen n'est pas obligatoire, mais elle permet de s'assurer que l'ensemble n'est appliqué que pour les écrans supérieurs à la valeur de min-width.

3) Mais dans mobstyle.css, il y a, afin de "simplifier" et de ne mettre que trois imagettes horizontales :

/* Effet de parallaxe */
.slide_inside {
 width: 100%;
 max-width: 100%;
 margin: 0 auto;
 height:auto;
}
#paranav {
 top:.5em;
 right:2em;
 display:inline-flex;
}
#paranav li {
 margin:0 .5em 0;
}
#paranav li a {
  width: 24px;
  height: 24px;
  border-radius: 0px; 
  border: 0px;
}
#paranav li:nth-child(1) a { 
  background: url(img/1.png)no-repeat 50% 50%;
}
#paranav li:nth-child(2) a { 
  background: url(img/2.png)no-repeat 50% 50%;
}
#paranav li:nth-child(3) a { 
  background: url(img/3.png)no-repeat 50% 50%;
}

Si tu souhaites que je détaille ces règles, indique-le moi.

Il est probable qu'il y ait d'autres légers ajustements à effectuer, notamment si tu utilises un blog. Recontacte-moi si nécessaire.

Amuse-toi bien

Cordialement,

Jean-Denis

Et la réponse de Richard par courriel le 08/01/2019

Bonjour Jean-Denis,

Merci beaucoup pour ta réponse rapide et positive, comme toujours.

Dès que j’ai un moment, demain je pense, je me penche sur tout ça pour essayer de comprendre. Je dis bien essayer car je suis autodidacte et le html n’est pas encore un langage naturel pour moi, loin de là !!

Sinon, aucun soucis pour publier sur le site, j’aurais respecté le fait que tu ne partages pas Tout tes secrets de fabrication. ;) Cordialement,

Richard

Cordialement,