web-dev-qa-db-fra.com

Comment faire apparaître du texte sur scroll en HTML

Bonjour, je souhaite qu'un certain texte apparaisse lorsque je le fais défiler ou lorsque je le fais défiler jusqu'au point où se trouve le texte. Lors de la comparution, l’effet devrait ressembler un peu au premier effet situé en haut du site Web http://namanyayg.com/ .

Je veux l'effet dans le code minimal avec CSS pur et JS i.e pas jQuery.

Je pensais que j'utiliserais peut-être quelque chose comme une propriété display:none pour une étendue, puis quand vous la parcourrez, la display devient block mais je ne sais pas comment déclencher l'effet à l'aide de javascript. Toute aide serait appréciée. 

javascripthtmlcssscrollappearance
9
user2906766

Commencez par envelopper tous les textes ou contenus que vous souhaitez afficher en défilement, dans un div, de manière à pouvoir masquer la div en fonction du défilement. Ecrivez deux classes pour votre div cible.

Votre CSS: 

/*Use this class when you want your content to be hidden*/
.BeforeScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  .
  .
  display: none;
}


/*Use this class when you want your content to be shown after some scroll*/
.AfterScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  .
  .
  display: block;
}

Votre code HTML: 

<!--Set class BeforeScoll to your target div-->

<div id = "divToShowHide" class = "BeforeScroll">Content you want to show hide on scroll</div>

Votre script: 

<!--include these script in head section or wherever you want-->

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> 

<script type = "text/javascript">
$(document).ready(function(){
  //Take your div into one js variable
  var div = $("#divToShowHide");
  //Take the current position (vertical position from top) of your div in the variable
  var pos = div.position();
  //Now when scroll event trigger do following
  $(window).scroll(function () {
   var windowpos = $(window).scrollTop();
   //Now if you scroll more than 100 pixels vertically change the class to AfterScroll
   // I am taking 100px scroll, you can take whatever you need
   if (windowpos >= (pos.top - 100)) {
     div.addClass("AfterScroll");
   }
   //If scroll is less than 100px, remove the class AfterScroll so that your content will be hidden again 
   else {
     s.removeClass("AfterScroll");
   }
   //Note: If you want the content should be shown always once you scroll and do not want to hide it again when go to top agian, no need to write the else part
 });
});
</script>

J'espère que cela résoudra votre problème.

6
Saurabh Palatkar

Je recommanderais ce plugin 

http://johnpolacek.github.io/superscrollorama/

Modifier:

Je ne sais pas comment personne n'a remarqué que la solution devait être faite sans utiliser des librairies externes comme jQuery. Cependant, la solution est extrêmement simple avec les fonctionnalités de base. Trouvez-leici

HTML: 

<div id="parent-div">
<div id="child-div">
Psst .. I am here!!
</div>
</div>

CSS: 

#parent-div
{
  position:relative;
  height:3000px;
  width:300px;
  background-color:red;
}

#child-div
{
  color:white;
  position:relative;
  top:1000px;
  width:300px;
  display:none;
  text-align:center;
}

JS: 

var body=document.getElementsByTagName("body")[0];
var parent=document.getElementById("parent-div");
var child=document.getElementById("child-div");
body.onscroll = function(){
//console.log(documenhttps://fiddle.jshell.net/3urv0tp0/#tidyt.getElementById("child-div").style.top)
if(document.documentElement.scrollTop>=child.offsetTop)//Adjust Tolerance as you want
{
   child.style.display="block"
}

};
5
ProllyGeek

Je cherchais ça non plus. Ici, j'essayais de faire "afficher le texte après avoir fait défiler jusqu'à (nombre) px avec effet de fondu". J'espère que ça fonctionnera comme ça marche pour moi :) L'animation sera rejouée si vous y retournez, idk comment en faire une comme sur le Web, vous avez montré xd (je l'éditerai si je le découvre)

HTML:

<div class="toptexts2" id="toptexts2">
 <div>Hi!</div>
 <div>↓ go down ↓</div>
</div>

CSS:

.toptexts2 {
   animation: fadeEffect 3s; /* fading effect takes 3s */
}

@keyframes fadeEffect { /* from 0 to full opacity */
   from {opacity: 0;}
   to {opacity: 1;}
}

JS:

window.addEventListener("scroll", function() {showFunction()});

function showFunction() {
    if (document.body.scrollTop > 900 || document.documentElement.scrollTop > 900) {
        document.getElementById("toptexts2").style.display = "block";
    } else {
        document.getElementById("toptexts2").style.display = "none";
    }
}
1
Rayon

J'aime ça:

var doc = document, dE = doc.documentElement, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
function xy(e, d){
  if(!d)d = 'Top';
  d = 'offset'+d;
  var r = e[d];
  while(e.offsetParent){
    e = e.offsetParent; r += e[d];
  }
  return r;
}
function x(e){
  return xy(e, 'Left');
}
function y(e){
  return xy(e);
}
var txt = E('theId'), txtS = txt.style;
onscroll = function(){
  var left = dE.scrollLeft || bod.scrollLeft || 0;
  var top = dE.scrollTop  || bod.scrollTop  || 0;
  var w = innerWidth || dE.clientWidth || bod.clientWidth;
  var h = innerHeight || dE.clientHeight || bod.clientHeight;
  if(top > y(txt)-h){
    txtS.display = 'none';
  }
  else{
    txtS.display = 'block';
  }
}

J'ai laissé la partie gauche à l'intérieur, juste au cas où, mais vous pouvez probablement l'enlever.

0
PHPglue
var div=$("#divtochange");
$(window).scroll(function () {
            var windowpos = $(window).scrollTop();
            //---check the console to acurately see what the positions you need---
            console.log(windowpos);
            //---------------------

//Enter the band you want the div to be displayed
            if ((windowpos >= 0) && (windowpos <= 114)){ 
                div.addClass("AfterScroll");
            }
            else{
                div.removeClass("AfterScroll");
            }
0
Ricardo