Websiteinhalt beim scrollen langsam erscheinen lassen?

Hi, ich will einen bestimmten Effekt auf meiner Website haben, und zwar soll beim scrollen der Text erst langsam erscheinen und nicht direkt wie es normal ist. Beispiel:

https://kurtiii.de/

Wie geht das?

2 Antworten

elmex7

23.03.2021, 14:16

Mit Javascript Scroll Animationen wie zum Beispiel AOS

franzhartwig

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Internet, Webseite

23.03.2021, 13:23

Wäre natürlich geschickt, den Autor der Seite selbst zu fragen. Alternativ analysierst Du den Quelltext und findest Dinge wie

data-aos="fade-in"

Dann wirfst Du Google an und gibst genau das ein. Du findest, dass aos für "animate on scroll library" steht. Jetzt weißt Du, dass Du auf dem richtigen Weg bist.

https://michalsnik.github.io/aos/

Ähnliche Beiträge

HTML CSS - Bild beim Scrollen verschwinden lassen?

Hey,

auf der Website " https://instagrambusiness.funnelcockpit.com/anleitung-sale-landing-page-2/ "verschwindet oben das Bild mit dem Diamand, desto weiter man nach unten scrollt. Allerdings nicht auf die normale Art, sondern mit irgendeinem Effekt. Das heißt das schwarze Bild darunter setzt sich auf das "Diamand-Bild".

Wie geht das?

Liebe Grüße

...zum Beitrag

Website Automatisch Scrollen?

hey, ich habe eine website erstellt, in der ich mich vorstelle.

Ich habe einen header erstellt, und mehrere text abschnitte mit den themen im header gemacht. jetzt möchte ich, das wenn man zB About drückt, dass automatisch zu dem textabschnitt gescrollt wird.

...zum Beitrag

Wie lasse ich ein HTML-Objekt langsamer beim Scroll bewegen?

Ich möchte eine etwas grafisch ansprechendere Website erstellen. Dabei möchte ich ein 3D-Effekt auf verschiedene Objekte haben, d.h., dass der Vordergrund normal schnell beim Scrollen ist, das hintere Bild langsamer, usw.

außerdem würde ich gerne wissen, wie man ein Bild in HTML einfügt, sodass man kein Drag & Drop machen kann.

Danke im Voraus

...zum Beitrag

Zweitsprachige Webseite mit JS?

Ist es besser eine extra Seite für die zweite Sprache meiner Website zu machen also seite.com und seite.com/de, oder wäre es besser, die Texte direkt mit Js zu machen. Also wenn einer mit der Browsersprache Deutsch die Webseite betritt, soll Js es ermitteln und dementsprechend den Text einblenden ohne eine zweite Seite. Was wäre besser

...zum Beitrag

Wie kann man einen Text mit SQL auf Website speichern?

Wie kann man einen Text den man in ein input-Feld eingbit mit SQL auf der Website speichern? (zum Beispiel wie bei YouTube, wenn man einen Kommentar unter ein Video schreibt oder hier auf gutefrage.net, wenn man eine Frage stellt, wird diese auch auf der Website gespeichert.)

...zum Beitrag

HTML Element von rechts nach links schieben bei scroll?

Ich suche ein einfaches Beispiel wie man ein HTML Element von links nach rechts schieben laest sobald das browser fenster runter gescrollt wird an den punkt wo das html element sichtbar sein soll.

ihr kennt das bestimmt was ich meine, diese modernen webseiten designs haben sowas oft, dann sieht alles bisjen cooler aus.

es gibt aber so viele verschiedene beispiele das ich nicht so das richtige finde.

was ich will ist ganz einfach das html element nach schieben und am besten noch mit so ein effekt dazu zum beispiel von durchsichtig zu undurchsichtig.

...zum Beitrag

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zum Beitrag

Google Tabellen: Automatische Tabelleninhalte von Website ziehen?

Kann ich mit Google Tabellen den Inhalt eines bestimmten Containers einer Website automatisch in einem Tabelleninhalt auslesen lassen?

Hintergrund:

Ich habe ein Event, welches jeden Monat an einem anderen Datum ist. Dieses Datum steht auf einer Website immer an der gleichen Stelle. Ich möchte, dass das Datum in meiner Tabelle automatisch von dieser Website eingelesen wird.

Mir ist klar, dass es Fehler geben kann, wenn sich der Aufbau der Website ändert, das nehme ich aber in Kauf.

Danke :)

...zum Beitrag

Google Search Console einzelne Unterseiten entfernen lassen?

ich habe eine Website die beispiel.de heisst aber google hat nicht nur beispiel.de indexiert sondern auch /impressum /datenschutz und /AuthorMax.
Einige unschöne Unterseiten die leider auch sehr weit hochrutschen und sogar unter der Hauptseite angezeigt werden.

Welches von den beiden muss ich auswählen und wie soll ich es eintragen ?

Muss Https:// dabei stehen und www ?
Möchte nicht ausversehen beispiel.de und alle dazugehörigen entfernen, nur 3-4 bestimmte.

...zum Beitrag

Automatisch Scrollen?

Hallo,

auf meiner Website hab ich 2 Icons, die durch eine Klick Funktion jeweils ein Div darunter erscheinen lassen.

Sobald ein Div erscheint oder ich die passende Klasse hinzufüge soll nun zu den passenden Div runter oder zum Seitenanfang gescrollt werden.

Wo liegt der Fehler ?...ich steh etwas aufm Schlauch.

Das Problem muss nicht unbedingt mit einer Scroll function gelöst werden =)

function klick() {
    let hauptDiv = document.getElementById('div_eins');


    if (hauptDiv.classList.contains('unsichtbar') == true) {
        hauptDiv.classList.remove('unsichtbar');
        hauptDiv.classList.add('sichtbar');
        window.scrollTo(0, 100);
    } else if (hauptDiv.classList.contains('sichtbar') == true) {
        hauptDiv.classList.remove('sichtbar');
        hauptDiv.classList.add('unsichtbar');
    }   else {
           return;
        }
    }

...zum Beitrag

Scrolling Effekt nur mit CSS, ohne JavaScript?

Wie bekomme ich diesen Parallax Scrolling Effekt

https://www.youtube.com/watch?v=TawH-AqHTXc

Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr

mit purem CSS hin??

Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)

Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.

Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.

...zum Beitrag

Website-Änderungen werden nicht angezeigt wegen Browser-Cache?

Hallo zusammen,

ich habe folgendes Problem:

Ich hoste meine Website bei Ionos. Dort habe ich meine Codes (HTML, CSS, JavaScript und PHP) im Webspace abgelegt, der mit der Domain verbunden ist.

Nun habe ich an der Website Änderungen vorgenommen und z.B. eine mobile Ansicht implementiert. Ich habe die alten Code-Dateien überschrieben.

Auf der Website werden diese Änderungen aber nicht angezeigt, wenn man die Website vor kurzem bereits besucht hatte, da der Browser-Cache die alten Daten noch gespeichert hat.

Gibt es hier eine Möglichkeit, das zu verhindern und für die Nutzer direkt die neue Version anzeigen zu lassen?

Ich danke für eure Rückmeldungen :)

...zum Beitrag

Über PHP HTML Quellcode auslesen und in Variable speichern?

Hallo,

Kennt jemand eine Möglichkeit wie ich mit PHP einen bestimmten Teil HTML Quellcode aus der gerade geöffneten Seite/oder generell aus einer Datei auslesen kann und diesen dann als Text in einer ganz normalen PHP Variablen speichern kann.

Mit bestimmten Teil meine ich zum Beispiel alles was in einem Element wie einem div mit einer bestimmten id steht.

Zum Beispiel dieser HTML Code:

<body>
  <div id="Div1">
      <h1> Nicht dieses Div </h1>
  </div>

  <div id="Div2">
      <h1> Dieses Div </h1>
  </div>

  <div id="Div3">
      <h1> Nicht dieses Div </h1>
  </div>
</body>

Wenn ich dann den Inhalt von Div2 in eine PHP Variable schreiben wil soll in der Variable: "<h1> Dieses Div </h1>" stehen.

Ich hoffe meine Frage ist verständlich und jemand kennt eine Lösung.

Vielen Dank im voraus :D

...zum Beitrag

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen