Jump to content

[MODULE GRATUIT] Défilement fumée en fond de page

jeckyl
 Share

Recommended Posts

jeckyl Newbie

jeckyl

Posted
Posted

Bonjour,

Suite à un topic sur le forum (http://www.prestasho...de-fumee-merci/), voici un module qui va vous permettre de faire défiler un effet de fumée en haut de votre site en fond de page.
 

Télécharger directement
le module bgSmoke

Testé sur :

  • Prestashop 1.2
  • Prestashop 1.3
  • Prestashop 1.4
  • Prestashop 1.5

Démonstration visible sur http://free.prestashop.addons.mediacom87.com

Merci de préciser votre version de Prestashop sur laquelle vous utilisez le module et nous indiquer aussi votre url de site pour que nous puissions visualiser le module en action.

  • Like 2
Link to comment
Share on other sites
Soyons Solidaire Apprentice

Soyons Solidaire

Posted
Posted (edited)

Bonjour,

 

Un grand merci jeckyl de m'avoir rendu service, je suis très touché par votre geste et la qualité de ce module qui fonctionne impeccablement, comme je le voulais. Pour le moment essais sur le local version 1.5.4.1 je vais bientôt le transférer sur mon serveur. Merci encore

 

Amitiés

Edited by SMOK KYF (see edit history)
Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Bonjour,

 

Oui et non (une vrai réponse de Normand que je ne suis pas).

 

Oui car au premier chargement il faut que le client télécharge les belles images de volutes de fumée, mais cela ne se fait qu'au premier chargement (après c'est dans le cache) mais en plus cela ne se fait qu'à la fin du chargement du de la page.

Link to comment
Share on other sites
Fehmi135 Newbie

Fehmi135

Posted
Posted

Bonjour,

 

Oui et non (une vrai réponse de Normand que je ne suis pas).

 

Oui car au premier chargement il faut que le client télécharge les belles images de volutes de fumée, mais cela ne se fait qu'au premier chargement (après c'est dans le cache) mais en plus cela ne se fait qu'à la fin du chargement du de la page.

 

Merci, clair et rapide !

Link to comment
Share on other sites
Soyons Solidaire Apprentice

Soyons Solidaire

Posted
Posted (edited)

Bonjour

 

Encore moi :) Jeckyl je viens de remarquer en augmentant la valeur z-index à 11 ou plus cela rend la barre de menu inactive, panier... , comme si les liens étaient morts. Aurait t-il une solution ??

Le lien de mon site http://smokshop.fr/index.php j'aimerai avoir votre avis ?? "Attention" Site en cours de création. Merci

 

Amitiés

Edited by SMOK KYF (see edit history)
Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Bonjour,

 

pour cela il faudrait un champion du css car là c'est juste que les images de fumées passe devant le reste et même si elles sont transparente cela reste des image et donc cache ce qu'il y a dessous.

Link to comment
Share on other sites
mams13 Newbie

mams13

Posted
Posted

Vous pouvez changer la profondeur de défilement en modifiant le z-index des éléments mais sachez que si les fumées passe dessus le lien sir le logi ne sera plus actif.

 

Super ça marche impeccablement, c'est parfait. merci jeckyl :)

Link to comment
Share on other sites
  • 1 month later...
papich Apprentice

papich

Posted
Posted

Merci pour ce module il serait bien de charger sa propre image pour avoir plusieurs style de fumée ou pour noël mettre des flacons de neige, pour les soldes des pourcentages, pour l'anniversaire de la boutique des cadeaux....

 

Peut etre régler le défilement si on part en horizontal ou verticale...Un peu comme une boite à outils

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Merci pour ce module il serait bien de charger sa propre image pour avoir plusieurs style de fumée ou pour noël mettre des flacons de neige, pour les soldes des pourcentages, pour l'anniversaire de la boutique des cadeaux....

 

Peut etre régler le défilement si on part en horizontal ou verticale...Un peu comme une boite à outils

 

pourquoi pas dans une version payante.

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
Fehmi135 Newbie

Fehmi135

Posted
Posted (edited)

Bonjour,

 

Mise en place d'un site de démonstration de certains modules gratuits.

 

http://free.prestash....mediacom87.com

Merci Jeckyl, comment retrouver ces modules ? le "Translate This button" m'interesse.

 

EDIT : Trouvé : http://www.prestatoolbox.fr/modules-gratuits/242-traduisez-simplement-votre-boutique-en-52-langues.html

Edited by Fehmi135 (see edit history)
Link to comment
Share on other sites
  • 3 months later...
  • 1 month later...
Pierre Webwalker Newbie

Pierre Webwalker

Posted
Posted

Bonjour à tous

 

Tout d'abord merci pour ce module
J'ai modifié le visuel des images ainsi que le css que voici :

#fumee1, #fumee2 {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 0; display: inline }
#fumee1 {background:url("../img/bgsmoke1.png") 0 0 repeat-x; background-attachment:fixed; background-size: cover }
#fumee2 {background: url("../img/bgsmoke2.png") 0 0 repeat-x; background-attachment:fixed; background-size: cover }

L'image bgsmoke1.png fait 2600x776, et bgsmoke2.png 1800x684

 

Mon problème, c'est que l'attachment fonctionne bien mais quand on scroll les pages un peu longue, il apparait par le bas de l'écran un fond noir qui vient recouvrir mes images de background.

C'est à voir ici

 

J'ai essayé de mettre un display: inline à la place de block, j'ai essayé de un background-size: cover, sans succès :-(
Je m'arrache les cheveux à essayer de trouver d’où cela peut venir...

Je ne suis pas un expert en css, il y a encore pas mal de choses qui m’échappent

 

Merci infiniment pour vos conseils de professionnels

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted

Bonjour,

 

voici ce que j'ai mis pour arriver au même résultat mais sans le soucis de bande de couleur.

#fumee1, #fumee2 {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 0;display: none}
#fumee1 {background:url("../img/bgsmoke1.png") 0 0 repeat-x fixed;-webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */}
#fumee2 {background: url("../img/bgsmoke2.png") 0 0 repeat-x fixed;-webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */}
Link to comment
Share on other sites
Pierre Webwalker Newbie

Pierre Webwalker

Posted
Posted

Bonjour et merci Mediacom87

 

J'ai remplacé le code par le votre mais sur ma page d'exemple toujours ici

sur FF le fond noir apparait quand même au niveau du titre n° 4. Bencoleen Hotel WAV.

Sur IE, ca fonctionne bien mais cela laisse en grand vide en bas de la page...

Ce qui m'étonne c'est que avec Firebug, je constate que les valeurs sont display: inline; height: 250%;

Ca a fonctionné pour vous ?

Link to comment
Share on other sites
  • 3 months later...
osmovap Newbie

osmovap

Posted
Posted

Bonsoir à tous, je vous remercie pour ce module que j'utilise sur mon site depuis presque un an.

Je vais certainement passer sur la 1.6 de prestashop dans un moment.

Est t'il possible d'avoir une mise a jour pour le rendre compatible 1.6?

 

D'avance merci bonne soirée

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted

Bonjour,

 

ce module est fonctionnel sur la 1.6 mais rencontre des soucis avec le design par défaut de cette version car la fumée reste en dessous du reste ou passe au dessus en bloquant la navigation du fait de l'utilisation de z-index disparates sur les css des éléments du design de base de Prestashop.

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted

sur le thème de base le header est de couleur blanche, en rajoutant 

#header {background: transparent;}

dans le fichier css/med_bgsmoke.css ça devrait être bon, ensuite ça dépend de chaque thème...

Merci coeos.pro, cela fonctionne bien mais le risque de mettre cette balise dans le css du module est de dénaturer des design.

Donc je le passe en compatible 1.6 afin de permettre aux utilisateur de le charger sans crainte et d'adapter leurs css par la suite.

Link to comment
Share on other sites
osmovap Newbie

osmovap

Posted
Posted (edited)

Bonsoir je viens de faire le test sur la 1.6, je ne pensez pas qu'il fonctionnais mais je viens de voir qu'il est localiser au centre de la page et qu'il passer derriere les slider du thème de base.

Il faudrais que je trouve le moyens de le regler sur le haut de page.

 

Je ne connais pas le codage si vous avez une solution je suis preneur.

 

Je également de remarquer qu'il fonctionne une foi sur deux, j'ai tenter de lancer le live edit dans les positions modules, je le vois apparaittre mais lorsque je ferme la page du live edit et que j'ouvre la page du site il ne s'affiche plus.

 

Je vous remercie

 

Bonne soirée

Edited by osmovap (see edit history)
Link to comment
Share on other sites
osmovap Newbie

osmovap

Posted
Posted

Bonsoir je viens de faire le test sur la 1.6, je ne pensez pas qu'il fonctionnais mais je viens de voir qu'il est localiser au centre de la page et qu'il passer derriere les slider du thème de base.

Il faudrais que je trouve le moyens de le regler sur le haut de page.

 

Je ne connais pas le codage si vous avez une solution je suis preneur.

 

Je également de remarquer qu'il fonctionne une foi sur deux, j'ai tenter de lancer le live edit dans les positions modules, je le vois apparaittre mais lorsque je ferme la page du live edit et que j'ouvre la page du site il ne s'affiche plus.

 

Je vous remercie

 

Bonne soirée

Aprés plusieurs rafraichissement il a l'air de s'afficher, je ne comprend plus trop lol

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...