Sujet Précédent Sujet Suivant

Script fade in

Fermé
fifidibosco Messages postés 70 Date d'inscription mercredi 2 décembre 2015 Statut Membre Dernière intervention 17 juillet 2023 - 2 août 2017 à 14:40
fifidibosco Messages postés 70 Date d'inscription mercredi 2 décembre 2015 Statut Membre Dernière intervention 17 juillet 2023 - 4 août 2017 à 11:41
Bonjour,

je voudrais utiliser ce script,
http://jsfiddle.net/tcloninger/e5qaD/ trouvé sur jsiddle qui fait exactement ce que recherche.

J'en ai fait un fichier html, pour voir comment ça se comporte, "grandeur nature".

Chez moi toutes les div Fade In apparaissent en même temps, dès qu'on scrolle, alors que sur le résultat de jsfiddle la div n'apparait que lorsqu'elle est complétement dans la fenêtre.

Pourquoi cette différence alors que je n'ai fait, il me semble, que recopier le code ?
comment corriger pour que le fonctionnement soit celui rechercher?
Par avance merci
Fifi 

<html style="margin: 0; padding: 0;">

<meta charset="UTF-8">

<head>
<title>FadeIn essai</title>

<style>
#container
{
    height:2000px;    
}

#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme
{
    opacity:0;
}

</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

<script type="text/javascript">

$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hideme').each( function(i){
            
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                
                $(this).animate({'opacity':'1'},500);
                    
            }
            
        }); 
    
    });
    
});

 </script>

</head>

<body bgcolor=yellow>


<div id="container">
    
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello1</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    
</div>

</body>
</html>





3 réponses

Réponse 1 / 3
nicelife90 Messages postés 615 Date d'inscription vendredi 24 septembre 2010 Statut Membre Dernière intervention 10 avril 2018 151
2 août 2017 à 19:59
Bonjour,

Je ne suis pas complément certain de la raison qui cause le comportement que tu obtiens.

Je te conseil de regarder du coté de cette librairie :

https://github.com/michalsnik/aos

Elle te permet de faire plusieurs type d'animation comme tu recherche voici la page de démonstration.

http://michalsnik.github.io/aos/

Voici le message que j'obtiens que je roule ton script d'exemple, je crois que ce peut être une piste pour comprendre ce qui ce passe.

Ce site semble utiliser un effet de positionnement lié au défilement. Cet effet pourrait ne pas fonctionner correctement avec le défilement asynchrone. Consultez https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects pour obtenir davantage de détails ou discuter des outils et des fonctionnalités liés.

0
Réponse 2 / 3
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
3 août 2017 à 15:45
Salut,

Un document html sans doctype n'est pas valide, le problème semble venir de là.

Ajoute le doctype html5 juste avant la balise <html> : 
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">


Au passage, la balise meta charset doit être placé dans la balise head.

Bonne journée,
0
Réponse 3 / 3
fifidibosco Messages postés 70 Date d'inscription mercredi 2 décembre 2015 Statut Membre Dernière intervention 17 juillet 2023
4 août 2017 à 11:41
Bonjour et merci à vous du coup de main.

nicelife
j'ai installé AOS, ça fonctionne très bien, beaucoup d'options différentes. En revanche pour modifier certaines options existantes, comme le délai d'apparition, le temps de transition, etc... c'est plus hard, en tout cas c'est au-dessus de mes capacités actuelles. Je vais essayer de trouver de la doc la-dessus.

Pitet
je ne sais pas pourquoi, je m'attendais à te voir passer par là ;-)
ça fonctionne en effet bien mieux avec le doctype. Va falloir que je me force à être rigoureux, un de ces jours, histoire de ne pas déranger pour rien.

Merci encore
Fifi
0

Discussions similaires

[URGENT] Que veut dire prise (AUX IN)?
quentinel -
ankae -

18 réponses
autoradio Android que peut-on brancher sur vidéo input
chrisia -
baladur13 -

3 réponses
Que veut dire " in da place " ?
westcoastDJ -
fyu -

9 réponses
Casque audio sur prise aux In
Bert -
Andy31200 -

3 réponses
Peut-on brancher un casque sur une prise auxiliaire ?
Arnold -
Clarckos -

1 réponse