• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] keyframes in animation erstellen

littleHtml Freak

littleHtml Freak

Mitglied
Hallo zusammen,

ich benutze diesen reinen CSS3 Slider. An ihm gefällt mir nicht, dass er nicht mehr als 5 Bilder darstellen kann. Daher möchte ich ihn mit php dynamisieren (tolles Wort). Dazu muss ein Teil des CSS' in einen style-Tag geschrieben und daher zusammengefasst werden.

Dazu ist meine Frage wie ich diesen Teil des CSS'
Code: 
@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}
in diesen Integrieren kann:
Code: 
#slider li.firstanimation {
   animation: cycle 25s linear infinite;
}
dx

ich stelle mir das ungefähr so vor:
Code: 
#slider li.firstanimation {
   animation: @keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}
25s linear infinite;
}
das geht natürlich nicht....

Hat jemand eine Idee??
Gruß Simon
 
Tronjer schrieb:
Wo steht, dass der nur 5 Bilder darstellen kann?


Wie genau möchtest du ihn denn dynamisieren?


Nö, muss es nicht.
Zum Vergrößern anklicken....

Hallo
erstmal vielen Dank für deine Antwort.
Ich kann alles natürlich umschreiben, sodass der Slider auch andere Zahlen von Bildern darstellen kann, allerdings, möchte ich nicht für jeden Slider den ich erstelle neues CSS erstellen.
Somit zu deiner 2. Frage:
Ich habe einen php Skript, der Alle Bilddateien aus einem Ordner liest und in einen Slider packen soll. Das klappt für den html Teil ganz wunderbar und lässt sich prima in meine Seite integrieren. Da aber für jedes Bild die Framerates anders sind, muss ich diese auch an die Anzahl der Bilder, die im Ordner sind anpassen.

So sieht es bisher aus:
index.php
PHP: 
<?php
            $IDofSlider='A';
            $dir = 'slider/images/';
            $animationLength = 5;
            include '/slider/res/slider.php';
        ?>
slider.php
PHP: 
<?php
    $images = scandir($dir);
    $numOfImages = count($images);
    $totalAnimationLength = $numOfImages*$animationLength;
    $keyFramesPerSecond=100/$totalAnimationLength;
           
        for ($i=0; i<$numOfImages ;$i++){
            $nameOfImage=substr($image,0,strlen($image)-4);
               
            echo '
                <li id="slide'.$IDofSlider.'image'.$i.'" style="
                                                                -moz-animation:cyclefive 25s linear infinite;
                                                                -webkit-animation:cyclefive 25s linear infinite;
                                                                ">
                <a href="#">
                    <img src="' . $dir . $image . '" alt="' . $image . '"/>
                </a>
                <div class="tooltip">
                    <h1>' . $nameOfImage . '</h1>
                </div>
                </li>';
        }
 
Falls die Variable sich auf auf wenige Möglichkeiten beschränkt (bsw. 5, 6, 10) könnte man jeweils eigene Klassen im Stylesheet festlegen, und diese mit der Ausgabe der Listenelemente rendern. Alternativ dazu einen Style-Container im Head der Seite einfügen und dort das für den Slider notwendige CSS mit PHP Variablen einbauen.

Ich würde allerdings bei einer variablen Anzahl von Bildern keinen Slider verwenden, der eine festgelegte Anzahl von Elementen erwartet. Gibt doch genügend jQuery Plugins für diese Aufgabe.
 
es gibt also keine Möglichkeit, das zu realisieren?
JQuery kann das evtl. besser aber, dann müsste ich mich da wieder reinarbeiten....

sonst schon ein Mal danke für deine Hilfe
 
Ich hatte dir Alternativen per dynamischem CSS genannt, aber ohne JS wirst du bei modernen Webseiten zwangsläufig in Sackgassen laufen.
 
So nach einigem hin und her habe ich es jetzt doch noch mit php hinbekommen.
Die Lösung ist sicherlich nicht so schön, es funktioniert aber. Vielleicht interessiert es ja irgendwann noch ein Mal jemanden.
Es besteht sicherlich beim Auslesen der Bilder noch Optimierungspotential.
PHP: 
<?php
    $images = scandir($dir);
    $numOfImages = count($images)-2;
    $totalAnimationLength = $numOfImages*$animationLength;
    $keyFramesPerSecond=100/$totalAnimationLength;
    $keyFramesPerAnimation=100/$numOfImages;
    $i=0;
  
        foreach ($images as $image){
            if($image=='.' || $image=='..'){
                continue;
            }
            $nameOfImage=substr($image,0,strlen($image)-4);
          
            switch($i){
                //first element
                case 0:
                    $tmp=$keyFramesPerAnimation - $keyFramesPerSecond;
                    echo '
                        <style type="text/css">
                            @-moz-keyframes cycle' . $IDofSlider . $i .' {
                                0%                                                  { top:0px; }
                                '. $keyFramesPerSecond                          .'% { top:0px; }
                                '. $tmp                                         .'% { top:0px; opacity:1; z-index:0; }
                                '. $keyFramesPerAnimation                       .'% { top:325px; opacity:0; z-index:0; }
                                '. ($keyFramesPerAnimation + 1)                 .'% { top:-325px; opacity:0; z-index:-1; }
                                '. (100 - (2 * $keyFramesPerSecond))            .'% { top:-325px; opacity:0; z-index:0; }
                                '. (100 - (1 * $keyFramesPerSecond))            .'% { top:-325px; opacity:0; }
                                100%                                                { top:0px; opacity:1; }
                            }
                            @-webkit-keyframes cycle'.$IDofSlider.$i.' {
                                0%                                                  { top:0px; }
                                '. $keyFramesPerSecond                          .'% { top:0px; }
                                '. $tmp                                         .'% { top:0px; opacity:1; z-index:0; }
                                '. $keyFramesPerAnimation                       .'% { top:325px; opacity:0; z-index:0; }
                                '. ($keyFramesPerAnimation + 1)                 .'% { top:-325px; opacity:0; z-index:-1; }
                                '. (100 - (2 * $keyFramesPerSecond))            .'% { top:-325px; opacity:0; z-index:0; }
                                '. (100 - (1 * $keyFramesPerSecond))            .'% { top:-325px; opacity:0; }
                                100%                                                { top:0px; opacity:1; }
                            }
                        </style>';
                    break;
                //last element
                case ($numOfImages-1):
                    $tmp=100-$keyFramesPerAnimation-$keyFramesPerSecond;
                    $tmp1=100-$keyFramesPerAnimation+$keyFramesPerSecond;
                    echo '
                        <style type="text/css">
                            @-moz-keyframes cycle'.$IDofSlider.$i.' {
                                0%                                  { top:-325px; opacity:0; }
                                '. $tmp                         .'% { top:-325px; opacity:0; }
                                '. (100-$keyFramesPerAnimation) .'% { top:0px; opacity:1; }
                                '. $tmp1                        .'% { top:0px; opacity:1; }
                                '. (100-$keyFramesPerSecond)    .'% { top:0px; opacity:1; z-index:0; }
                                100%                                { top:325px; opacity:0; z-index:0; }
                            }
                            @-webkit-keyframes cycle'.$IDofSlider.$i.' {
                                0%                                  { top:-325px; opacity:0; }
                                '. $tmp                         .'% { top:-325px; opacity:0; }
                                '. (100-$keyFramesPerAnimation) .'% { top:0px; opacity:1; }
                                '. $tmp1                        .'% { top:0px; opacity:1; }
                                '. (100-$keyFramesPerSecond)    .'% { top:0px; opacity:1; z-index:0; }
                                100%                                { top:325px; opacity:0; z-index:0; }
                            }
                        </style>';
                    break;
                //all other elements
                default :
                    $tmp=$i*$keyFramesPerAnimation-$keyFramesPerSecond;
                    $tmp1=$i*$keyFramesPerAnimation;
                    $tmp2=$i*$keyFramesPerAnimation+$keyFramesPerSecond;
                    $tmp3=($i+1)*$keyFramesPerAnimation-$keyFramesPerSecond;
                    $tmp4=($i+1)*$keyFramesPerAnimation;
                    $tmp5=($i+1)*$keyFramesPerAnimation+$keyFramesPerSecond+1;
                    echo '
                        <style type="text/css">
                            @-moz-keyframes cycle'.$IDofSlider.$i.' {
                                0%                                  { top:-325px; opacity:0; }
                                '. $tmp                         .'% { top:-325px; opacity:0; }
                                '. $tmp1                        .'% { top:0px; opacity:1; }
                                '. $tmp2                        .'% { top:0px; opacity:1; }
                                '. $tmp3                        .'% { top:0px; opacity:1; z-index:0; }
                                '. $tmp4                        .'% { top:325px; opacity:0; z-index:0; }
                                '. $tmp5                        .'% { top:-325px; opacity:0; z-index:-1; }
                                                               100% { top:-325px; opacity:0; z-index:-1; }
                            }
                            @-webkit-keyframes cycle'.$IDofSlider.$i.' {
                                0%                                  { top:-325px; opacity:0; }
                                '. $tmp                         .'% { top:-325px; opacity:0; }
                                '. $tmp1                        .'% { top:0px; opacity:1; }
                                '. $tmp2                        .'% { top:0px; opacity:1; }
                                '. $tmp3                        .'% { top:0px; opacity:1; z-index:0; }
                                '. $tmp4                        .'% { top:325px; opacity:0; z-index:0; }
                                '. $tmp5                        .'% { top:-325px; opacity:0; z-index:-1; }
                                                               100% { top:-325px; opacity:0; z-index:-1; }
                            }
                        </style>';
            }

            echo '
                <li id="slide'.$IDofSlider.'image'.$i.'" style="
                                                                -moz-animation:cycle'.$IDofSlider.$i.' '.$totalAnimationLength.'s linear infinite;
                                                                -webkit-animation:cycle'.$IDofSlider.$i.' '.$totalAnimationLength.'s linear infinite;
                                                                ">
                <a href="#">
                    <img src="' . $dir . $image . '" alt="' . $image . '"/>
                </a>
                <div class="tooltip">
                    <h1>' . $nameOfImage . '</h1>
                </div>
                </li>';
          
            $i++;
        }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben