COMO ANIMAR FUNDO DE PÁGINA WEB

Conteúdo

animação css rolar imagem

Como fazer imagem rolar para baixo com css?

Leia mais sobre: Animação css rolar imagem

Para isso é usado animation e keyframe como no exemplo:

Animation e keyframe são propriedades css usadas em animações.

Segue abaixo o código com o exemplo solicitado na questão:

<div class="body">
<style rel="stylesheet" scoped="scoped" type="text/css">.body{
background: #ddd; /*Fundo no tom de cinza claro.*/
background-image: url("./confetes-tech.png"); /*Chamada das imagens de confetes.*/
background-repeat: repeat-y;/*Define que a imagem irá repetir no eixo y, ou seja na vertical.*/
height: auto;/*Define o tamanho da altura usada em auto.*/
left: 0;/*Define a posição horizontal da página começando do primeiro pixel.*/
position: absolute;/*Define a orientação da página, ficando fixa.*/
top: 0;/*Define o início da página na parte superior,*/
width: 100%;/*Define a largura da página para ser aproveitada toda.*/
/*Aqui é definida a animação para rodar em 4 segundos em linha reta sem parar.*/
animation: snow 4s linear infinite;
/*Abaixo é feita a mesma configuração de animação para diferentes prefixos de navegadores.*/
-webkit-animation: snow 4s linear infinite;
-moz-animation: snow 4s linear infinite;
-ms-animation: snow 4s linear infinite;
}
/*Aqui são definidas as posições da imagem.*/ @keyframes snow {
    /*Primeiro a posição zero da imagem.*/
    0% {background-position: center 0%, center 0%, center 0%;}
    /*Depois a posição final.*/
    100% {background-position: center 1120px, center 1120px, center 1120px;}
}
/*Abaixo é feita a mesma configuração de keyfranes para diferentes prefixos de navegadores.*/
@-moz-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
}
@-webkit-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
}
@-ms-keyframes snow {
    0% {background-position: center 0%, center 0%, center 0%;}
    100% {background-position: center 1120px, center 1120px, center 1120px;}
}
</style>
<div class="container">
<style rel="stylesheet" scoped="scoped" type="text/css">
.container{
      /*Abaixo é definido o tamanho da tela.*/
      max-width: 600px;
      max-height: 800px;
      width: 600px;
      height: 800px;
      margin: 0 auto;
    }
</style>

</div>
</div>

Ficando igual o exemplo abaixo:

Neste exemplo a imagem vai da posição 0% a 100%, mas poderia ser colocada outras posições como 50% ou 70%. Também poderia ser feito por medida exata em pixels.

No exemplo a imagem vai da posição 0% até a 100% em 4 segundos. Sendo que a última posição a imagem estará em uma altura de 1120px.

Leia mais sobre: Animação css rolar imagem

COMO ANIMAR FUNDO DE PÁGINA WEB

Conteúdo

Como fazer imagem rolar para baixo com css?

Qual é a melhor plataforma para monetizar meu site em 2024, Adsterra ou Google AdSense?

Qual é o melhor livro para aprender sobre formação de hábitos, 'O Poder do Hábito' ou 'Hábitos Atômicos'?

Quais são os nichos mais lucrativos do YouTube em 2024?