Diahow, Animation

**danyx** · 19.10.16, 15:01

Hallo,
ich versuche hier gerade eine Art Diashow zu erstellen,
und auch wenn es sich so einfach anhört,
bekomme ich es leider nicht hin

Also ich habe mehrere jpg's die in einem Abstand von etwa 2-3s hintereinander abgespielt werden sollen.

Ich habe es mit Gimp und Blender versucht,
das Problem:

Ich kann hier nur eine minimale Framerate von 1fps erstellen,

bedeutet, daß wenn ich es als Video rendere, aus 10 Bildern 30 gemacht werden,
was ja eigentlich überflüssig ist,und da es dann später im Web landen soll,
auch die Dateigrösse um das dreifache erhöhen würde.

Naja, Blender hat viele Einstellungen, vielleicht habe ich die richtige noch nicht gefunden, oder gibt für solche Zwecke ein geeigneteres Programm?
Oder liegt das Problem letztlich am Format?

Mfg d

**Dukel** · 19.10.16, 15:11

Wieso Blender? Das ist eine 3d Software.

http://www.linux-magazine.com/Online...th-ImageMagick
https://thanosk.net/content/create-animated-gif-linux

**nopes** · 19.10.16, 15:12

Schmeißt den ganz Binär-Kack weg, nehmt HTML.
Passende Beispiele findet ihr hier: http://www.w3schools.com/w3css/w3css_slideshow.asp

Großer Vorteil funktioniert auf allen Geräten die einen halbwegs aktuellen Browser haben.

**BetterWorld** · 19.10.16, 15:14

Ein Video ist etwas anderes, als eine Diashow.
Dir fehlt wohl tatsächlich das Diahow.
Guckst du hier.
Und es gibt -logisch- noch viel mehr. Selbst jquery-ui bietet sowas, oder hier.

**danyx** · 19.10.16, 15:46

@Dukel

das sind GIFs und von der Quali unbrauchbar...

und mit Html / js ist das ein ganz schönes gefrickel,

meine Seite wird dynamisch skaliert, und die meisten Css/HTML/JS Sachen basieren auf absoluten Werten....

Oder geht es irgendwie dass ich diese:

#cf3 img
{position: absolute; top: 0; width: 100%; }

<div id="cf3" class="cell">
<img class="bottom one" src="heada1.jpg" />
<img class="middle two" src="heada2.jpg" />
<img class="top three" src="heada3.jpg" />
</div>

<div id="cf4">
übereinanderlegen kann ( mit Position: relative)

Oder ich eine Art Wrapper-Box drumlegen kann,... weiss nicht genau wie ich das jetzt ausdrücken soll..
so daß "cf4" tatsächlich erst unter "cf3" dargestellt wird?

Mfg d

**marce** · 19.10.16, 16:06

oder "einfach" so:
https://trac.ffmpeg.org/wiki/Create%...0from%20images

Wenn man mehr über das genaue Ziel erfahren würde gab's sicher auch noch andere Möglichkeiten - z.B. bietet eigentlich jeder Bildschirmschoner die Option, Slideshows aus Bilder-im-Ordner-XY abzufeuern. Oder div. Medienserver. Oder ein Shell-Script, welches nur den Desktop-Hintergrund ändert. Oder einen Picture-Viewer startet, ...

Kommt halt immer drauf an, was die optimale Variante ist.

**nopes** · 19.10.16, 16:06

Also skalieren tun die Beispiele von der w3school, warum nicht einfach deren zeug übernehmen? Die CSS ist jetzt nicht übertrieben groß, aber da könnte man natürlich die relevanten Stellen herausziehen und anpassen. Oder ich verstehe das Problem doch nicht so genau...

**danyx** · 19.10.16, 18:23

Ok, getestet,
also mit ffmpeg und viel gefrickel kriegt man ganz gute Ergebnisse,
Mit JS wäre auch möglich, bei kleineren Animationen.

Ist aber alles noch recht unflexibel..aber was soll man machen...

**nopes** · 19.10.16, 18:25

Script welches die HTML Datei generiert, oder halt alternativ den ffmpeg cmd zusammen stellt, oder halt doch so ein Binärklotz ala Impress oder whatever

**BetterWorld** · 19.10.16, 19:23

Wenn ich das recht verstanden habe,

da es dann später im Web landen soll,

sind die für dich böhmischen CSS Galerien das, was du suchst. Und die skalieren besser, als dein ffmpeg Gepfrimmel.

**danyx** · 20.10.16, 10:15

ja, css wäre am Besten,
damit kann man sogar jpg's überblenden,
aber geht es denn auch ohne absolut positionierte Images?

**nopes** · 20.10.16, 13:44

ja, hast du dir die Beispiele mal angesehen, denke eher nicht, falls doch welche Zeile stört dich?

Code:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content" style="max-width:800px;position:relative">
  <img class="mySlides" src="img_fjords.jpg" style="width:100%">
  <img class="mySlides" src="img_lights.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="img_forest.jpg" style="width:100%">

  <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
  <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>

</body>
</html>

**BetterWorld** · 20.10.16, 13:54

@fork: Na, das Wort "absolute". Is doch klar. Is halt kein Absolutist, sondern Demokrat.

Du hast zwei (sinnvolle) Möglichkeiten:

Lerne CSS, Javascript und HTML und mach es einfach selber.
Nimm eine fertige für's Web extra programmierte Galerie -egal ob jquery-ui, halligalli oder sonstwas; es gibt unzählige- installiere die einfach. Und gut. Dann nicht mehr auf HTML- Resultat gucken. Und wenn doch, das ein- oder andere "absolute" geflissentlich ignorieren, oder zurück zu Punkt 1.

**danyx** · 20.10.16, 14:36

"absolute" , genau das ist das Problem, das zerschiesst mein Layout.

Aber ich brauche kein Html, js , Css lernen, wenn es dann am Ende keine (sinnvolle) Lösung gibt

Mit Css und absoluten Image Angaben, kann man aus 3 Bildern eine 6 s Animation mit fading machen,
mit js bräuchte man 18,
da bin ich mit dem ffmpeg wesentlich besser dran, und es skaliert auch einwandfrei.

Also ich lass es lieber so.. mfg d

**BetterWorld** · 20.10.16, 16:03

Nu ja, wenn du es lernen würdest, würde "dein Layout" auch nicht zerstört werden.
Stell dir doch mal die Frage, warum so viele Galeriescripte ohne Probleme auf zigtausenden von Webservern "kein Layout zerreißen".

Könnte das nicht einfach daran liegen, dass dein Layout nicht so wirklich "richtig" ist?