HTML / CSS scroll animation aber wie?

Hi, ich brauch eine Animation bei der man scrollt und ein div beginnt zu wachsen/zoomen nach einem Maximum soll es wieder kleiner werden und der nächste block wachsen usw. eine Grafik ist im Anhang. Ich brauch keinen fertigen Code eher einen Ansatz oder etwas vergleichbares.

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

userfromberlin

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

09.09.2015, 11:07

Schau Dir mal folgende Webseite an. Für Webdevelopment-Anfänger ist das die zentrale (englische) Anlaufstelle: "http://www.w3schools.com/".

Dort oder sonst wo sollten Dich folgende Einträge interessieren:

CSS:

position: fixed;
transform: scale([x], [y]);

JS:

window.pageYOffset

window.onscroll

[element].style = [s.o.];

Der Quellcode sollte dies als Basis haben.

qwdfgosmd

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

07.09.2015, 17:40

Prinzipiell benötigt man für so etwas JavaScript. Einfacher wäre aber in deinem Fall auf jeden Fall noch jQuery, eine JavaScript-Bibliothek zusätzlich zu benutzen. Wenn du dann JavaScript/jQuery ein bisschen gelernt hast (duckduckgo.com ist dein Freund). Wenn du das gelernt hast, schreibe mich gerne an. Ich helfe dir dann weiter, wie man auf die Scroll-Position zugreifen kann bzw. die Größe eines divs ändert.

mfg
qwdfgosmd

Ähnliche Beiträge

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

CSS: Wie kann ich einstellen dass wenn ich mit dem Mausrad Scrolle dass es eine Seite herunter geht?

Hallo Leute

Ich möchte dass auf meiner Website, wenn man scrollt dass es quasi eine ganze Seite herunter geht. Ich habe jetzt kein Beispiel, auf welcher Seite es so aussieht, aber wenn man auf http://www.apple.com/ geht, sieht man ja eine Slideshow, ich möchte eigentlich dassselbe machen, halt einfach vertikal und mit Scrollen. Habt ihr eine Idee. Am liebsten nur mit CSS.

Danke für die Hilfe

Ranixi

...zum Beitrag

Scroll Überlappen Animation?

Hallo,

Also geht mal bitte auf folgende Seite:

emyo-drinks.de

Dort wird erst ein video angezeigt, und wenn man scrollt überlappt sich das ganze, das video hab ich schon, aber wie kann sich das beim Scrollen überlappen?

...zum Beitrag

Wie funktioniert die Ladeanimation in html?

Guten Morgen,Ich habe eine Webanwendung welche beim Aufruf verschiedener Unterseiten Scripte ausführt. Nun möchte ich dass eine Ladeanimation erscheint sobald ich die Unterseite aufrufe und diese soll erst beendet werden sobald das Script fertig ausgeführt wurde. Habe bereits eine geeignete Animation gefunden und implementiert, nur weis ich nicht wie man diese jetzt aufruft, denn von allein funktioniert das nicht. Habe ein div spinner mit den Attributen und noch webkitkeyframes für die Animationen, wie kann man der Animation angeben wann sie beginnen soll und wann sie sich beenden soll?

Hier der code in css: (html code beinhaltet nur ein div spinner)

...zum Beitrag

Bei "scroll down" Menü animieren nur mit CSS möglich?

Ist es möglich rein in CSS ein oberes Menü zu animieren, wenn man nach unten scrollt?

Ich habe mit:

position: sticky;
top: 0;

zwar erreicht, dass das obere Menü erst etwas mit nach oben rutscht und dann am oberen Rand stehen bleibt.

Ich würde jedoch gern die Schriftgröße und die Lage in der Position

top: 0;

verändern und animieren. Gibt es da eine Möglichkeit nur in CSS?

...zum Beitrag

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zum Beitrag

HTML/CSS 2 Bilder nebeneinander?

Ich würde gerne in HTML mit CSS 2 bilder nebeinander positionieren. Beide sind in einer DIV BOX... Siehe das Bild im Anhang..

...zum Beitrag

CSS mehrere DIV Objekte in einer Linie mit gleicher Breite?

Hi an alle!

Ich habe jetzt mehrere Div-Elemente mit

display: inline-block;

in einer Linie gebracht. Wie bekomme ich diese nun dazu die gleiche Breite zu haben?

Danke im Voraus

...zum Beitrag

HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zum Beitrag

CSS/JS - automatisch hoch scrollen nach x Sekunden?

Hallo,

ist es möglich (und wie?) das wenn ein User ein DIV-Container runter scrollt, dass nach einer bestimmten Zeit automatisch wieder hochgescrollt wird damit der nächste User von oben anfängt?

Danke

...zum Beitrag

HTML CSS Hover Animation?

Hallo. Ich versuche eine eigene Website zu erstellen mit HTML und CSS. Nun bin ich auf ein Problem gestoßen. Ich versuche seit langem eine Hover Animation auf ein Text einzufügen. Den CSS Code habe ich von der Webseite ui-snippets.dev . Ich bekomme die Hover Animation nicht zum Funktionieren. Die Animation kommt nur wenn ich beim content ein Text eingebe. Dann ist aber die Animation viel zu groß, da die große vom eingegeben Content Text benutz wird.

Bilder vom Code im Anhang.

...zum Beitrag

Eine Div immer im Vordergrund, wie?

Ich habe zwei Divs. Eine oben in fixed Position und eine darunter in absolute. Wenn ich nach unten Scrolle überdeckt die untere Div die obere. Wie bekomme ich die obere Div, die in fixed Postion steht immer ganz nach vorne?

[Bereich HTML/CSS]

...zum Beitrag

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen