Monthly Archives: mai 2016

Prestashop : Background-image en déplacement !

Le but : Ajouter des images de fond, sur toutes les pages de notre site, et les faire se déplacer.

Ouvrons notre /themes/default-bootstrap/css/global.css et ajoutons à la fin :

@keyframes animatedFlow {
    0% { background-position: -10% -25%; }
    80% { background-position: 125% 50%; }
    80.001% { background-position: -50% -40%; }
    100% { background-position: -10% -25%; }
}
@-moz-keyframes animatedFlow {
    0% { background-position: -10% -25%; }
    80% { background-position: 125% 50%; }
    80.001% { background-position: -50% -40%; }
    100% { background-position: -10% -25%; }
}
@-webkit-keyframes animatedFlow {
    0% { background-position: -10% -25%; }
    80% { background-position: 125% 50%; }
    80.001% { background-position: -50% -40%; }
    100% { background-position: -10% -25%; }
}
@-ms-keyframes animatedFlow {
    0% { background-position: -10% -25%; }
    80% { background-position: 125% 50%; }
    80.001% { background-position: -50% -40%; }
    100% { background-position: -10% -25%; }
}
@-o-keyframes animatedFlow {
    0% { background-position: -10% -25%; }
    80% { background-position: 125% 50%; }
    80.001% { background-position: -50% -40%; }
    100% { background-position: -10% -25%; }
}

@keyframes animatedFlow2 {
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 50%; }
    100% { background-position: 80% 50%; }
}
@-moz-keyframes animatedFlow2 {
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 50%; }
    100% { background-position: 80% 50%; } 
}
@-webkit-keyframes animatedFlow2 { 
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 50%; }
    100% { background-position: 80% 50%; }
}
@-ms-keyframes animatedFlow2 {
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 50%; }
    100% { background-position: 80% 50%; }
}
@-o-keyframes animatedFlow2 {
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 20%; }
    100% { background-position: 80% 50%; } 
}



@keyframes animatedFlow3 {
    0% { background-position: -25% 80%; } 
    100% { background-position: 125% 60%; }
}
@-moz-keyframes animatedFlow3 {
    0% { background-position: -25% 80%; } 
    100% { background-position: 125% 60%; }
}
@-webkit-keyframes animatedFlow3 {
    0% { background-position: -25% 80%; } 
    100% { background-position: 125% 60%; }
}
@-ms-keyframes animatedFlow3 {
    0% { background-position: -25% 80%; } 
    100% { background-position: 125% 60%; }
}
@-o-keyframes animatedFlow3 {
    0% { background-position: -25% 80%; } 
    100% { background-position: 125% 60%; }
}

body {
    background-image: url(/flo.png);
    background-repeat: no-repeat;
 
    animation: animatedFlow 60s linear infinite;
    -moz-animation: animatedFlow 60s linear infinite;
    -webkit-animation: animatedFlow 60s linear infinite;
    -ms-animation: animatedFlow 60s linear infinite;
    -o-animation: animatedFlow 60s linear infinite;
}

.columns-container{
    background-image: url(/flo2.png);
    background-repeat: no-repeat;
    animation: animatedFlow2 100s linear infinite;
    -moz-animation: animatedFlow2 100s linear infinite;
    -webkit-animation: animatedFlow2 100s linear infinite;
    -ms-animation: animatedFlow2 100s linear infinite;
    -o-animation: animatedFlow2 100s linear infinite;
}

#page {
    /*background-color:#bbee80;*/
    background-image: url(/flo3.png);
    background-repeat: no-repeat;
 
    animation: animatedFlow3 80s linear infinite; 
    -moz-animation: animatedFlow3 80s linear infinite;
    -webkit-animation: animatedFlow3 80s linear infinite;
    -ms-animation: animatedFlow3 80s linear infinite;
    -o-animation: animatedFlow3 80s linear infinite;
}

Vu qu’on ne peut ajouter qu’une image de fond par conteneur, donc body, #page et .columns-container, ça nous fait que 3 images mobiles sans modification plus profonde du site.

C’est pas mal, mais on pourrait vouloir que nos images commencent leur déplacement sur une position visible, au lieu d’apparaitre hors champ. Voila une petite astuce pour modifier nos animations :

@keyframes animatedFlow2 {
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 50%; }
    100% { background-position: 80% 50%; }
}
@-moz-keyframes animatedFlow2 {
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 50%; }
    100% { background-position: 80% 50%; } 
}
@-webkit-keyframes animatedFlow2 { 
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 50%; }
    100% { background-position: 80% 50%; }
}
@-ms-keyframes animatedFlow2 {
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 50%; }
    100% { background-position: 80% 50%; }
}
@-o-keyframes animatedFlow2 {
    0% { background-position: 80% 50%; }
    30% { background-position: 150% 80%; }
    30.0001% { background-position: -20% 20%; }
    100% { background-position: 80% 50%; } 
}

Ca se passe de commentaires, à un houra pour moi près :)