Comment changer le logo au scroll

Réduire
X
Réduire
 
  • Page sur 1
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages
Précédent template Suivant
  • #1

    [Problème] Comment changer le logo au scroll

    Bonjour à tous,

    J'utilise Joomla 3 et le framework Helix3 et j'aimerai savoir comment je peux changer de logo dès que je commence à scroller. De base j'ai un logo fixe sur la barre de menu (qui dépasse de la barre de menu) et au scroll je voudrais minimiser le logo pour qu'il ne dépasse pas du menu.

    1) minimiser le logo
    2) avoir un petit effet sympa genre fade
    3) garder le lien de la home sur le logo

    Voici le parfait exemple que je cherche à reproduire : http://demo.joomshaper.com/?template=empire

    Je sais qu'il faudrait que j'utilise du JS ou jquery. Mais je ne sais pas comment le faire et je ne sais pas ou placer ce morceau de code.

    Merci pour votre aide
    Tags: Aucun
  • #2
    Re : Comment changer le logo au scroll

    alors deja ton code c'est quoi ?
    a mon avis il faut que tu adaptes un code existant
    par exemple
    Nick S.
    http://callmenick.com/post/animated-resizing-header-on-scroll
    Société : http://www.com3elles.com
    Bénévole : http://www.flexicontent.org

    Commentaire

    • #3
      Re : Comment changer le logo au scroll

      Bonjour Yannick et merci pour ta réponse,

      Pour l'instant je n'ai pas du tout de code et je ne sais pas où je devrais placer ce futur code.
      J'ai une piste ici : http://forum.alsacreations.com/topic...oauScroll.html

      Petite rectification je ne voudrais pas réduire le logo mais simplement le changer par un autre :
      Si il n'y a pas de scroll afficher logo 1
      Si il y a du scroll afficher logo 2 avec une transition fade (tout en conservant le lien de la home)

      Pour l'instant mon logo est simplement dans ma barre de menu :

      <div class="sp-column ">
      <a class="logo" href="/">
      <h1><img class="sp-default-logo" src="/images/monlogo.png" alt="monlogo"></h1>
      </a>
      </div>

      Commentaire

      • #4
        Re : Comment changer le logo au scroll

        je ne pense pas que cela soit un soucis de Joomla .. il va te falloire aprendre à coder du js .... a mon avis avant de te poser la question de ou je pose le code... trouve le car sinon on pourra pas t'aider
        Société : http://www.com3elles.com
        Bénévole : http://www.flexicontent.org

        Commentaire

        • #5
          Re : Comment changer le logo au scroll

          Bonjour,

          Une piste pour le template...

          http://demo.joomshaper.com/2016/empire/templates/shaper_empire/js/jquery.sticky.js


          c'est le script stickyjs en jquery d'anthony Garand : http://stickyjs.com/

          Une fois installé et paramétré, il agit sur la classe "is-stickyjs" et "sticky-wrapper" que l'on utilise dans la css notamment pour définir le logo adéquat (hidden ou visible).

          Code HTML:
          #sp-header {
  background: #ffffff;
  height: 65px;
  position: relative;
  z-index: 9;
}
#sp-header #sp-logo {
  position: relative;
}
#sp-header #sp-logo .logo h1 {
  margin: 0;
}
#sp-header #sp-logo .logo img {
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  margin: 0;
  position: absolute;
  top: 0;
}
#sp-header #sp-logo .logo .sp-scroll-logo,
#sp-header #sp-logo .logo .sp-retina-logo,
#sp-header #sp-logo .logo .sp-retinascroll-logo {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}
#sp-header #sp-logo .has-scroll-logo {
  margin: 0;
}
.sticky-wrapper.is-sticky {
  position: relative;
  z-index: 999;
}
.sticky-wrapper.is-sticky #sp-header {
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
}
.sticky-wrapper.is-sticky #sp-header #sp-logo .logo .sp-default-logo,
.sticky-wrapper.is-sticky #sp-header #sp-logo .logo .sp-retinascroll-logo {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}
.sticky-wrapper.is-sticky #sp-header #sp-logo .logo .sp-scroll-logo {
  z-index: 2;
  visibility: visible;
  opacity: 1;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-moz-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) {
  .sticky-wrapper.is-sticky #sp-header #sp-logo .logo .sp-scroll-logo,
  .sticky-wrapper.is-sticky #sp-header #sp-logo .logo .sp-default-logo,
  .sticky-wrapper.is-sticky #sp-header #sp-logo .logo .sp-retina-logo {
    z-index: 1;
    visibility: hidden;
    opacity: 0;
  }
  .sticky-wrapper.is-sticky #sp-header #sp-logo .logo .sp-retinascroll-logo {
    z-index: 2;
    visibility: visible;
    opacity: 1;
  }
  #sp-header #sp-logo .logo .sp-scroll-logo,
  #sp-header #sp-logo .logo .sp-default-logo,
  #sp-header #sp-logo .logo .sp-retinascroll-logo {
    z-index: 1;
    visibility: hidden;
    opacity: 0;
  }
  #sp-header #sp-logo .logo .sp-retina-logo {
    z-index: 2;
    visibility: visible;
    opacity: 1;
  }
}
          pour la zone logo, il est en réalité sur 4 images
          en grand en haut ou plus petit scroll, tous les deux en taille normale et x2 (image retina).

          il faudra modifier le logo du fichier
          votretemplate\features\logo.php
          pour obtenir le résultat suivant :

          Code HTML:
          <div id="sp-logo" class="col-xs-8 col-sm-3 col-md-2">
	<div class="sp-column ">
	<a class="logo" href="lienlogo">
		<h1 class="no-scroll-logo no-ratina-scroll-logo">
			<img class="sp-default-logo" src="/templates/nomdutemplate/images/presets/preset1/logo.png" alt="text alternatif">
			<img class="sp-scroll-logo" src="/templates/nomdutemplate/images/presets/preset1/logo-scroll.png" alt="text alternatif">
			<img class="sp-retina-logo" src="/templates/nomdutemplate/images/presets/preset1/logo@2x.png" alt="text alternatif" width="93" height="109">
			<img class="sp-retinascroll-logo" src="/templates/nomdutemplate/images/presets/preset1/logo-scroll@2x.png" alt="text alternatif" width="161" height="65">
		</h1>
	</a>
	</div>
</div>
          Evidemment on n'écrit pas directement dans le fichier :

          Code HTML:
          <img class="sp-default-logo" src="/templates/nomdutemplate/images/presets/preset1/logo.png" alt="text alternatif">
          mais en php avec les variables du template... :

          Code PHP:
          $html .= '<img class="sp-default-logo'. $custom_logo_class .'" src="' . $this->helix3->getTemplateUri() . '/images/presets/' . $this->helix3->Preset() . '/logo.png" alt="'. $sitename .'">'; 
          Voila pour la base de travail... à compléter
          Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

          Commentaire

          • #6
            Re : Comment changer le logo au scroll

            Merci beaucoup daneel pour ta réponse plus que détaillée et constructive ! Je devrais pouvoir y arriver
            Je regarde tout cela rapidement et je te fais un retour

            Commentaire

            • #7
              Re : Comment changer le logo au scroll

              Pour info, dans le template par défaut d'helix3, stickyjs est déjà installé :

              ligne 131 : index.php du template
              Code PHP:

                              ->addJS('bootstrap.min.js, jquery.sticky.js, main.js') // JS Files 
              on retrouve le fichier js présent dans le repertoire js du template.

              Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

              Commentaire

              • #8
                Re : Comment changer le logo au scroll

                Bon, je vais faire une petit liste explicative special helix3 rapido :

                Du fait que le fichier javascript est présent, il suffit d'ajouter la css et le chargement de l'image au scroll...
                Donc sur une base helix 3 standard :

                1. Modification CSS

                Editer le fichier theme.less

                remplacer le code entre start header et end header :

                Code HTML:
                #sp-header{
    background: #ffffff;
    height: 65px;
    position: relative;
    z-index: 9;
    #sp-logo{
        position: relative;
        .logo {
            h1{
                margin: 0;
            }
            img{
                .transition(.4s);
                margin: 0;
                position: absolute;
                top: 0;
            }
            .sp-scroll-logo,.sp-retina-logo,.sp-retinascroll-logo{
                z-index: 1;
                visibility: hidden;
                opacity: 0;
            }
        }
        .has-scroll-logo{
            margin: 0;
        }
    }

}

.sticky-wrapper.is-sticky {
    position: relative;
    z-index: 999;
    #sp-header{
        box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
        #sp-logo{
            .logo{
                .sp-default-logo,.sp-retinascroll-logo{
                    z-index: 1;
                    visibility: hidden;
                    opacity: 0;
                }
                .sp-scroll-logo{
                    z-index: 2;
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    }
}


//Retina Logo
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .sticky-wrapper.is-sticky {
        #sp-header {
            #sp-logo{
                .logo{
                    .sp-scroll-logo, .sp-default-logo, .sp-retina-logo {
                        z-index: 1;
                        visibility: hidden;
                        opacity: 0;
                    }
                    .sp-retinascroll-logo{
                        z-index: 2;
                        visibility: visible;
                        opacity: 1;
                    }
                }
            }
        }
    }
    #sp-header {
        #sp-logo{
            .logo{
                .sp-scroll-logo, .sp-default-logo, .sp-retinascroll-logo {
                    z-index: 1;
                    visibility: hidden;
                    opacity: 0;
                }
                .sp-retina-logo{
                    z-index: 2;
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    }
}

                Sauvegarder le fichier less puis dans les paramètres du template, choisissez oui au "less to css" dans mode avancé afin de compiler donc d'obtenir la css correspondante.

                2. modifier templateDetails.xml de votre template

                Ajouter scroll logo en normal et retina en remplaçant les variables logo images par :
                Code:
                <!--  logo image  -->
<field name="logo_image" class="child logotype logotype_image" type="media" preview="true" label="HELIX_LOGO_TYPE_IMAGE" description="HELIX_LOGO_TYPE_IMAGE_DESC"/>
<field name="scroll_logo" class="child logotype logotype_image" type="media" preview="true" label="LOGO_AU_SCROLL" description="LOGO_AU_SCROLL_DESC"/>
<field name="logo_image_2x" class="child logotype logotype_image" type="media" preview="true" label="HELIX_LOGO_TYPE_IMAGE_RETINA" description="HELIX_LOGO_TYPE_IMAGE_RETINA_DESC"/>
<field name="scroll_logo_2x" class="child logotype logotype_image" type="media" preview="true" label="LOGO_AU_SCROLL_RETINA" description="LOGO_AU_SCROLL_DESC_RATINA"/>
<field name="mobile_logo" type="media" class="child logotype logotype_image" preview="true" label="HELIX_MOBILE_LOGO" description="HELIX_MOBILE_LOGO_DESC"/>
                En option, vous pouvez ajouter LOGO_AU_SCROLL et LOGO_AU_SCROLL_RETINA et description dans le fichier de langue d'helix (option).

                Normalement, dans les paramètres du templates, vous pouvez définir alors les images logo au scroll (normal et x2) en plus de celui du header qui comporte 3 valeurs initiales soit 5 images pour le logo!

                3. Enfin modifier le fichier logo.php dans feature du template à partir de la 52ème ligne à la ligne contenant "$html .= '</h1>'; }" comprise.

                Code PHP:


                $html                 .= '<a class="logo" href="' . JURI::base(true) . '/">';

                        if(                 $this->helix3->getParam('logo_type') == 'image' ) {
                            if(                 $this->helix3->getParam('logo_image') ) {
                                                $html .= '<h1>';
                                                $html .= '<img class="sp-default-logo'. $custom_logo_class .'" src="' . $this->helix3->getParam('logo_image') . '" alt="'. $sitename .'">';
                                if(                 $this->helix3->getParam('scroll_logo') ) {
                                                    $html .= '<img class="sp-scroll-logo'. $custom_logo_class .'" src="' . $this->helix3->getParam('scroll_logo') . '" alt="'. $sitename .'" width="' . $width . '" height="' . $height . '">';
                                }                                            
                                if(                 $this->helix3->getParam('logo_image_2x') ) {
                                                    $html .= '<img class="sp-retina-logo'. $custom_logo_class .'" src="' . $this->helix3->getParam('logo_image_2x') . '" alt="'. $sitename .'" width="' . $width . '" height="' . $height . '">';
                                }
                                if(                 $this->helix3->getParam('scroll_logo_2x') ) {
                                                    $html .= '<img class="sp-retinascroll-logo'. $custom_logo_class .'" src="' . $this->helix3->getParam('scroll_logo_2x') . '" alt="'. $sitename .'" width="' . $width . '" height="' . $height . '">';
                                }    
                                if(                 $this->helix3->getParam('mobile_logo') ) {
                                                    $html .= '<img class="sp-default-logo visible-xs" src="' . $this->helix3->getParam('mobile_logo') . '" alt="'. $sitename .'">';
                                }

                                                $html .= '</h1>';
                            } else {
                                            $html .= '<h1 class="no-scroll-logo no-ratina-scroll-logo">';
                                            $html .= '<img class="sp-default-logo'. $custom_logo_class .'" src="' . $this->helix3->getTemplateUri() . '/images/presets/' . $this->helix3->Preset() . '/logo.png" alt="'. $sitename .'">';
                                            $html .= '<img class="sp-scroll-logo'. $custom_logo_class .'" src="' . $this->helix3->getTemplateUri() . '/images/presets/' . $this->helix3->Preset() . '/logoscroll.png" alt="'. $sitename .'">';
                                            $html .= '<img class="sp-retina-logo'. $custom_logo_class .'" src="' . $this->helix3->getTemplateUri() . '/images/presets/' . $this->helix3->Preset() . '/logo@2x.png" alt="'. $sitename .'" width="' . $width . '" height="' . $height . '">';
                                            $html .= '<img class="sp-retinascroll-logo'. $custom_logo_class .'" src="' . $this->helix3->getTemplateUri() . '/images/presets/' . $this->helix3->Preset() . '/logoscroll@2x.png" alt="'. $sitename .'" width="' . $width . '" height="' . $height . '">';
                            if(                 $this->helix3->getParam('mobile_logo') ) {
                                                    $html .= '<img class="sp-default-logo visible-xs" src="' . $this->helix3->getParam('mobile_logo') . '" alt="'. $sitename .'">';
                                }

                                                $html .= '</h1>';
                            } 

                Théoriquement, vous pouvez avoir des images png par défaut mais vous pouvez aussi les définir ainsi dans les paramètres du template... Il ne reste plus qu'à tester... eventuellement ajouter ou modifier le logo pour le mobile mais dans l'ensemble, c'est ce qu'il faut faire...
                Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                Commentaire

                • #9
                  Re : Comment changer le logo au scroll

                  Je confirme... le logo pour mobile n'est pas vraiment nécessaire, le mieux est de supprimer la ligne php et la variable ou ne de rien indiquer dans les paramètres du template. Pour le reste, cela fonctionne très bien
                  Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                  Commentaire

                  • #10
                    Re : Comment changer le logo au scroll

                    Ça marche vraiment très bien !
                    Merci beaucoup pour tes explications très détaillées cela m'a permis de faire exactement ce que je voulais c'est génial !

                    Commentaire

                    Précédent template Suivant

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire
                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X