Bild auf HP animieren

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von elmar.s, 29.05.2015.

  1. #1 elmar.s, 29.05.2015
    elmar.s

    elmar.s Neuer Benutzer

    Dabei seit:
    29.05.2015
    Beiträge:
    4
    Zustimmungen:
    0
    Hi!

    Es kann doch eigentlich nicht so schwer sein... Ich möchte für eine Homepage eine Intro mit einer drehenden CD haben, von der ich auch Musik höre. Ich habe das Bild und die Musik. Soweit - so gut.

    Wie kann ich das Bild animieren? Für Gifs brauche ich unendlich viele Bilder, damit das flüssig läuft. Flash soll ja auslaufen und kostet wohl auch was. Mit dem Google-Webdesigner kriege ich die CD zum Drehen, aber keine Musik rein.
    Das kann doch nicht ein so komplizierter Befehl sein, mit Java oder was auch immer ein Bild zu drehen?ld
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 BooWseR, 29.05.2015
    BooWseR

    BooWseR Erfahrener Benutzer

    Dabei seit:
    08.11.2011
    Beiträge:
    742
    Zustimmungen:
    6
    Ort:
    Deutschland
    Java kannst du vergessen, das läuft demnächst auch aus und wird vom Browser nicht mehr unterstützt. Alternativ würde noch Javascript übrig bleiben, aber damit könntest du auch wieder nur ein .gif einbetten, was die ganze Geschichte recht sinnfrei macht.

    Für dein Vorhaben würde ich aber tatsächlich .gifs nehmen, wobei mir nicht so klar ist, wie das aussehen soll. Reicht nicht einfach ein CD Ikon, welches mit 4-5 Bildern eine Drehung andeutet? Oder soll das mit Cover in 400ppi in 800p dargestellt werden? Dann wird das natürlich sehr groß und du brauchst viele Bilder.

    Warum muss denn Bild und Musik in eine Datei? Kannst du nicht einfach ein .gif einbetten und im Hintergrund Musik? Problem könnte jedoch sein, dass viele Browser den "Autoplay" von Musik unterbinden, so war es zumindest damals bei mir. Als Alternative könntest du natürlich auch ein Video erstellen, mit einer sich drehenden CD und im Hintergrund die Musik, so hättest du beides zusammen.
     
  4. #3 xandros, 29.05.2015
    xandros

    xandros IT Consultant, Cisco Registered Partner
    Moderator

    Dabei seit:
    05.07.2007
    Beiträge:
    25.887
    Zustimmungen:
    91
    Ort:
    Umkreis Duisburg, neben Mannheim, hinter Hamburg
    Was ja auch Sinn macht. Wenn ich eine Webseite aufrufe und ungefragt Musik abgespielt wird, war ich das erste und gleichzeitig das letzte Mal auf der Seite - zmindest solange ich als User nicht entscheiden darf, ob ich die Musik ein- oder ausschalten will.
    Mal ein Stück weiter überlegt..... jubelt man einem User nun Audiodateien ungefragt unter und der User ist über eine recht schlechte/langsame (vielleicht sogar mobile) Datenverbindung auf der Seite, dann dauert der Transfer einfach zu lange und die Seite wird nicht wirklich nutzbar. Den Einfluss auf Suchmaschinen braucht man da dann nicht mal mehr betrachten.

    btw: Audiodateien bettet man in html5 via audio-Tag ein
    Beispiel:
    Code:
    <audio controls="controls">
    <source src="musik.ogg" type="audio/ogg" />
    <source src="musik.mp3" type="audio/mpeg" />
    
    Sorry - Ihre Browser hat keine Unterstützung für dieses Audio-Format.
    </audio>
    Der Audio-Tag wird ab IE9 unterstützt. Sollen frühere Versionen auf der Seite funktionieren, muss man ein Fallback anbieten.
    Ab FF21 ist es auch bei Mozilla möglich, auf das OGG-Vorbis Format zu verzichten, da mittlerweile MP3 anständig unterstützt wird. Dadurch erspart man sich sogar das konvertieren einer MP3 in das OGG-Format und der Code kann sich inkl. Fallback für IE älter als 9 auf drei Zeilen verkürzen.
    Code:
    <audio src="musik.mp3" controls >
    <a href ="musik.mp3">Fallback für IE < 9</a>
    </audio>
    ... Dafür ist also weder Java, Javascript noch Flash notwendig.
     
  5. #4 elmar.s, 30.05.2015
    elmar.s

    elmar.s Neuer Benutzer

    Dabei seit:
    29.05.2015
    Beiträge:
    4
    Zustimmungen:
    0
    Als Ikon ist das ja etwas mickrig. Ich denke da schon an CD-Größe



    QUOTE="BooWseR, post: 994100, member: 53638"] Warum muss denn Bild und Musik in eine Datei? Kannst du nicht einfach ein .gif einbetten und im Hintergrund Musik? Problem könnte jedoch sein, dass viele Browser den "Autoplay" von Musik unterbinden, so war es zumindest damals bei mir. Als Alternative könntest du natürlich auch ein Video erstellen, mit einer sich drehenden CD und im Hintergrund die Musik, so hättest du beides zusammen.[/QUOTE]

    Die Idee mit dem Video ist nicht schlecht. Soll ja nur eine Intro-Seite für eine Band sein, die eine neue CD präsentiert. Da bietet sich ein kurzer Musikeinspielen an.
    Aber das waren gute Denkanstöße.

    Ich hab versucht, in den Code vom Google-Webdesigner andere Codes unterzubringen. Hat aber nicht geklappt. Vielleicht falsche Stelle?

    Ich lade den Code mal hoch.
     
  6. #5 elmar.s, 30.05.2015
    elmar.s

    elmar.s Neuer Benutzer

    Dabei seit:
    29.05.2015
    Beiträge:
    4
    Zustimmungen:
    0
    Code:
    <!DOCTYPE html>
    <html><head data-gwd-animation-mode="proMode"><meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJle26cf9f8594006c469991639553dcbe3"/>
      <title>CD</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="generator" content="Google Web Designer 1.3.0.0410">
      <style type="text/css">html,
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    body {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -webkit-perspective: 1400px;
        -moz-perspective: 1400px;
        perspective: 1400px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        background-color: transparent;
    }
    .gwd-img-hki8 {
        position: absolute;
        width: 974px;
        height: 996px;
        left: 2px;
        top: 2.57142857142878px;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    @-webkit-keyframes gwd-gen-wzddgwdanimation_gwd-keyframes {
        0% {
            -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
        12.5% {
            -webkit-transform: matrix3d(0.7071067812, 0.7071067812, 0, 0, -0.7071067812, 0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
        25% {
            -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
        37.5% {
            -webkit-transform: matrix3d(-0.7071067812, 0.7071067812, 0, 0, -0.7071067812, -0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
        50% {
            -webkit-transform: matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
        62.5% {
            -webkit-transform: matrix3d(-0.7071067812, -0.7071067812, 0, 0, 0.7071067812, -0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
        75% {
            -webkit-transform: matrix3d(0, -1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
        87.5% {
            -webkit-transform: matrix3d(0.7071067812, -0.7071067812, 0, 0, 0.7071067812, 0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
        100% {
            -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -webkit-animation-timing-function: linear;
        }
    }
    @-moz-keyframes gwd-gen-wzddgwdanimation_gwd-keyframes {
        0% {
            -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
        12.5% {
            -moz-transform: matrix3d(0.7071067812, 0.7071067812, 0, 0, -0.7071067812, 0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
        25% {
            -moz-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
        37.5% {
            -moz-transform: matrix3d(-0.7071067812, 0.7071067812, 0, 0, -0.7071067812, -0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
        50% {
            -moz-transform: matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
        62.5% {
            -moz-transform: matrix3d(-0.7071067812, -0.7071067812, 0, 0, 0.7071067812, -0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
        75% {
            -moz-transform: matrix3d(0, -1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
        87.5% {
            -moz-transform: matrix3d(0.7071067812, -0.7071067812, 0, 0, 0.7071067812, 0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
        100% {
            -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            -moz-animation-timing-function: linear;
        }
    }
    @keyframes gwd-gen-wzddgwdanimation_gwd-keyframes {
        0% {
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
        12.5% {
            transform: matrix3d(0.7071067812, 0.7071067812, 0, 0, -0.7071067812, 0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
        25% {
            transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
        37.5% {
            transform: matrix3d(-0.7071067812, 0.7071067812, 0, 0, -0.7071067812, -0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
        50% {
            transform: matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
        62.5% {
            transform: matrix3d(-0.7071067812, -0.7071067812, 0, 0, 0.7071067812, -0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
        75% {
            transform: matrix3d(0, -1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
        87.5% {
            transform: matrix3d(0.7071067812, -0.7071067812, 0, 0, 0.7071067812, 0.7071067812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
        100% {
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            animation-timing-function: linear;
        }
    }
    body .gwd-gen-wzddgwdanimation {
        -webkit-animation: gwd-gen-wzddgwdanimation_gwd-keyframes 4s linear 0s 1 normal forwards;
        -moz-animation: gwd-gen-wzddgwdanimation_gwd-keyframes 4s linear 0s 1 normal forwards;
        animation: gwd-gen-wzddgwdanimation_gwd-keyframes 4s linear 0s 1 normal forwards;
    }</style>
    </head>
    
    <body>
    <body bgcolor="yellow">
      <img src="UBB-CD_gelb_2.jpg" class="gwd-img-hki8 gwd-gen-wzddgwdanimation">
    
    
    </body></html>
    
     
  7. #6 xandros, 30.05.2015
    xandros

    xandros IT Consultant, Cisco Registered Partner
    Moderator

    Dabei seit:
    05.07.2007
    Beiträge:
    25.887
    Zustimmungen:
    91
    Ort:
    Umkreis Duisburg, neben Mannheim, hinter Hamburg
    Code:
    <body> <-- Das ist zuviel!
    <body bgcolor="yellow">
    <img src="UBB-CD_gelb_2.jpg" class="gwd-img-hki8 gwd-gen-wzddgwdanimation">
    
    <!-- und hier kommt deine Audioeinbindung rein -->
    <audio...>
    ...
    </audio>
    
    </body></html>
     
    elmar.s gefällt das.
  8. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  9. #7 elmar.s, 30.05.2015
    elmar.s

    elmar.s Neuer Benutzer

    Dabei seit:
    29.05.2015
    Beiträge:
    4
    Zustimmungen:
    0
    :) Danke! Werde ich später mal ausprobieren.
     
  10. #8 Zagrebelnyy, 06.06.2015
    Zagrebelnyy

    Zagrebelnyy Neuer Benutzer

    Dabei seit:
    06.06.2015
    Beiträge:
    3
    Zustimmungen:
    0
    Ort:
    Halle (Salle)
    Hallo an Alle) Hallo elmar.s
    Du kanst ein Paar Videos hinzufügen) Ich habe meinen Blog hier erstellt
    http://www.templatemonster.com/de/
    Und ich kann Musik, Video und andere Kontent einfügen. Das ist ziemlich einfach.
    Viel Erfolg an dir)
    :):):)
     
Thema:

Bild auf HP animieren

Die Seite wird geladen...

Bild auf HP animieren - Ähnliche Themen

  1. Fritz 7412 als Repeater und Faxanschluss (HP Laserjet)

    Fritz 7412 als Repeater und Faxanschluss (HP Laserjet): Hallo Leuts, Habe mir einen neuen Drucker zugelegt. Nun ein Multi-Laser mit Fax... Leider steht der in einem Bereich, in diesem dass man das...
  2. Bild vom PC mit DVD-Recorder aufnehmen

    Bild vom PC mit DVD-Recorder aufnehmen: Hallo. Ich such nen Weg, evtl. Games und vor allem Videos vom PC auf nen DVD-Recorder zu übertragen und dort auf zu nehmen. Am besten wär wohl...
  3. Verzogenes Bild

    Verzogenes Bild: Hallo zusammen, ich habe zwei Bildschirme (beide funktionieren auch einwandfrei). Der Pc startet auch so wie immer, nur dass das Bild deutlich...
  4. Facebook Bilder hochladen

    Facebook Bilder hochladen: Hall allerseits, ich weiß jetzt nicht, ob die Rubrik passt, deswegen stell ich mein Problem mal hier ein. Seit ein paar Wochen kann ich keine...
  5. PC startet, jedoch kein Bild - Error Code 15

    PC startet, jedoch kein Bild - Error Code 15: Guten Abend, Ich habe ein mühsames Problem: Seit einiger Zeit hat mein PC die Make, dass er 2-3 anläufe braucht bis er anspringt (Wie ein...