-2

Olá!

Estou desenvolvendo um site com HTML5, CSS e Bootstrap. Quero aplicar um efeito de "Surgir" nos itens da minha página, a ideia é que conforme a barra de rolagem for descendo os itens vão surgindo de baixo para cima, com certo delay. Primeiro surge o titulo, depois a foto e depois o texto. Não sei fazer isso, queria saber como fazer e se com bootstrap eu consigo fazer isso. Inseri apenas os códigos criados por mim, os arquivos bootstrap, javascript e jquery não foram alterados, são só os necessários para fazer funcionar o bootstrap.

Obrigado, seguem os códigos:

@media(min-width:320px){
body{
   background-image: url("fundo.jpg");
   background-size: cover;
   transition: 2s;
}

.titulo{
    font-family: "Acme";
}
.imagem_habilidade{
    margin-left:4em;
}
.habilidades{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.quemsou{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.oquebusco{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
h2{
    padding: 0.3em;
    background-color: yellow;
    color: black;
    font-weight: 700;
    text-align: center;
    justify-self: center;
    transition: 2s;
  
}
.container_h2{
   display: flex;
   justify-content: left;
}

.trabalhoduro{
    margin-top: 5%;
    margin-bottom: 5%;
}
.trabalhoduro01{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.trabalhodur02{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}


.rodape{
    width: 100%;
    margin-top: 5em;
    padding: 4em;
    background-color: yellow;
}

}


@media(min-width:720px){
    body{
        margin-left: 5%;
        margin-right: 5%;
    }
    h2{
       font-size: 4em;
    }
    .container_h2{
        display: flex;
        justify-content: left;
     }

     .trabalhoduro{
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
}
<!DOCTYPE html>
<html lang="PT-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--------------------bootstrap------------------------>
    <link rel="stylesheet" href="bootstrap/bootstrap.css">
    <!----------------------------------------------------->

    <!--------------------CSS GENERICO--------------------->
    <link rel="stylesheet" href="cabecalho.css">
    <!-----------------------Fontes------------------------>
    <link href="https://fonts.googleapis.com/css?family=Acme|Bree+Serif|Lato|Muli:700&display=swap" rel="stylesheet">
    <!----------------------------------------------------->

    <title>BemRosselli</title>
</head>
<body>
    <header class="cabecalho">
     
        <!---Menu com Bootstrap-->

        <div class="pos-f-t">
            <div class="collapse" id="navbarToggleExternalContent">
              <div class="bg-dark p-4">
                <h5 class="text-white h4">O que procura?</h5>

                    <div class="list-group mt-5">
                            <a href="#" class="list-group-item text-dark bg-warning">Home</a>
                            <a href="#" class="list-group-item bg-dark text-white">Sobre</a>
                            <a href="#" class="list-group-item bg-dark text-white">Contato</a>
                    </div>  
              </div>
            </div>
            <nav class="navbar navbar-dark bg-transparent">
              <button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

              <h1 class="titulo text-warning h1">BEM<span class="text-dark">Rosselli</span></h1>

            </nav>
          </div>
    </header>


    <!------------------------------------------------SEÇÃO DE QUEM SOU EU--------------------------------------------->

    <main class="mt-0"> 

        <div class="container_h2 border-top border-secondary mt-4">
            <h2 class="text-center h2 mt-4" >Quem sou eu?</h2>
        </div>  

    
        <section class="quemsou">
           

            <div class="card mb-3 h-25 bg-transparent mt-4" style="max-width: 72em;">
                <div class="row no-gutters">
                  <div class="col-md-4">
                    <img src="foto_peril.jpg" class="card-img" alt="Foto de Peril do Bruno">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">Olá! eu sou o Bruno :)</h5>
                      <p class="card-text"> <strong>Já Participei de diversas atividades no ambiente acadêmico e profissional como organização de rotinas, planejamento de projetos, desenvolvimento de sistemas, implementação de servidores e bancos de dados e outras atividades ligadas à Tecnologia da Informação.
                        Experiente em suporte e atendimento ao cliente.
                        Habilidades:
                        Cloud Computing: AWS S3, CloudFront, SnowBall, Transfer Acceleration, Hospedagem de Sites no S3. EC2, Acesso via Putty, Filezilla, Volumes EBS, CloudWatch, Roles, EFS, Load Balance, AutoScaling e Route 53.
                        IDEs: Visual Studio, NetBeans e Eclipse.
                        Data Bases: MySQL.
                        Linguagens Programação: HTML 5, CSS, Java e SQL.
                        Servidores: Windows Server 2012 e 2019 e Linux Debian, Ubuntu e Amazon Linux.
                        Banco de Dados: MySQL e Oracle.
                        Administração e desenvolvimento de Websites com: WordPress.
                        Noções de JAVA e Orientação ao Objeto.
                        Noções de Modelagem de Bancos de Dados Relacionais.
                        Conhecimentos de ferramentas como Data Modeler.
                        Conhecimentos de edição com: CorelDRAW e Corel PHOTO-PAINT.</strong></p>
                    
                    </div>
                  </div>
                </div>
              </div>             

              
              </div>
              
            </section>
    <!------------------------------------------------------------------------------------------------------------------->
     

    <!-------------------------------------------------------SEÇÃO DE HÁBILIDADES---------------------------------------->    
        <div class="container_h2 border-top border-secondary mt-4">
             <h2 class="text-center h2 mt-4" >Habilidades</h2>
        </div>  
       
        <section class="habilidades ">

            
         

            <div class="card text-center m-3 bg-primary text-white mt-4" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/html.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de HTML">
                <div class="card-body">
                  <p class="card-text">Habilidades de HTML</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 90%">90%</div>
                  </div>
                </div>
              </div>


              <div class="card text-center m-3 bg-warning text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/css.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de CSS">
                <div class="card-body">
                  <p class="card-text">Habilidades de CSS</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 80%">80%</div>
                  </div>
                </div>
              </div>

              <div class="card text-center m-3 bg-success text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/javascript.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de JavaScript">
                <div class="card-body">
                  <p class="card-text">Habilidades de JavaScript</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-primary progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 45%">45%</div>
                  </div>
                </div>
              </div>

              <div class="card text-center m-3 bg-danger text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/sql.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de SQL">
                <div class="card-body">
                  <p class="card-text">Habilidades de SQL</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-info progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
                  </div>
                </div>
              </div>

              <div class="card text-center m-3 bg-info text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/bootstrap.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de Bootstrap">
                <div class="card-body">
                  <p class="card-text">Habilidades de Bootstrap</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-secondary progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 60%">60%</div>
                  </div>
                </div>
              </div>

              <div class="card text-center m-3 bg-secondary text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/aws.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de AWS">
                <div class="card-body">
                  <p class="card-text">Habilidades de AWS</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 70%">70%</div>
                  </div>
                </div>
              </div>
        </section>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

        <section class="trabalhoduro"> 

            <section class="trabalhoduro01">
                
                <div class="frase01">
                    <h2 class="text-center" >#MOTIVAÇÃO</h2>
                </div>  

                <div class="frase02">
                    <h2 class="text-center" >#SEMSONO</h2>
                </div>  
                <div class="frase03">
                    <h2 class="text-center" >#SEMLIMITES</h2>
                </div>  


            </section>

            <section class="trabalhodur02">
                <div class="frase03">
                    <h2 class="text-center" >#TRABALHODURO</h2>
                </div>  

                <div class="frase04">
                    <h2 class="text-center" >#PROGRAMANDO</h2>
                </div>  
                
            </section>

    </section>

   


<!----------------------------------- O QUE BUSCO --------------------------------------------------------------------------------------------->

<div class="container_h2 border-top border-secondary mt-4">
    <h2 class="text-center h2 mt-4" >O Futuro</h2>
</div>  

<section class="oquebusco">
           

            <div class="card" style="width: 35rem;">
                <img src="futuro.jpg" class="card-img-top" alt="Imagem do futuro">
                <div class="card-body">
                  <h5 class="card-title">O que busco?</h5>
                  <p class="card-text"><strong> ser uma pessoa melhor a cada dia, aprender algo novo, conhcer pessoas novas, sonhar, amar e ser feliz.
                    Agora, procuro uma empresa em que eu possa desenvolver minhas habilidades e crescer para em algum dia alcançar o topo da carreira de desenvolvedor.
                    Meu objetivo é trabalhar com linguagens de programação, implementando novas tecnologias em projetos dinamicos e desafiadores!<strong></p>
                </div>
              </div>

              <div class="card" style="width: 35rem;">
                <img src="dream.jpg" class="card-img-top" alt="Imagem do futuro">
                <div class="card-body">
                  <h5 class="card-title">Por que procurei por você?</h5>
                  <p class="card-text"><strong>Porque não estou satisfeito com o que sou hoje! Estive buscando a minha vida toda pelo sucesso profissional, e só descobri que para fazer alcançar isso,
                      tenho que ser feliz enquanto trabalho! E acho que uma empre com bons principios pode me ajudar com isso.
                    </strong></p>
                </div>
              </div>


            
        </section>

        
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
    </main>
    <footer class="rodape">



        <h3 class="h3"> Contato</h3>
        <dl>
            <dt>E-mail: [email protected]</dt>
        </dl>

    </footer>
<!---------------------------bootstrap------------------------------>
<script src="bootstrap/jQuery.js"></script>
<script src="bootstrap/bootstrap.js"></script>
<!------------------------------------------------------------------>
</body>
</html>

Sou um iniciante, se puderem me dar um feedback do meu código seria muito bom. Obrigado!

2 Respostas 2

2

Oi,

Acredito que o que seria mais rápido para o seu caso seria uma Library JavaScript chamada AOS. Existem varios exemplos de como criar animações customizadas: - https://codepen.io/michalsnik/pen/WxNdvq

Agora se não desejar utilizar componente externo, outra opção seria seguir esse codepen

Se tiver com dificuldade para configurar a library AOS, siga os passos abaixo:

  1. Adicione a tag css e javascript dentro do seu head
<head>
    <!-- Adicionar a linha abaixo -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />    ...
</head>
  1. Adicione dentro da tag body, conforme exemplo
<body>
 .....
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
   </script>
</body>
  1. Adicione no campo que deseja animar uma das tags da library, exemplo:
<section class="quemsou" data-aos="fade-up">
</section>

Mais detalhes sobre a library

1
  • 1
    Não consegui usar a biblioteca, embora tenha copiado os dois links o do css e js. Quando coloco o atributo do aos na tag, o elemento some. 26/01/2020 às 1:26
1

Apenas com HTML e CSS creio que não seja possível. Existem algumas bibliotecas em JavaScript que podem fazer isso por você, eu gosto bastante da ScrollReveal.

Ele é bem simples de utilizar:

Primeiro você deve linkar o arquivo JavaScript do ScrollReveal, de preferência no final da sua tag body, e invocar a biblioteca (ou só copie o código abaixo e cole no final da sua tag body ):

<script src="https://unpkg.com/scrollreveal"></script>

<script>
    ScrollReveal().reveal('.headline');
</script>

Depois disso, basta colocar a classe headline nas divs que você quer aplicar o efeito.

Fiz o exemplo no código que você enviou:

<body>
    <header class="cabecalho headline">

        <!---Menu com Bootstrap-->

        <div class="pos-f-t">
            <div class="collapse" id="navbarToggleExternalContent">
              <div class="bg-dark p-4">
                <h5 class="text-white h4">O que procura?</h5>

                    <div class="list-group mt-5">
                            <a href="#" class="list-group-item text-dark bg-warning">Home</a>
                            <a href="#" class="list-group-item bg-dark text-white">Sobre</a>
                            <a href="#" class="list-group-item bg-dark text-white">Contato</a>
                    </div>  
              </div>
            </div>
            <nav class="navbar navbar-dark bg-transparent">
              <button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

              <h1 class="titulo text-warning h1">BEM<span class="text-dark">Rosselli</span></h1>

            </nav>
          </div>
    </header>


    <!------------------------------------------------SEÇÃO DE QUEM SOU EU--------------------------------------------->

    <main class="mt-0 "> 

        <div class="container_h2 border-top border-secondary mt-4">
            <h2 class="text-center h2 mt-4" >Quem sou eu?</h2>
        </div>  


        <section class="quemsou headline">


            <div class="card mb-3 h-25 bg-transparent mt-4" style="max-width: 72em;">
                <div class="row no-gutters">
                  <div class="col-md-4">
                    <img src="foto_peril.jpg" class="card-img" alt="Foto de Peril do Bruno">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">Olá! eu sou o Bruno :)</h5>
                      <p class="card-text"> <strong>Já Participei de diversas atividades no ambiente acadêmico e profissional como organização de rotinas, planejamento de projetos, desenvolvimento de sistemas, implementação de servidores e bancos de dados e outras atividades ligadas à Tecnologia da Informação.
                        Experiente em suporte e atendimento ao cliente.
                        Habilidades:
                        Cloud Computing: AWS S3, CloudFront, SnowBall, Transfer Acceleration, Hospedagem de Sites no S3. EC2, Acesso via Putty, Filezilla, Volumes EBS, CloudWatch, Roles, EFS, Load Balance, AutoScaling e Route 53.
                        IDEs: Visual Studio, NetBeans e Eclipse.
                        Data Bases: MySQL.
                        Linguagens Programação: HTML 5, CSS, Java e SQL.
                        Servidores: Windows Server 2012 e 2019 e Linux Debian, Ubuntu e Amazon Linux.
                        Banco de Dados: MySQL e Oracle.
                        Administração e desenvolvimento de Websites com: WordPress.
                        Noções de JAVA e Orientação ao Objeto.
                        Noções de Modelagem de Bancos de Dados Relacionais.
                        Conhecimentos de ferramentas como Data Modeler.
                        Conhecimentos de edição com: CorelDRAW e Corel PHOTO-PAINT.</strong></p>

                    </div>
                  </div>
                </div>
              </div>             


              </div>

            </section>
    <!------------------------------------------------------------------------------------------------------------------->


    <!-------------------------------------------------------SEÇÃO DE HÁBILIDADES---------------------------------------->    
        <div class="container_h2 border-top border-secondary mt-4">
             <h2 class="text-center h2 mt-4" >Habilidades</h2>
        </div>  

        <section class="habilidades headline">




            <div class="card text-center m-3 bg-primary text-white mt-4" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/html.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de HTML">
                <div class="card-body">
                  <p class="card-text">Habilidades de HTML</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 90%">90%</div>
                  </div>
                </div>
              </div>


              <div class="card text-center m-3 bg-warning text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/css.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de CSS">
                <div class="card-body">
                  <p class="card-text">Habilidades de CSS</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 80%">80%</div>
                  </div>
                </div>
              </div>

              <div class="card text-center m-3 bg-success text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/javascript.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de JavaScript">
                <div class="card-body">
                  <p class="card-text">Habilidades de JavaScript</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-primary progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 45%">45%</div>
                  </div>
                </div>
              </div>

              <div class="card text-center m-3 bg-danger text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/sql.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de SQL">
                <div class="card-body">
                  <p class="card-text">Habilidades de SQL</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-info progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
                  </div>
                </div>
              </div>

              <div class="card text-center m-3 bg-info text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/bootstrap.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de Bootstrap">
                <div class="card-body">
                  <p class="card-text">Habilidades de Bootstrap</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-secondary progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 60%">60%</div>
                  </div>
                </div>
              </div>

              <div class="card text-center m-3 bg-secondary text-white" style="width: 15rem;">
                <img src="../SiteBruno 1.2/img/aws.png" class="card-img-top mt-3 text-center w-50 imagem_habilidade" alt="Imagem de AWS">
                <div class="card-body">
                  <p class="card-text">Habilidades de AWS</p>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 70%">70%</div>
                  </div>
                </div>
              </div>
        </section>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

        <section class="trabalhoduro headline"> 

            <section class="trabalhoduro01 headline">

                <div class="frase01">
                    <h2 class="text-center" >#MOTIVAÇÃO</h2>
                </div>  

                <div class="frase02">
                    <h2 class="text-center" >#SEMSONO</h2>
                </div>  
                <div class="frase03">
                    <h2 class="text-center" >#SEMLIMITES</h2>
                </div>  


            </section>

            <section class="trabalhodur02 headline">
                <div class="frase03">
                    <h2 class="text-center" >#TRABALHODURO</h2>
                </div>  

                <div class="frase04">
                    <h2 class="text-center" >#PROGRAMANDO</h2>
                </div>  

            </section>

    </section>




<!----------------------------------- O QUE BUSCO --------------------------------------------------------------------------------------------->

<div class="container_h2 border-top border-secondary mt-4">
    <h2 class="text-center h2 mt-4" >O Futuro</h2>
</div>  

<section class="oquebusco headline">


            <div class="card" style="width: 35rem;">
                <img src="futuro.jpg" class="card-img-top" alt="Imagem do futuro">
                <div class="card-body">
                  <h5 class="card-title">O que busco?</h5>
                  <p class="card-text"><strong> ser uma pessoa melhor a cada dia, aprender algo novo, conhcer pessoas novas, sonhar, amar e ser feliz.
                    Agora, procuro uma empresa em que eu possa desenvolver minhas habilidades e crescer para em algum dia alcançar o topo da carreira de desenvolvedor.
                    Meu objetivo é trabalhar com linguagens de programação, implementando novas tecnologias em projetos dinamicos e desafiadores!<strong></p>
                </div>
              </div>

              <div class="card" style="width: 35rem;">
                <img src="dream.jpg" class="card-img-top" alt="Imagem do futuro">
                <div class="card-body">
                  <h5 class="card-title">Por que procurei por você?</h5>
                  <p class="card-text"><strong>Porque não estou satisfeito com o que sou hoje! Estive buscando a minha vida toda pelo sucesso profissional, e só descobri que para fazer alcançar isso,
                      tenho que ser feliz enquanto trabalho! E acho que uma empre com bons principios pode me ajudar com isso.
                    </strong></p>
                </div>
              </div>



        </section>


<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
    </main>
    <footer class="rodape headline">



        <h3 class="h3"> Contato</h3>
        <dl>
            <dt>E-mail: [email protected]</dt>
        </dl>

    </footer>
<!---------------------------bootstrap------------------------------>
<script src="bootstrap/jQuery.js"></script>
<script src="bootstrap/bootstrap.js"></script>
<!------------------------------------------------------------------>
<script src="https://unpkg.com/scrollreveal"></script>

<script>
    ScrollReveal().reveal('.headline');
</script>

</body>

Segue o link da documentação caso queira dar uma conferida: https://scrollrevealjs.org/

Espero que tenha ajudado, abração!

1
  • 3
    Obrigado pelo aviso, alterei a resposta seguindo as recomendações de vocês. 30/01/2020 às 21:00

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .