Beiträge von Sempervivum

PS: Die Scrollbalken verschwinden, wenn man in dem eingebetteten Fiddle das position:absolute für #grad weg nimmt.

Schau mal, ob dies besser ist:

https://jsfiddle.net/jutxeh99/3/

Zitat

ich glaube ich werde mal die ganze woche nur was überflex boxen lesen,weil denke damit sollte es doch prima gehen

Das ist sicher ein guter Plan. Meine Erfahrung ist auch, dass damit vieles einfach ist, was sonst Probleme macht.

Nicht so schnell aufgeben!

Zu dem Fiddle aus #11: Wie möchtest Du es denn haben? Du schreibst:

Zitat

verschiebt sich der iframe unter den footer

Nebeneinander? Dafür ist doch gar nicht genug Platz. "Footer Laufschrift" ist zwar irreführend aber im HTML ist es #mittekopf und das passt zu dem Bild im Ergebnis: Kopf über Inhalt.

Edit: Habe dich leider falsch verstanden. Du meinst die Tatsache, dass der iFrame vom Footer überdeckt wird. Ich sehe es mir an ...

Auch von mir ein frohes neues Jahr!

Jetzt weiß ich leider nicht, was sich hinter diesem zw verbirgt.

Ich habe jedoch mal einen Test gemacht, und dies funktioniert:

<table>
        <tr>
            <td id="bl0" onclick="hitColor('bl0')"></td>
            <td id="bl1" onclick="hitColor('bl1')"></td>
            <td id="bl2" onclick="hitColor('bl2')"></td>
        </tr>
     </table>
     <button onclick="ZeigNeueBilder();">Rücksetzen</button>
     <script>
        var images = {};
        images.img1 = new Image();
        images.img2 = new Image();
        images.img3 = new Image();


        images.img1.src = "images/dia0.jpg";
        images.img2.src = "images/dia1.jpg";
        images.img3.src = "images/dia2.jpg";

        anzahlBilder = 3;
        function ZeigNeueBilder() {
            for (var i = 0; i <= anzahlBilder - 1; i++) {
                var cell = document.getElementById('bl' + i);
                var chld = cell.childNodes[0];
                var im = images['img' + (i + 1)];
                if (chld) {
                    chld.src = cell.getAttribute("data-src");
                } else {
                    cell.setAttribute("data-src", im.src)
                    cell.appendChild(im);
                }
            }
        }
        ZeigNeueBilder();
        
        function hitColor(blink) {
            document.getElementById(blink).childNodes[0].src = "images/01.png";
        }

        </script>

Versuch mal, ob Du es auf deine Umgebung übertragen kannst.

Ups, da ist mir ein Fehler unterlaufen. So müsste es besser sein:

function zurueck() {
    for (var i = 0; i <= anzahlBilder-1; i++) {
        document.querySelector('#bl' +zw[i] + ' img').src = images['img' + (i+1)].src;
    }
}

Ich würde einfach eine weitere Funktion nehmen, die den alten Zustand wieder herstellt:

function zurueck() {
    for (var i = 0; i <= anzahlBilder-1; i++) {
        document.querySelector('bl' +zw[i] + ' img').src = images['img' + (i+1)].src;
    }
}

Oder noch besser, die img-Tags gleich im HTML anlegen und nur das src-Attribut ändern.

Der Kern der Sache war, dass ich "#grad p" animiert statt "#grad", die Breite auf 800% gesetzt und die Position verschoben wie Du im HTML-Fenster siehst. display:inline-block ist nur, um die Buchstaben nebeneinander anzuordnen, display:flex für #grad wäre wahrscheinlich genau so gut gewesen.

Eine Alternative wäre, die PDF-Dateien nicht zu konvertieren sondern direkt anzuzeigen. Ich habe vor einiger Zeit mit pdf.js einen Betrachter geschrieben:

http://webentwicklung.ulrichbangert.de/pdfjs-ajax-2.html

Die doc-Dateien kannst Du ja problemlos nach PDF konvertieren.

Das funktioniert nur für den Text, der sich direkt in dem Element befindet, wo auch der Gradient liegt:

https://jsfiddle.net/kuobmwyc/1/

Dieses funktioniert auch, ist aber leider nicht genau das, was Du dir vorstellst:

https://jsfiddle.net/kuobmwyc/2/

Edit: Möglicher Weise so:

https://jsfiddle.net/kuobmwyc/3/

background ist eine Sammeleigenschaft für alle Hintergrundeigenschaften und schließt clip, position, size etc. ein. Setzt Du nur einen Gradienten werden alle anderen Eigenschaften wie clip gelöscht.

https://wiki.selfhtml.org/wiki/CSS/Eigen…ben_und_-bilder

Ist ja krass!

Offenbar funktionieren background-clip und text-fill-color nicht in einer Animation. Du kannst aber gezielt den Gradienten ändern, wenn Du background-imgage animierst, dann bleiben die anderen Eigenschaften erhalten:

https://jsfiddle.net/vk1up16y/1/

Wenn man Bilder als Hintergrund einbindet, hat man immer Probleme, sie responsiv zu machen, weil sich der Container nicht an ihre Größe anpasst. Ich empfehle, sie besser als img-Elemente einzubinden, dann geht es besser:

https://jsfiddle.net/jf9tu9vh/4/

Noch nicht ganz perfekt, aber ich wollte vor allem demonstrieren, wie man die Bilder ohne Verzerrung responsiv machen kann.

Bei deinem fiel mir auf, dass es zunächst mit time=50 flüssig lief, aber dann immer langsamer wurde. In der Console sah man, dass die Ausgaben für die Nase immer mehr wurden, bis zu über 100 auf einmal. Richtig bin ich nicht durchgestiegen, aber ich habe es mal so geändert:

https://jsfiddle.net/Sempervivum/2wjdgL9t/

und dann läuft es mit time=50 dauerhaft flüssig.

Um zu demonstrieren, dass die Verwendung einer Bibliothek Vorteile bringt, habe ich die Haare mal mit einer Schleife zum Mund hinzu gefügt und animiert:

https://jsfiddle.net/Sempervivum/xuowurje/18/

Dabei habe ich festgestellt, dass jCanvas doch nicht so das Wahre ist, denn wenn man eine Bezierkurve einmal fest gelegt hat, ist es sehr umständlich, sie zu verändern. Daher bin ich auch von meiner Empfehlung abgewichen, nur ein Canvas zu verwende.

Eine Zeitangabe brauchst Du dabei nicht, weil der Browser festlegt, wann die Funktion aufgerufen wird:

https://wiki.selfhtml.org/wiki/JavaScrip…tAnimationFrame

Zitat

Der Browser sorgt dafür, dass die Funktion nicht öfter aufgerufen wird, als der Bildschirm das Bild neu zeichnen kann (üblicherweise 60 bis 75 Bilder pro Sekunde).

Die Schnelligkeit stellst Du ein, indem Du die Änderung der Parameter entspr. festlegst.

Möglichkeiten zur Optimierung:

• Nur ein Canvas / ein SVG verwenden, Du kannst darin mehrere Objekte zeichnen
• setInterval statt setTimeout verwenden
• oder noch besser: requestAnimationFrame verwenden
• Eine Bibliothek verwenden, die Animationen unterstützt, wie jCanvas für Canvas und svg.js für SVG

Mund mit SVG und d3.js:
https://jsfiddle.net/Sempervivum/a19kn68p/

Code etwas länger als mit jCanvas aber man braucht viel weniger Punkte aufzunehmen,

Siehe hier:

http://wiki.selfhtml.org/wiki/HTML/Mult…_Grafiken/audio

<audio src="audio/Intro.mp3" autoplay loop autoplay volume="0.5" >
Sorry - Ihre Browser hat keine Unterstützung für dieses Audio-Format.
</audio>

Heute wird das MP3-Format ausreichend unterstützt:

https://caniuse.com/#feat=mp3

Offenbar gibt es z-index auch bei SVG:

https://www.w3.org/TR/SVG2/render.html#ZIndexProperty