5 arrières plans animés en css et javascript

5 background animés en css et javascript

Dans la conception Web, l'animation est souvent utilisée pour attirer l'attention.
Le mouvement oblige les utilisateurs à se concentrer sur un élément spécifique du design comme un bouton ou une image.

L'animation permet ainsi de mettre en avant un élément de votre page.

Mais l'animation peut également être utilisée de manière plus subtile.
Les arrière-plans (background) animés, par exemple, sont souvent délaissés par les webdesigners.
Ils sont pourtant essentiels à un design pour créer une ambiance et améliorer l'esthétique globale.

Animé de manière subtile, ils peuvent apporter un impact visuel à votre page.

Je vous partage quelques exemples d'animation d'arrière plan qui pourront apporter un supplément de valeur à votre template.

Créer un arrière en dégradé animé (CSS Animated Gradient Background)

Les dégradés constituent une excellente animation d'arrière-plan.
Ils sont faciles à mettre en place, car ils ne nécessitent qu'une simple animation en keyframes.

.footer {
  background: linear-gradient(90deg,rgba(0,158,222,1) 0%,rgba(120,184,45,1) 100%);
  background-size: auto;
  color: #fff;
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  padding: 25px 0;
}
@keyframes gradient{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}

Animé un arrière plan avec des éléments en zone

Un exemple d'animation simple à mettre en place, toujours en keyframes mais cette fois-ci avec des éléments intégrés.

Le HTML :

<div class="context">
     <h1>Pure Css Animated Background</h1>
</div>
<div class="area" >
   <ul class="circles">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
   </ul>
</div>

Le CSS :

.context {
    width: 100%;
    position: absolute;
    top:50vh;
}
.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}
.area{
    background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:100vh;
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

Animation d'arrière plan de dégradé et de forme

Voici une belle animation d'arrière plan que vous pouvez intégrer dans une section ou une division.
Elle utilise @keyframes pour modifier les teintes de dégradé et animé les éléments de différentes formes.

Le CSS :

body {
    background: -moz-linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
    background: -webkit-linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    background: linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    /*min-height: calc(100vh - 2rem);*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    overflow: hidden;
    position: relative; 
}
body::before, 
body::after {
    content: "";
    width: 70vmax;
    height: 70vmax;
    position: absolute;
    background: rgba(255, 255, 255, 0.07);
    left: -20vmin;
    top: -20vmin;
    animation: morph 15s linear infinite alternate, spin 20s linear infinite;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 55% 55%;
    pointer-events: none; 
}
body::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 20% 20%; 
}
@-webkit-keyframes Gradient {
    0% {background-position: 0 50%}
    50% {background-position: 100% 50%}
    100% {background-position: 0 50%}
}
@-moz-keyframes Gradient {
    0% {background-position: 0 50%}
    50% {background-position: 100% 50%}
    100% {background-position: 0 50%}
}
@keyframes Gradient {
    0% {background-position: 0 50%}
    50% {background-position: 100% 50%}
    100% {background-position: 0 50%}
}
@keyframes morph {
  0% {border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;}
  100% {border-radius: 40% 60%; } 
}
@keyframes spin {
  to {transform: rotate(1turn);} 
}

Le flou d'arrière plan utilisé dans la photographie (bokeh background)

Le style flou d'arrière plan est souvent associé à la photographie.
Ici, il est utilisé à bon escient lorsque les points entrent et sortent de la mise au point, comme une lampe à lave.
Cet extrait utilise du JavaScript vanilla et du canevas HTML pour créer un arrière-plan doux et équilibré.

Le CSS :

canvas {
  background:#000;
  width: 100%;
  height: 100%;
}

Le Javascript :

const rand = function(min, max) {
  return Math.random() * ( max - min ) + min;
}
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener('resize', function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = 'lighter';
});
let backgroundColors = [ '#000', '#000' ];
let colors = [
  [ '#002aff', "#009ff2" ],
  [ '#0054ff', '#27e49b' ], 
  [ '#202bc5' ,'#873dcc' ]
];
let count = 70;
let blur = [ 12, 70 ];
let radius = [ 1, 120 ];
ctx.clearRect( 0, 0, canvas.width, canvas.height );
ctx.globalCompositeOperation = 'lighter';
let grd = ctx.createLinearGradient(0, canvas.height, canvas.width, 0);
grd.addColorStop(0, backgroundColors[0]);
grd.addColorStop(1, backgroundColors[1]);
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
let items = [];
while(count--) {
    let thisRadius = rand( radius[0], radius[1] );
    let thisBlur = rand( blur[0], blur[1] );
    let x = rand( -100, canvas.width + 100 );
    let y = rand( -100, canvas.height + 100 );
    let colorIndex = Math.floor(rand(0, 299) / 100);
    let colorOne = colors[colorIndex][0];
    let colorTwo = colors[colorIndex][1];
    ctx.beginPath();
    ctx.filter = `blur(${thisBlur}px)`;
    let grd = ctx.createLinearGradient(x - thisRadius / 2, y - thisRadius / 2, x + thisRadius, y + thisRadius);
    grd.addColorStop(0, colorOne);
    grd.addColorStop(1, colorTwo);
    ctx.fillStyle = grd;
    ctx.fill();
    ctx.arc( x, y, thisRadius, 0, Math.PI * 2 );
    ctx.closePath();
    let directionX = Math.round(rand(-99, 99) / 100);
    let directionY = Math.round(rand(-99, 99) / 100);
    items.push({
      x: x,
      y: y,
      blur: thisBlur,
      radius: thisRadius,
      initialXDirection: directionX,
      initialYDirection: directionY,
      initialBlurDirection: directionX,
      colorOne: colorOne,
      colorTwo: colorTwo,
      gradient: [ x - thisRadius / 2, y - thisRadius / 2, x + thisRadius, y + thisRadius ],
    });
}
function changeCanvas(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  let adjX = 2;
  let adjY = 2;
  let adjBlur = 1;
  items.forEach(function(item) {
      if(item.x + (item.initialXDirection * adjX) >= canvas.width && item.initialXDirection !== 0 || item.x + (item.initialXDirection * adjX) <= 0 && item.initialXDirection !== 0) {
        item.initialXDirection = item.initialXDirection * -1;
      }
      if(item.y + (item.initialYDirection * adjY) >= canvas.height && item.initialYDirection !== 0 || item.y + (item.initialYDirection * adjY) <= 0 && item.initialYDirection !== 0) {
        item.initialYDirection = item.initialYDirection * -1;
      }
      if(item.blur + (item.initialBlurDirection * adjBlur) >= radius[1] && item.initialBlurDirection !== 0 || item.blur + (item.initialBlurDirection * adjBlur) <= radius[0] && item.initialBlurDirection !== 0) {
        item.initialBlurDirection *= -1;
      }
      item.x += (item.initialXDirection * adjX);
      item.y += (item.initialYDirection * adjY);
      item.blur += (item.initialBlurDirection * adjBlur);
      ctx.beginPath();
      ctx.filter = `blur(${item.blur}px)`;
      let grd = ctx.createLinearGradient(item.gradient[0], item.gradient[1], item.gradient[2], item.gradient[3]);
      grd.addColorStop(0, item.colorOne);
      grd.addColorStop(1, item.colorTwo);
      ctx.fillStyle = grd;
      ctx.arc( item.x, item.y, item.radius, 0, Math.PI * 2 );
      ctx.fill();
      ctx.closePath();
  });
  window.requestAnimationFrame(changeCanvas);
}
window.requestAnimationFrame(changeCanvas);

Vague d'arrière plan en CSS (CSS Wave Background)

Le HTML :

<div class="header">
<div class="inner-header flex">
<h1>Vague d'arrière plan en CSS</h1>
</div>
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
</div>

Le CSS :

.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color:white;
}
.inner-header {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
}
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}
.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}
/* Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*--- RESPONSIVE ---*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

J'espère que toutes ces idées pourront vous aider pour la conception du design de vos sites internet.

Pour maîtriser les animations CSS et JavaScript, il est essentiel de comprendre les bases du design et du motion design, ce qui peut s’apprendre en autodidacte ou en passant par une école d'animation à Toulouse.