2017-09-21 12 views
0

J'utilise le plugin fullpage.js pour mon site web. J'ai mis mon logo de site Web sur chaque section, mais quand je rafraichis la page, la hauteur de la première section est petite pendant quelques secondes, et après quelques sections c'est normalement. Voici mon code:élément de position de section plugin Fullpage.js

<html> 
    <head> 
     <script type="text/javascript"> 
    $(document).ready(function() { 
     $('#fullpage').fullpage({ 
      sectionsColor: ['#1bbc9b', '#f5fbfd'], 
      anchors: ['home', 'about'], 
       navigation: true, 
       scrollingSpeed: 850, 
       animateAnchors: true, 
       navigationPosition: 'right', 
       responsiveWidth: 900, 
        afterResponsive: function(isResponsive){ 

       } 
     }); 
    }); 
</script> 
    </head> 
<div id='fullpage'> 
    <div class="section" id="home"> 
     <div class='container '> 
       <img class='center-block index_logo img-responsive' style='position:relative; top:0;' src='<?php echo get_logo_by_lng();?>' /> 

     </div> 
    </div> 
    <div class="section" id="second"> 
     <div class='container'> 

       <img class='center-block index_logo img-responsive' style='position:relative; top:0;' src='<?php echo get_logo_by_lng();?>' /> 

     </div> 
    </div> 
</div> 

</html> 

Quel est le problème? Je pense que je n'ai pas compris comment positionner les éléments dans les sections. Merci

+0

L'image n'est pas chargée et n'occupe donc aucun espace. Quand il se charge, l'image prend de l'espace. –

+0

@SvenTheSurfer mais si je n'utilise pas le logo tout va bien – Jack

Répondre

1

Je pense que c'est normal, FullPage.js prend un certain temps avant de formater le document.

Certains test (Cliquez Run à plusieurs reprises):

With a logo et With text, vous pouvez voir le texte aussi.


Une solution peut être créer un effet de fondu après FullPage.js rendu:

CSS

html { opacity:0; } 

JS

afterRender: function() { 
    $('html').animate({'opacity': 1}, 1000); 
} 

The example