Un background animé en CSS3Flux RSS

Publié le 11/01/2012 à 19:10 dans la catégorie Design.
Tags : css3, animation, web, background, design.
1 commentaire.

Présentation

Dans l'optique d'animer (légérement) les backgrounds des sites Internet en m'appuyant sur du CSS, j'ai voulu mettre en place un background multiple couplé à une animation.

J'ai décidé de partager le résultat, bien que ce soit facilement améliorable, j'espère que le concept vous permettra de faire de belles choses.

Note

Attention à ne pas abuser des effets visuels. Sur certaines configuration et pour certaines animations, les performances demandées pourront être élevées et ralentir fortement la machine du visiteur.

Les images

Pour créer les images du fond d'écran, composées de "rayons lumineux", j'ai utilisé le flou directionnel dans Photoshop. Pour plus d'informations, vous pouvez vous rendre sur ce tutoriel du site WKS

Vous constaterez que mon visuel est plus simple que celui de ce tutoriel, mais le principe reste le même. Je vous fait confiance pour créer quelque chose qui vous plaira d'avantage.

J'ai créé trois images via ce principe, que je vous propose de récupérer ici si vous ne souhaitez pas les faire vous-même. Libre à vous d'en créer plus (pourquoi pas une image par "rayon"), ou moins en fonctions de vos besoins.

Vous pouvez aussi rajouter une image dans le fond comme sur le turoriel du site WKS. Je l'ai retirée pour simplifier la chose.

Image 1 Image 2 Image 3
les 3 images utilisées (fichiers .png sur fond transparent - 1160*1376px).

Le code HTML

Rien d'intéressant coté HTML, n'importe quelle page fera l'affaire, le concept étant mis en application au body de la page. Il aurait été possible de l'appliquer sur un div, ou n'importe quel autre élément qui peut avoir un fond animé.

<!doctype html>
<html lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="author" content="Pierre LEBEDEL">
        <title>CSS3 Animated Background</title>
        <style type="text/css">
/*
*    Placez ici le code CSS (ou dans un fichier externe)
*/
        </style>
    </head>
    <body>
    </body>
</html>

Le code CSS

Niveau CSS, j'ai passé le fond du site en noir avec la propriété background-color:#000; pour bien voir les rayons. Le reste des propriété importantes concerne le background et les animations.

html, body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background-color:#000;
}

/*******************************
** Main content
*******************************/
body{
    background-image:url('images/bg_lr_1_small.png'), url('images/bg_lr_2_small.png'), url('images/bg_lr_3_small.png');
    background-position:0% 0px, 0% 0px, 0% 0px;
    background-repeat:repeat-x;    /* Utilisez no-repeat pour retirer des rayons */
    background-size:contain;

    -ms-animation: movingBg 25s linear infinite alternate;
    -moz-animation: movingBg 25s linear infinite alternate;
    -webkit-animation: movingBg 25s linear infinite alternate;
}

/*******************************
** Animations
*******************************/
@-ms-keyframes movingBg{
    0%{background-position:0% 0px, 50% 0px, 100% 0px;}
    10%{background-position:3% 0px, 43% 0px, 92% 0px;}
    20%{background-position:8% 5px, 33% -10px, 80% 0px;}
    40%{background-position:15% 15px, 30% 0px, 60% 15px;}
    60%{background-position:25% 20px, 20% 15px, 40% 0px;}
    80%{background-position:31% 25px, 12% 25px, 20% 8px;}
    90%{background-position:37% 29px, 5% 28px, 5% 13px;}
    100%{background-position:40% 30px, 3% 30px, 0% 15px;}
}

@-moz-keyframes movingBg{
    0%{background-position:0% 0px, 50% 0px, 100% 0px;}
    10%{background-position:3% 0px, 43% 0px, 92% 0px;}
    20%{background-position:8% 5px, 33% -10px, 80% 0px;}
    40%{background-position:15% 15px, 30% 0px, 60% 15px;}
    60%{background-position:25% 20px, 20% 15px, 40% 0px;}
    80%{background-position:31% 25px, 12% 25px, 20% 8px;}
    90%{background-position:37% 29px, 5% 28px, 5% 13px;}
    100%{background-position:40% 30px, 3% 30px, 0% 15px;}
}

@-webkit-keyframes movingBg{
    0%{background-position:0% 0px, 50% 0px, 100% 0px;}
    10%{background-position:3% 0px, 43% 0px, 92% 0px;}
    20%{background-position:8% 5px, 33% -10px, 80% 0px;}
    40%{background-position:15% 15px, 30% 0px, 60% 15px;}
    60%{background-position:25% 20px, 20% 15px, 40% 0px;}
    80%{background-position:31% 25px, 12% 25px, 20% 8px;}
    90%{background-position:37% 29px, 5% 28px, 5% 13px;}
    100%{background-position:40% 30px, 3% 30px, 0% 15px;}
}

Notez l'utilisation de la propriété background-size:contain; pour que l'image de fond soit contenue dans le body, peut importe sa taille. Elle sera dimensionnée en conservant ses proportions.

N'oubliez pas de définir les animations avec les préfixes des différents moteurs de rendu (-ms- pour IE10, -moz- pour Firefox et -webkit- pour Chrome et Safari).

Je n'ai pas cherché à peaufiner vraiment l'animation des rayons. A vous de modifier les délais / déplacements pour un meilleur résultat.

Le résultat

C'est pas terrible !

Certes, mais le concept est très plaisant, facile et rapide à mettre en oeuvre. Et puis... Libre à vous de faire des images plus vivantes, colorées, ou plus concrètes. Un paysage avec des oiseaux qui volent de gauche à droite par exemple, des vaches en fond de votre site qui clignent des yeux, bref n'importe quoi.

Je joue ici sur un seul bloc (le body), mais il aurait aussi été possible de créer différents éléments et de les animer différemment, et/ou en faisant varier d'autres propriétés CSS (rotate, transform, ...).

Le principal défaut, c'est la consommation de ressource pour les animations lourdes (nombreux éléments, semi-transparence, ...) si l'utilisateur dispose d'une vieille machine ou sans accélération matérielle.