Hier ist ein kleines Plugin, mit dem man CSS3 Animationen in einem Post anzeigen kann.
Als Vorbemerkung: es geht hier nicht um das Pro und Contra von CSS3 Animationen und auch nicht darum, auf welchem Browser welche Animation läuft.
sondern nur ganz schlicht darum:
Ihr habt eine euch gefallende CSS3 Animation gefunden (gestohlen, ausgeliehen, …) und möchtet sie in einem eurer Posts der Welt präsentieren.
Das Plugin
css3_plugin.php:
<?php
/*
Plugin Name: css3_plugin
Plugin URI: http://www.it-in-a-box.com/
Description: Fügt CSS3 Animation in single-post ein
Author: Norbert Felgendreher
Version: 1.0
Author URI: http://www.it-in-a-box.com/
*/
if ( !class_exists('Css3_in_post') ) {
class Css3_in_post {
function Css3_in_post() {
add_action('wp_print_styles', array (&$this, 'my_styles_css'));
add_action('wp_print_scripts', array (&$this,'my_scripts_css'));
}
function my_scripts_css() {
if (!is_single(*** hier kommt die ID eures Posts hinein ***)) return;
wp_register_script('css3_animation_js', WP_PLUGIN_URL.'/css3_plugin/js/css3.js', array('jquery'),false,true);
wp_enqueue_script('css3_animation_js');
}
function my_styles_css() {
if (!is_single(*** hier kommt die ID eures Posts hinein ***)) return;
wp_register_style('css3_animation_css',WP_PLUGIN_URL.'/css3_plugin/css/css3.css');
wp_enqueue_style('css3_animation_css');
}
} // End Class
$Css3_in_post = new Css3_in_post();
}
?>
Also: Post verfassen, PostID herausfinden, Plugin editieren und installieren.
Das ginge alles noch viel einfacher, klar, aber dies ist schliesslich kein kommerzielles Plugin.
css3.css
ist etwas länglich. Dafür gibt es hier zwei Animationen. Die eine habt ihr schon gesehen, wenn ihr einen zu HTML5 kompatiblen Browser habt, die andere seht ihr, wenn ihr auf den Blogtitel klickt.
Geht nicht in Chrome (Warum? Ich weiss es nicht! )
@keyframes wheel{
0%{
opacity:0.2;
left:2px;
transform:scale(1) rotate(0deg);
}
100%{
left: 600px;
opacity:1;
transform:scale(2) rotate(2000deg);
}
}
@-webkit-keyframes wheel{
0%{
opacity:0.2;
left:2px;
-webkit-transform:scale(1) rotate(0deg);
}
100%{
left: 800px;
opacity:1;
-webkit-transform:scale(2) rotate(2000deg);
}
}
@keyframes jump{
0%{
transform:translate(0px,0px);
}
25% {
transform:translate(20px,30px);
color: red;
}
50%{
transform:translate(50px,100px);
color: blue;
}
100% {
transform:translate(100px,80px);
color: yellow;
}
}
@-webkit-keyframes jump{
0%{
transform:translate(0px,0px);
}
25% {
transform:translate(20px,30px);
}
50%{
transform:translate(50px,100px);
}
100% {
transform:translate(100px,80px);
}
}
.animate_me0 {
animation: jump 5s ease-in-out 1 normal;
-webkit-animation: jump 5s ease-in-out 1 normal;
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.animate_me1 {
animation: wheel 5s ease-in-out 1 reverse;
-webkit-animation: wheel 5s ease-in-out 1 reverse;
animation-play-state: running;
-webkit-animation-play-state: running;
//animation-fill-mode: forwards;
//-webkit-animation-fill-mode: forwards;
}
css3.js
ist dafür etwas schlichter
jQuery(document).ready(function() {
jQuery('h1.blogtitle').addClass('animate_me1');
var posttitle=jQuery('h2.posttitle');
posttitle.addClass('animate_me0');
posttitle.click( function() {
posttitle.css("-webkit-animation-play-state", "running");
posttitle.css("animation-play-state", "running");
});
});
Man kann auch die 2. Animation auch nicht durch erneutes Anklicken wiederholen, dafür müsste man mehr Gehirnschmalz in das .js stecken.
Vielleicht kann man aber dadurch auch erkennen, dass CSS3 noch viel weiter reifen muss, bis man es im Schlafe anwenden kann.
