Script fade in

Fermé

fifidibosco Messages postés 72 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 72 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>

A voir également:

Script fade in
Script vidéo youtube - Guide
Av in - Forum Audio
Navigation in private - Guide
Cvbs in 1 - Forum Autoradio
Deco in paris avis - Forum Consommation & Internet

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.

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 524
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,

Réponse 3 / 3

fifidibosco Messages postés 72 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

Discussions similaires

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

qu'est ce qu'une prise DC IN ?

Avis site DECO IN PARIS decoinparis.com (lina sofas)

Que veut dire " in da place " ?

Arnaque du site light in the box

Discussions similaires

Newsletters