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

2 Antworten

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

15.02.2020, 19:52

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

Du kannst das (experimentelle) Attribut draggable verwenden.

<img alt="some image description" draggable="false" src="some-image.jpg">

Ebenso ist in einigen Browsern (Chrome, Opera) ein CSS-Property namens -webkit-user-drag implementiert. An dieser Stelle ist allerdings zu beachten, dass dies nicht zum Standard gehört. Der Support kann also jederzeit wieder einbrechen.

15.02.2020, 12:35

Such nach parallax scrolling effects tutorial, z.B. hier: http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
Was meinst du mit dass man kein Drag & Drop machen kann?

HTMLBOI

Fragesteller

15.02.2020, 12:37

Was meinst du mit dass man kein Drag & Drop machen kann?

Damit meine ich, dass du das Bild auf der Website nicht woanders hinziehen kannst

0

Steffile

15.02.2020, 12:45

das ist normales Verhalten von Bildern. Was hast du denn gemacht, dass das Bild beweglich ist?

1

chilly10

16.02.2020, 09:24

meinst Du, dass man das Bild nicht rauskopieren kann von der Website? Dann vllt als backgroundimage einbinden, das müsste gehen

0

threadi

16.02.2020, 11:17

Selbst das kann man umgehen und das Bild kopieren.

0

Ähnliche Fragen

Wie ändere ich das Design (html) des mittleren Mauszeigers (mittlere Maustaste drücken um zu scrollen),den sogenannten scroll cursor für alle Webseitenbesucher?

den normalen Mauszeiger (pointer)/ Pfeil schaffe ich selbst zu verändern in html, aber nicht den Mauszeiger; wenn ich die mittlere Maustaste drücken zum scrollen

dieses Standarddesign für alle Webseitenbesucher in ein individuelles Design ändern:

html, linke Maus Sonderfunktion abschalten?

Wenn ich auf ein Bild in html mit der linken Maustaste klicke und gedrückt halte und bewege, erscheint ein kleines Bild mit durchgestrichenem Kreis.

Wie kann ich diese Funktion deaktivieren, ich möchte Drag und Drop selber verwenden.

Internet Explorer scroll Probleme

Hallo, ich habe jetzt schon des Öfteren festgestellt, dass der IE 11 Probleme beim Scrollen macht:
Manchmal geht das Scrollen von einem Moment auf den anderen gar nicht mehr, allerdings nur für ein Tab, auf den anderen funktioniert alles.
Seit heute fällt mir auch auf, dass plötzlich, wieder nur auf einem Tab, das Scrollen wesentlich langsamer geht.
Das Ganze tritt nicht nur auf gewissen Seiten bzw. in gewissen Situationen sondern eher zufällig auf.
Neuladen behbt dieses Problem meistens auch wieder.
Nun möchte ich wissen, ob jemand dieses Problem kennt und ob das für IE normal ist?
Man ist von IE ja einiges gewohnt, weshalb ich ihn auch nur sehr selten benutze.

Lg

html Buchstaben einzeln ändern?

Hallo, ich möchte in Html ein Wort haben, wo ich bei jedem Buchstaben die Farbe einzeln ändern kann. Wie geht das ? Weil wenn ich z.b so mache:

<p id="0">T</p>  
<p id="1">e</p>  
<p id="2">s</p>  
<p id="3">t</p>

Bekomme ich so ein Ergebnis:
T
E
S
T

Ich möchte aber das es so aussieht: TEST, und dass ich trotzdem bei jeden Buchstaben in CSS die Farbe ändern kann

Website (HTML und CSS) Mehrere Bilder beim Scrollen sichtbar machen...

Hallo zusammen,

ich möchte gerne mit HTML und CSS eine Website erstellen. Ich habe auch schon das Grundgerüst. Jetzt möchte ich beim Scrollen Bilder sichtbar werden lassen. Das ist schwer auszudrücken...deswegen hier eine Beispielseite: http://nextcargame.com/

wenn man runterscrollt wird ein Bild sichtbar das scheinbar im Hintergrund ist und wird wieder vom Vordergrund verdeckt. Weiter unten kommt dasselbe mit einem anderen Bild. Weiß jemand zufällig wie man so etwas macht? Vielleicht kann mir ja jemand helfen;)

LG Calamann

Blog in HTML erstellen?

Also ich habe schon vor längerer Zeit für einen Freund von mir eine Website erstellt. Pures HTML und CSS - kein Websitebuilder. Doch jetzt sollte auch noch eine Art Blog dazukommen. Da mein Freund nicht ganz so technikaffin ist, benötigt er auch noch eine Eingabeseite wo er seine Texte erstellt, die dann automatisch zu Inhalten der Blogseite werden.

Ich muss gestehen, dass ich eine solche Applikation noch nie programmiert habe, bin aber bereit zu lernen wie es geht. Nur bräuchte ich dafür einen ersten Anhaltspunkt wie man das am Besten anlegen sollte.

Kennt von euch jemand ein Open-Source Blog Projekt wo man sich das ein bisschen anschauen kann, oder eine Tutorialserie dazu?

Wie / Womit Konfigurator programmieren?

Um mir Arbeit zu erleichtern, möchte ich einen Konfigurator programmieren.

Ich kenne mich im Bereich nicht aus, habe aber eigentlich kein Problem, Dinge schnell zu verstehen und z.B. schon mit Delphi programmiert.

Der Konfigurator soll folgendes können:

Drag & Drop von Objekten
Farben der Objekte über eine Farbpalette mit festgelegten Farben ändern
ggf. Objekte verschieben und spiegeln
Grafif am Ende auf ein Layout setzen
Datei als Pdf ausgeben

Ich wüsste gerne, was ich benötige, um einen Konfigurator nach meinen Anforderungen zu erstellen. Also mit was für Tools, Programmiersprachen usw. es funktionieren könnte.

Ich brauche also erstmal einen Anstoß um mich dann irgendwie weiter damit zu beschäftigen.

Mac os 10.14 Mojave wirklich schlechter als ein Mac OS aus dem Jahr 2014?

Hallo.

Also ich habe ein Mac Pro PC da wo (steht das diese Pc von Ende 2013 stammt), und seit dem ich auf Mac OS 10.14 Mojave Upgrade gemacht habe, läuft das System teilweise schlimmer.

Perfomance ist um einiges Langsamer geworden
Photoshop Läuft nicht mehr einwandfrei, denn wenn ich bei Photoshop die "Grafikbeschleunigung" Aktiviere und ich über verflüssigungstool Objekte verflüssige, dann bekomme ich so komische Schwarze weiße Punkten. Somit musste ich deswegen "Grafikbeschleunigung" Deaktivieren damit nach der verflüssigung keine Schwarze Punkte auftauchen.
Im Photoshop lässt sich teilweise langsamer scrollen.
Das ist egal welche Photoshop Version ich verwende, denn so oder so läuft es schlecht.
Vmware Fusion hat um paar Sekunde länger gebraucht bis es gestartet wird
Wacom Tastenbelegung funktioniert im Photoshop nicht mehr richtig

An alle die Aktuelle Mac Rechner mit Mac Mojave besitzen, wollte ich euch fragen ob das bei euch auch dort Photoshop schlechter läuft? Und wie bringe ich Mac OS Mojave einwandfrei zum laufen? Gibt es ein Tool wo man die Treiber für Mac Aktualisieren kann?

HTML Img responsive overflow?

Hallo Liebe Community,

ich habe eine kurze Frage. Ich habe in meinem

HTML Code ein img eingefügt und es mittig zentriert und die breite auf 100% gesetzt. Zudem ist dieses Bild 100vh hoch. Sobald ich die Seite kleiner mache vergrößert sich das Bild, da die 100vh ja gefüllt werden müssen. Soweit so gut. Nun wenn ich auf Safari oder Chrome auf das responsive tool gehe, öffne ich zb die Ansicht eines iPhones und kann immer bei dem img ein Stückchen nach rechts scrollen. Scroll ich aber 100vh runter, richtet sich die Seite wieder mittig aus also springt wieder zurück. Ich hab’s versucht mit overflow hidden und max width 100% im html Bzw Body css aber nichts von beiden hat funktioniert. Wie behebe ich das?

vielen Dank im Voraus

lg

Handy lädt mit einem anderen ladekabel viel langsamer?

Mir ist aufgefallen dass mein Handy mit einem anderen Ladekabel viel langsamer lädt, warum ist das so?

JQuery Bei Scrollen Datensätze nachladen

Hallol, ich möchte gerne Datensätze in einem DIV mit overflow: auto und einer festen Höhe nachladen über AJAX. Bisher ist es mit dem nachfolgenden Code so, dass nur nachgeladen wird wenn man auf der Seite nach unten scrollt.

Wie muss man den Code verändern, dass wenn man in dem DIV runterscrollt, die Datensätzte geladen werden?

    $(document).ready(function() {
    start = 0;
    count = 5;
    for (var i = 0; i < 1; i++){
        loadcontent(); 
    }
});
 
function loadcontent() {
    $("div.loader").show();    
     
    $.ajax({
        type: 'get',
        url: '/includes/ajax.php',
        async: false,
        data: { start : start, count : count },
        success: function (html){
            if(html){
                $('.container').append(html);
                start = start + 5;
            }else{
                $('.end').html('<p>Keine weiteren Posts!</p>');
            }
        }
         
    }) 
 
    $("div.loader").fadeOut('normal');     
}
 
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){       
            loadcontent();         
    }
});

Vielen Dank.

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 :)

Html Scrollen funktioniert nicht?

Ich habe das problem, dass t3 unter die Fusszeile verschwindet. Ich möchte aber das er die Fusszeile nach unten drückt und man scrollen kann.

<!DOCTYPE html>
<html lang="de">
 <head>
  <title>
   Titel
  </title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
   body{
   margin: 0;
   margin-right: 18pt;
   }
   a{
    text-decoration: none;
    color: black;
    font-face: Arial;
   }
   hr{
    background-color: black;
    border-color: black;
    width: 25%;
   }
   .fusszeile{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: blue;
    height: 3em;
    font-size: 12pt;
    font-face: Arial;
   }
   h1{
    font-size: 30pt;
    font-face: Arial;
    text-align: center;
   }
   t2{
    font-size: 18pt;
    font-face: Arial;
    color: white;
   }
   t3{
    font-size: 18pt;
    font-face: Arial;
    text-align: justify;
    position: fixed;
   }
   .drop {
    background-color: blue;
    color: black;
    padding: 9pt;
    font-size: 18pt;
    border: none;
    cursor: pointer;
    font-face: Arial;
    margin-left: 0;
   }
   .dropdown {
    position: fixed;
    display: inline-block;
   } 
   .dropdown-content {
    display: none;
    position: absolute;
    background-color: blue;
    font-face: Arial;
    font-size: 18pt;
    min-width: 100px;
   }
   .dropdown-content a {
    color: black;
    padding: 9pt 18pt;
    text-decoration: none;
    display: block;
   }
   .dropdown:hover .dropdown-content {
    display: block;
   }
   div#text{
    float: left;
   }
  </style>
 </head>
 <body>
   <h1>
     Titel
   </h1>
   <div class="dropdown">
   <button class="drop">
   <b>
    <a href="#">
     &equiv; Men&uuml
    </a>
   </b>
   </button>
  <div class="dropdown-content">
   <b>
   <a href="#">Text</a>
   </b>
  </div>
 </div>
 <div id="text">
  <t2>
   ----------|....
  <br>
  </t2>
 </div>
 <div id="text" style="margin-left: 18pt;">
  <t3>

k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
3
<br>
k 
<br>
k 
<br>
k 
<br>
k 
<br>
3
  </t3>
 </div>
  <div class="fusszeile">
   <hr noshade>
   <center>
   <a href="#">Text</a>
  </center>
  </div>
 </body>
</html>

HTML Bilder kopieren per Drag-and-drop verhindern

Ich bin gerade dabei ein Website zu erstellen. Um ein paar spezielle Funktionen zu realisieren muss das Javascript erkennen können, wenn ein Nutzer die linke Maustaste auf einem Bild drückt, dann die Maus verschiebt und dann die Maustaste los lässt. Das Problem an der Sache ist, dass der Browser versucht das Bild zu verschieben und somit die gewünschten Aktionen nicht erkennt. Gibt es eine Möglichkeit dieses "Verschieben" zu verhindern?

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }