it-swarm.com.de

Wie wird der Text in HTML in einer Zeile angezeigt?

Hallo, ich möchte, dass ein bestimmter Text angezeigt wird, wenn ich daran vorbeirollen oder bis zu dem Punkt scrolle, an dem sich der Text befindet. Der Effekt beim Erscheinen sollte etwa dem ersten Effekt oben auf der Website http://namanyayg.com/ ähneln.

Ich möchte den Effekt in minimalem Code mit reinem CSS und JS also ohne jQuery.

Ich dachte, dass ich vielleicht etwas wie eine display:none-Eigenschaft für eine Zeitspanne verwenden würde, und wenn Sie an ihr vorbeirollen, wird displayblock, aber ich weiß nicht, wie Sie den Effekt mit Javascript auslösen. Jede Hilfe wäre dankbar. 

9
user2906766

Umbrechen Sie den gesamten Text oder Inhalt, den Sie beim Scrollen anzeigen möchten, zunächst in einem Div, sodass Sie das Div je nach Scroll ausblenden können. Schreiben Sie zwei Klassen für Ihr Zieldiv.

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

Dein HTML:

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

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

Dein Skript:

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

Hoffe, es wird dein Problem lösen.

6

Ich würde dieses Plugin empfehlen 

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

Bearbeiten:

Ich weiß nicht, wie niemand bemerkt hat, dass die Lösung ohne externe Bibliotheken wie jQuery erstellt werden musste. Die Lösung ist jedoch mit einfachen Funktionen extrem einfach. Finden Sie eshier

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

Ich habe auch danach gesucht. Hier habe ich versucht, "Text nach dem Scrollen in (Anzahl) px mit Fade-Effekt" anzuzeigen. Ich wünschte, es wird funktionieren, so wie es für mich funktioniert :) Die Animation wird erneut abgespielt, wenn Sie zu ihr zurück blättern, idk, wie Sie sie einfach wie im Web machen können. Sie zeigte xd (ich werde sie bearbeiten, wenn ich es herausfinde.)

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

Ich mag das:

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

Ich habe das linke Zeug dort gelassen, nur für den Fall, aber Sie können es wahrscheinlich entfernen.

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