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.

3 Antworten

BlaueEnte

03.12.2020, 12:52

Hallo,

Das und andere Effekte kannst du z.B. mit Scrollmagic einbinden. Man setzt sog. Trigger, die dann eine Animation auslösen. Dazu benötigt es allerdings auch etwas JavaScript.

https://scrollmagic.io/

Vielleicht ist es so was, wonach du suchst. Du findest dazu auch einige Tutorials und einfache Beispiele.

Viele Grüße

NackterGerd

04.12.2020, 08:25

Vielleicht solltest du dich mal mit CSS3 beschäftigen

https://www.w3schools.com/css/css3_animations.asp

TheInvaluable

03.12.2020, 12:44

Na dann geh doch einfach mal zu einer deiner idolwebsides und kopier den code einfach mal

Hi, ich programmiere gerade für eine Präsentation in der Schule eine Mini Website. Ich mach mal ein Bild vom Code des Bildes und von der ausgeführten Seite.

Ich will, dass das Bild rechts ist und links der Text, ohne das genau neben dem Bild Platz ist.

...zur Frage

Wie benutzt man Javascript mit Node.js Dateien?

Wenn man eine Webseite mit Node.js Webserver betreit werden ja die HTML Dateien ueber den Node.js Webserver aus gegeben. Man kann ja einerseits Node.js Dateien mit Javascript erstellen und auch normale Javascript Dateien welche man in HTML Dateien importiert. Wenn ich jetzt in der index.html eine Javascript Datei importiere, dann wird der Browser das Javascript ausfuehren, wenn man das Javascript aber in einer Node.js Datei speichert wird Node.js das Javascript ausfuehren, ich wuerde mal gerne wissen, ob es irgend ein Vorteil bringt wenn man entweder Javascript nur von Node.js oder groesenteils ueber den Webbrowser ausfuehren laest; beziehungsweise ist es ueberhaupt moeglich das man das Javascript welches man in der index.html importiert auch ueber Node.js laufen laest. Programmiertechnisch mueste man dann denke ich aufjedenfall einiges wieder aendern an der Javascript Datei welche in der index.html importiert wird, weil ich denke mal auch das Javascript in Node.js auch bisjen anders aufgebaut ist.

Aber wie auch immer ich bin da noch bisjen neu und versuche etwas besseren Ueberblick zu bekommen, wenn kann mir den bisjen was dazu erzaehlen?

...zur Frage

NavBar auf jeder Unterseite einbauen (Webdevelopment)?

Hallo, es gibt auf so ziemlich jeder Website Elemente, die auf fast jeder Unterseite vorkommen. Ein Beispiel dafür wäre die NavBar. Diese ist bei den meisten Websites überall. Wie bringt man aber dieses Element auf jede Unterseite? Bei jeder Unterseite den ganzen HTML, CSS und JavaScript Code reinzukopieren wäre ja sehr mühsam.

Diese Aufgabe kann man mit Framworks lösen, wie z.B. VueJS wo man Komponenten verwendet. Welche Methoden gibt es sonst noch, vielleicht sogar ganz ohne Framework?

...zur Frage

Wordpress-Internetseite gestallten: Seitenränder hinzufügen?

Sehr gerne hätte ich auf einer Wordpress-Internetseite, welche ich mit dem kostenlosen Baukasten erstellte, einen Rand links und rechts angezeigt, wie beispielsweise hier auf dem Screenshot zu sehen.
Gibt es dafür eine einfache Funktion, welche ich auswählen kann oder benötige ich einen HTML-Befehl? Falls Letzteres zutrifft: Welchen und wo gebe ich ihn ein.
Herzlichen Dank.

...zur Frage

HTML + CSS Website hat weisse Seite am rand?

Wenn ihr nach links scrollt auf https://islikers-baukunst.ch/FreshHp, seht ihr einen weissen Rand aber kein visuelles Element dass das verursacht. Könnt ihr mir da helfen? Leider kann ich nicht die Website hier rein kopieren, da diese sonst zu lang wäre. Aber ich habe hier einen DropBox-Link: Zu DropBox

...zur Frage

Ü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

...zur Frage

Wie HTML-Datei mit Links verschicken?

Guten Abend,

ich würde gerne wissen, wie ich eine HTML-Datei verschicken kann, die einen Link enthält, welcher zum Beispiel zu einer PDF-Datei führt, die ebenfalls in dem selben Ordner wie die HTML-Datei liegt?

Auf meinem eigenen Computer, auf der ich diese Datei angelegt habe, ist es kein Problem diese Datei zu öffnen und den Links zu den anderen Datein zu folgen, aber wenn ich die HTML-Datei an jemanden anderes verschicke, dann funktionieren diese Links nicht mehr. Mir ist klar, dass das daran liegt, dass die Person die Datein hinter den Link ja nicht hat, aber wie kann ich das lösen, so dass die HTML-Seite wirklich funktioniert?

Habe schon versucht den Ordner komplett zu verschicken, ändert trotzdem nichts daran, dass der Link nicht funktioniert... :(

LG, bin dankbar für jede Antwort. 🙏

...zur Frage

Wie kann man in html bilder responsive machen?

Sodass, das Bild nicht von links nach rechts verkleinert wird sondern von rechts nach links.

also nicht so, sondern den rechten Teil im Bild hat

den rechten

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

HTML: Warum hält "sticky" nicht perfekt?

Ich habe drei div-Elemente von diesem Aufbau:

<div position:sticky; top=0px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div position:sticky; top=50px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div><table>mehrere tausend Zeilen, 'eine' Spalte</table></div>

Wenn ich nun im Element "C" zu scrollen beginne, ist zunächst alles wie gewünscht. A und B bewegen sich nicht.

Aber wenn jene Zeile, die nach dem Laden nicht zu sehen war (erste Zeile der zweiten Bildschirmseite), am Element "B" ankommt, beginnt sich dieses ebenfalls nach oben zu verschieben (zunächst hinter "A", z-index).

Kommt nun auch diese Zeile (der zweiten Bildschirmseite) am Element "A" an, verschiebt sich diese ebenfalls und es ist nur noch das Element "C" zu sehen.

Was kann ich tun, damit auch beim Scrollen A, B permanent zu sehen ist, selbst dann, wenn schon viele Bildschirmseiten gescrollt wurden?

...zur Frage

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zur Frage

Html in apps bearbeiten?

Kann man irgendwie in Apps das Html element oder script element untersuchen wie im Browser und dann die Schrift verändern? Zum beispiel browser kann man links klick element untersuchen und dann kann man was anderes hinschreiben, kann man das auch irgendwie bei Apps machen?

Android 11

...zur Frage

Wie würdet ihr es in HTML schreiben und später mit CSS stylen?

Hallo Leute.

Ich wollte den Header mit einem Bild in der Mitte zentriert und zwei Links, jeweils links und rechts darstellen.

Die Darstellung die ich wollte, habe ich hinbekommen.

(Es geht nur um die Positionierung der Elemente, und nicht um Farben, oder ob man die Links nicht im Header, sondern wo Anders positionieren sollte. Es geht explizit um diese Darstellung im Header-Breich.)

Bild 1(Browser): >>>>>>>>>>

Bild 2(HTML): >>>>>>>>>>

Bild 3(CSS): >>>>>>>>>>

Meine Frage wäre: Wie würdet ihr denn die HTML schreiben und anschließend mit CSS stylen, um so ein Ergebnis zu erreichen.

Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist, die ein erfahrener in diesem Bereich bevorzugen würde.

Danke.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen