Sujet Précédent Sujet Suivant

Animation au scroll

Fermé
novis - 26 janv. 2019 à 14:42
 novis - 31 janv. 2019 à 12:01
Bonjour,

Je souhaite ajouter un effet sur mon site. J aimerai que le texte arrive par la gauche ou la droite lorsque l on descend sur le site.
J ai trouvé des codes mais je ne parviens pas à les faire fonctionner.
Y a t il des codes "simple" en css (sans js) que vous connaitriez?
Merci pour votre aide
novis

Configuration: Windows / Firefox 64.0

4 réponses

Réponse 1 / 4
hastepur
Modifié le 28 janv. 2019 à 13:42
Bonjour, des codes ça veut rien dire c'est au cas par cas pour chaque but qu'il faut les faire en fonction de la page.
Avec CSS ce ne sera pas possible si vous voulez prendre en compte l'interactivité, seul un programme peut faire ça.

Dans le principe vous avez une fonction JavaScript qui permet de détecter quand la barre de défilement est utilisée. Ensuite il faut écrire l'animation et l'indiquer dans la fonction associée à l'événement(utilisation du scroll dans la page).

"Y a t il des codes "simple"" c'est en effet relativement simple quand on connait la programmation événementielle , JavaScript et la structure d'une page HTML.
Cela peut ressembler à quelque chose comme ça (sans l'animation): 

window.onscroll=function(){
//-- en admettant que le contenu affiché soit désigné par l'identifiant (attribut id) "textereactif"
document.getElementById('textereactif').setAttribute('style')='position:fixed;left:0;';
}


et dans le HTML: 
<style type='text/css'>
#textereactif{
width:1000px;
position:absolute;
left:-1200px;
}
</style>
<p id=textereactif >du texte </p>


Comme JavaScript peut manipuler le texte de HTML et CSS à loisir on peut très bien combiner ça avec une animation avec CSS par exemple transition: 
-webkit-transition: left 2s; /* Safari */
  transition: left 2s;


window.onscroll=function(){
//-- en admettant que le contenu affiché soit désigné par l'identifiant (attribut id) "textereactif"
document.getElementById('textereactif').setAttribute('style')='position:fixed;left:0;-webkit-transition: left 2s;  transition: left 2s;
';
}


En fait si vous vous débrouillez bien il n'y a pas besoin de mettre l'animation avec CSS transition dans le JavaScript(il faudra qu'il soit dans le CSS), le premier script suffira.
Encore mieux, plus simple et clair à lire en changeant la classe dans la fonction associé à l'événement : window.onscroll
Ce qui veut dire en français: 'quand la fenêtre défile' et dans le corps de la fonction(entre accolades) le programme à 'déclencher'. Notez la notation pointée qui est courante dans l'utilisation de la programmation de type objet et permet d'accéder à l'élément de la page(document) donc l'id est 'textreactif'.
Donc simple ça l'est. ça veut pas dire que ça nécessite pas d'apprendre et de la pratique. Bonne chance.
0
Réponse 2 / 4
novis
29 janv. 2019 à 14:56
Bonjour,

J'ai trouvé un code. Néanmoins je rencontre un problème, mon image ne s'affiche pas à une taille correcte. Pourtant sa taille d origine est de 820px de large. Et elle s affiche en petit... 

html, body{
  height: 100%
}

h1,h2,h3,h4,h5,h6{
  font-family: Poppins;
}

p{
  font-family: poppins;
  text-align: center;
}

#info1 img{
  width:100%;
}


<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto%7CJosefin+Sans:100,300,400,500" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" /><script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script><!--/.nav-collapse -->


<section id="info1">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="info-left"><img src="http://monimage.jpg" /></div>
</div>

<div class="col-md-6 col-sm-6 col-xs-6">
<div class="info-right">
<h2></h2>

<p>textesaffichantauscrolldelasouris</p>
<br /></div>
</div>
</div>
</div>
</section>

<hr />

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- Local JS file <script src=""></script> --><script> window.sr = ScrollReveal();  sr.reveal('.info-left', { duration: 2000, origin:'left', distance:'300px', viewFactor: 0.2 }); sr.reveal('.info-right', { duration: 2000, origin:'right', distance:'300px', viewFactor: 0.2 }); </script><script> $(function() { // Smooth Scrolling $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });</script>


Merci pour votre aide

novis
0
Réponse 3 / 4
novis
30 janv. 2019 à 13:27
Pas d ' idée au pourquoi l image ne s'affiche pas a une taille correcte?
0
Réponse 4 / 4
novis
31 janv. 2019 à 12:01
Bonjour,

J'ai de nouveau un problème avec mon scroll. J'ai réussi à agrandir l'image en supprimant une partie du code qui restreignait l'image.
Néanmoins, il y a quelque chose que je ne m'explique pas.
J'ai insérer sur mon site deux endroit où il y a l'effet scroll.
Seul le premier fonctionne... Pourquoi? J'aimerai comprendre. 

html, body{
  height: 100%
}

h1,h2,h3,h4,h5,h6{
  font-family: Poppins;
}

p{
  font-family: poppins;
  text-align: center;
}

#info1 img{
  width:100%;
}



<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto%7CJosefin+Sans:100,300,400,500" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" /><script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script><!--/.nav-collapse -->


<section id="info1">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="info-left"><img src="http://adresseimage.jpg" /></div>
</div>

<div class="col-md-6 col-sm-6 col-xs-6">
<div class="info-right">
<h2></h2>

<p>texteexplicatif</p>
<br /></div>
</div>
</div>
</div>
</section>

<hr />

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- Local JS file <script src=""></script> --><script> window.sr = ScrollReveal(); sr.reveal('.navbar', { duration: 2000, origin:'bottom' }); sr.reveal('.showcase-left', { duration: 2000, origin:'top', distance:'300px' }); sr.reveal('.showcase-right', { duration: 2000, origin:'right', distance:'300px' }); sr.reveal('.showcase-btn', { duration: 2000, delay: 2000, origin:'bottom' }); sr.reveal('#testimonial div', { duration: 2000, origin:'bottom' }); sr.reveal('.info-left', { duration: 2000, origin:'left', distance:'300px', viewFactor: 0.2 }); sr.reveal('.info-right', { duration: 2000, origin:'right', distance:'300px', viewFactor: 0.2 }); </script><script> $(function() { // Smooth Scrolling $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });</script>


Merci pour votre aide.
Là je ne comprends pas pourquoi sur deux codes identiques insérés, seul le 1er fonctionne...

Novis
0

Discussions similaires

A quoi sert la touche "scroll lock" ?
LAKESSE -
loutre -

5 réponses
comment animer une soirée avec 30 personnes à table ?
sofi -
Nolly94 -

1 réponse
éteindre la touche scroll lock
twal -
depassage -

4 réponses
Scroll Lock actif
Sylvie -
captainejojo -

17 réponses
scroll lock
cyril -
bagfender -

9 réponses