web-dev-qa-db-ja.com

HTMLのスクロールにテキストを表示する方法

こんにちは、あるテキストをスクロールしたとき、またはテキストがある位置までスクロールしたときに、特定のテキストが表示されるようにしたいと思います。表示されるときの効果は、Webサイトの上部にある最初の効果 http://namanyayg.com/ のようになります。

純粋なCSSとJS、つまりjQueryを使用しない最小限のコードで効果が欲しい。

スパンにdisplay:noneプロパティのようなものを使用して、スクロールするとdisplayがblockになると思っていましたが、効果をトリガーする方法がわかりませんJavaScriptを使用します。任意の助けいただければ幸いです。

javascripthtmlcssscrollappearance
11
user2906766

最初に、スクロールに表示するテキストまたはコンテンツを1つのdivでラップして、スクロールに応じてdivを非表示にできるようにします。ターゲットdivの2つのクラスを記述します。

あなたの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;
}

あなたのHTML：

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

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

スクリプト：

<!--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>

それがあなたの問題を解決することを願っています。

9
Saurabh Palatkar

このプラグインをお勧めします

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

編集：

JQueryのような外部ライブラリを使用せずにソリューションを作成する必要があることに誰も気づかなかったのかわかりません。ただし、ソリューションは基本的な機能で非常に簡単です。それを見つけるここ

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

これも探していました。ここで私は「フェード効果で（number）pxにスクロールした後にテキストを表示する」ことを試みていました。私はそれが私のために働くようにそれがうまくいくことを望みます:)あなたがそれにスクロールバックした場合、アニメーションは再び再生されます、idk Webでのようにそれを1つだけにする方法uはxdを示しました（私が見つけたら編集します）

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

私はこれが好き：

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';
  }
}

念のため、左のものをそこに残しましたが、おそらく削除できます。

0
StackSlave
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