Website html css javascript - Animation on scroll ruckelt auf hochgeladener Seite (hostinger), lokal auf PC aber nicht?

Liebe Programmier-Community,

ich bin gerade dabei, eine Produktwebsite für einen Bekannten aufzubauen. Ich mache das Ganze mit html, css und javascript, noch dazu lernt man dabei viel.

Als Startseite der Produktseite soll eine Seite mit Animationen dienen. Sobald man scrollt, "fliegt" man auf das Produkt zu (Drohnenaufnahme), zusätzlich erscheint immer wieder Text mit z.B. Beschreibungen.
Im Endeffekt habe ich mich hier von der Apple Airpods Pro Seite inspirieren lassen, ausprogrammiert wurde aber alles von mir selbst. Die Seite soll also im Endeffekt ähnlich wie folgende wirken: AirPods Pro - Apple (AT) (natürlich mit anderen Bildern und Texten).

Um die Animationen zu realisieren geht Apple folgenden Weg: sie tauschen während dem Scrollen die source der Bilder aus, dadurch wirkt das Ganze wie ein abgespieltes Video.

Nun zu meiner Situation:
Ich habe das Ganze jetzt grob umgesetzt. Lokal auf meinem PC läuft alles wunderbar, die Animationen laufen extrem flüssig.
Hier ein Link zum Downloaden und ausprobieren: https://mega.nz/folder/a6pz1KpI#tm9swYA87tPMK5RzKjROsg

Probehalber habe ich jetzt versucht, die Seite auf unseren Webspace hoch zu laden. Wenn man die Website dann im Internet über die URL aufruft, werden die Bilder der Animationen allerdings so langsam aktualisiert, dass man gar nicht wirklich erkennt, dass das Ganze eine Animation sein soll.
Kann sich jemand vorstellen, woran das liegt? Bei der Apple Website funktioniert das tadellos.

Ich habe mir schon über das Downloadverhalten der Bilder Gedanken gemacht bzw. werden diese überhaupt gedownloaded? Falls ja, kann man das gleich nach dem Laden der Website erzwingen?
Hier ein Link zur Website (besteht evtl. nur vorübergehend):
Lebensfahnen

Worin könnte das Problem sonst noch bestehen?

Danke im Voraus, ich freue mich auf eure Antworten!

Liebe Grüße
Simon Benedikt Fischer

Computer, Website, Animation, Technik, HTML, Programmieren, CSS, JavaScript, Technologie, Webspace
Weiß jemand, wie man das repariert?

Hi, ich habe folgendes Problem:

Kann jemand den CSS-Code ergänzen?

@import url('https://fonts.googleapis.com/css?family=roboto!:300,400,500,700,900&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

.hintergrund {
  position: relative;
  background: dodgerblue;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: cornsilk;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .2);
}

.box .percent {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
}

.box .percent svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
}

.box .percent svg circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  fill: none;
  stroke-width: 10;
  stroke: #000;
  transform: translate(5px, 5px);
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  stroke-linecap: round;
}

.box .percent svg circle:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  stroke-dashoffset: 0;
  stroke: #e4dfcc
}

.box .percent svg circle:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  stroke-dashoffset: calc(440 - (440 * 60/ 150));
  stroke: #03aefd
}

.box .percent .number {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #111;
}

.box .percent .number h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 23px;
}

.box .percent .number h2 span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
}

.box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px 0 0;
  color: #999;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 20px;
}
Weiß jemand, wie man das repariert?
HTML, Webseite, CSS, Webdesign
TinyMCE gibt nicht ganzen Inhalt zurück?

Folgender Code.

tinymce.init({
        selector: 'textarea#editor',
        language: 'de',
        menubar: true,
        remove_linebreaks: true,
        menubar: 'edit insert view format table tools',
        toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code',
        forced_root_block: 'p',
        element_format : 'html',
        keep_styles: false,
        width: '100%',
        height: '60vH',
        elementpath: false,
        content_style: '* { border-color: #ced4da!important; }'
    });

Dann in nodeJS:

router.post('/create', (req, res) => {

    console.log(req.body.content)

    return res.send('created')
})

Es fehlt aber immer die hälfte der Eingabe. Ich habe es erstmal über AJAX gemacht und war dann davon ausgegangen, dass es zu lang ist aber es war immer Unterschiedlich lang. Dann habe ich normal ein Form Submit benutzt und es ist immer noch falsch. Wenn ich immer den selben Text benutze fehlt auch das selbe. Woher kommt das? Ich habe dann einfach einmal AJAX benutzt und anstatt direkt in r.send() den Inhalt zu definieren habe ich erst eine Variable definiert und dann auch ausgegeben. Da war wieder alles richtig. Gibt es eine Art Begrenzung die den Text kürzt und wenn ja, wie kann ich sie umgehen?

Computer, Website, Technik, HTML, Programmieren, CSS, Informatik, node.js
Wo ist der Fehler?

Hi. Ich habe anhand einer Antwort einer vorherigen Frage meine Skillbar animiert. Wie es bis jetzt aussieht:

Meine Website

So jetzt mein Problem... eigentlich müsste die Funktion klappen, wenn das Element .skills im Viewpoint ist, wird die Skillbar animiert... Der Code:

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}



window.onload = () => {
    const box = document.querySelector('#versteckt');



    document.addEventListener('scroll', function () {
        if (isInViewport(box)) {
            $('.skill-per').each(function () {
                var $this = $(this);
                var per = $this.attr('per');
                $this.css("width", per + '%');
                $({ animatedValue: 0 }).animate({ animatedValue: per }, {
                    duration: 1000,
                    step: function () {
                        $this.attr('per', Math.floor(this.animatedValue) + '%');
                    },
                    complete: function () {
                        $this.attr('per', Math.floor(this.animatedValue) + '%');
                    }
                });
            });
        }


    });
}

Aber aus irgendeinem Grund funktioniert zwar die Animation, aber die Prozentanzeige über dem Skillbalken bleibt auf 0. Woran liegt das?

Computer, Internet, Website, Schule, HTML, Webseite, Programmieren, CSS, JavaScript, JS, html5
JavaScript erst ausführen wenn in Viewpoint?

Hi, ich habe eine Skillbar, welche animiert wird auf meiner Website. Diese Animation wird per JQuery realisiert.

Der Code der Skillbar:

<div class="skills">
                    <div class="skill">
                        <div class="skill-name">HTML</div>
                        <div class="skill-bar">
                            <div class="skill-per" per="90"></div>
                        </div>
                    </div>
</div>

Das ist jetzt nur ein Skillbalken :)

Hier noch das CSS was aber für die Frage eigentlich unnötig ist:

.skills {
    max-width: 50%;
    margin-top: 6rem;
    margin-left: 25%;
}


.skill-name {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 20px 0;
    color: #fff;
}


.skill-bar {
    height: 20px;
    background: #cacaca;
    border-radius: 8px;
}


.skill-per {
    height: 20px;
    background-color: #0fbcf9;
    border-radius: 8px;
    width: 0;
    transition: 1s linear;
    position: relative;
}


.skill-per::before {
    content: attr(per);
    position: absolute;
    padding: 4px 6px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    top: -35px;
    right: 0;
    transform: translateX(50%);
}


.skill-per::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #000;
    top: -19px;
    right: 0;
    transform: translateX(50%) rotate(45deg);
    border-radius: 2px;
}

und jetzt das wichtige, das js:

$('.skill-per').each(function () {
    var $this = $(this);
    var per = $this.attr('per');
    $this.css("width", per + '%');
    $({ animatedValue: 0 }).animate({ animatedValue: per }, {
        duration: 1000,
        step: function () {
            $this.attr('per', Math.floor(this.animatedValue) + '%');
        },
        complete: function () {
            $this.attr('per', Math.floor(this.animatedValue) + '%');
        }
    });
});

Also nochmal... Ich will dass diese Animation erst ablaufen lassen, wenn das Element .skills im Viewpoint ist. Wie geht das?

Computer, Internet, Website, HTML, Webseite, Programmieren, CSS, JavaScript, JS
HTML: Eingebundene CSS-Datei funktioniert nicht?

Hallo Leute,

ich habe seit heute mit dem Erstellen von Webseiten angefangen. Ich habe mir schon sehr viel dazu angeschaut und bin auch der Meinung, dass ich das meiste schon weiß.

Ich habe also eine HTML-Datei erstellt und wie es auch sein muss in den

<head>...</head>

einen Link zur entsprechenden CSS-Datei eingeführt. Der Link ist auch zu 100% korrekt, sowohl vom Aufbau als auch von der Rechtschreibung (insbesondere der Dateipfad).

Das HTML-Dokument lässt sich auch ganz normal im Internet abrufen, jedoch wird die CSS-Datei nicht ausgeführt (da die Farbe sich nicht verändert).

Es muss also etwas mit dem Link nicht stimmen, da die CSS-Datei auch keine Fehler enthält. Ich habe auch verschiedene Browser probiert.

Fakt ist: Ich habe schon alles probiert, tausendmal über alles drüber geschaut und auch im Internet nach ähnlichen Fehlern gesucht. Jedoch hat alles nicht geholfen.

Hier mein Code:

HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <link href= "style.css" rel= "stylesheet" type= "css/txt" >
    <title>Regenwasser</title>
  </head>
  <body>
    <p><h1>Regenwasser</h1></p>
    <ul>
      <li>s</li>
      <li>l</li>
      <li>o</li>
      <li>l </li>
      <li>p-</li>
      <li>u</li>
      <li>P</li>
      <li>Fi</li>
      <li>Wass</li>
      <li>AQUA</li>
      <li>PLURAF</li>
      <li>AQ</li>
    </ul>
  </body>
</html>

CSS:

p {
  color: red;
}

ul li {
  color: green;
  height: 500px
}

Ich bin daran echt am Verzweifeln und sitze schon locker über zwei Stunden daran.

Computer, HTML, Programmieren, CSS
Warum kann ich die Schriftgröße von dem Button nicht ändern?

HTML:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>


<body>
    <div class="selections">
        <button class="selection" data-selection="rock">✊</button>
        <button class="selection" data-selection="paper">✋</button>
        <button class="selection" data-selection="scissors">✌️</button>
    </div>
    <div class="results">
        <div>
            Du
            <span class="result-score" data-your-score>0</span>
        </div>
        <div data-final-column>
            Computer
            <span class="result-score" data-computer-score>0</span>
        </div>
        <!-- <div class="result-selection winner">✊</div>
    <div class="result-selection">✌</div> -->
    </div>
</body>


</html>

CSS:

body {
    background-color: #CCC;
}


.selections {
    display: flex;
    justify-content: center;
}


.selection {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 2rem;
    transition: 100ms;
}


.selection:hover {
    transform: scale(1.2);
}


.results {
    margin-top: 1rem;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
}


.result-score {
    margin-left: .1rem;
    font-size: .5rem;
    color: #333;
}


.result-selection {
    opacity: .5;
}


.result-selection.winner {
    opacity: 1;
    font-size: 1.5rem;
}


button {
    font-size: 50px;
}
Computer, Technik, HTML, Programmieren, CSS
HTML / CSS | Animationen?

Hallo,

ich möchte nur einen Div container animieren, aber die Animation ( mit Keyframes ) bewegt alles mit, obwohl ich diese nur in einem Div Bereich ausgeführt habe.

Kann mir wer sagen, wie das geht, dass nur die "headline" bewegt wird und die anderen nicht?

Danke im Voraus.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="headline">
            <h1>hi</h1>
        </div>
        <div id="maintext">
            <p>test
            </p>
        </div>
        <script src="scripts.js"></script>
    </body>
</html>

CSS:

body{
    background-color: black;
}


#headline{
    color: white;
    font-weight: bolder;
    font-size: larger;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    border: 2px white solid;
    background-color: red;
    margin-left: 500px;
    margin-right: 500px;
    margin-top: -100px;
    animation: welcomeanimation 2s forwards;
    
}
@keyframes welcomeanimation{
    0%{
        margin-top: -100px;
    }
    100%{
        margin-top: 20%;
    }
}
#maintext{
    text-align: center;
    size: 20px;
    color: white;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

Danke im Voraus.

Computer, HTML, CSS

Meistgelesene Fragen zum Thema CSS