Pop-up effect with HTML, CSS and Bootstrap

Asked

Viewed 564 times

-2

Hello!

I’m developing a site with HTML5, CSS and Bootstrap. I want to apply a "Appearing" effect to the items on my page, the idea is that as the scroll bar descends the items will appear from bottom to top, with a certain delay. First the title, then the photo, then the text. I don’t know how to do it, I wanted to know how to do it and if with bootstrap I can do it. I only inserted the codes created by me, the bootstrap, javascript and jquery files were not changed, they are only necessary to make bootstrap work.

Thank you, follow the codes:

@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>

I’m a beginner, so if you could give me some feedback on my code, that would be great. Thank you!

javascript html jquery css twitter-bootstrap

2 answers

2


Hi,

I believe that what would be faster for your case would be a Javascript Library calling for TO. There are several examples of how to create custom animations: - https://codepen.io/michalsnik/pen/WxNdvq

Now if you do not want to use external component, another option would be to follow this codepen

If you have difficulty setting up the AOS library, follow the steps below:

  1. Add the css and javascript tag inside your head
<head>
    <!-- Adicionar a linha abaixo -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />    ...
</head>
  1. Add inside the body tag, as an example
<body>
 .....
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
   </script>
</body>
  1. Add in the field you want to animate one of the library tags, example:
<section class="quemsou" data-aos="fade-up">
</section>

More details about the library

  • 1

    I couldn’t use the library, although I copied both the css and js links. When I put the aos attribute in the tag, the element adds.

1

Only with HTML and CSS I don’t think it’s possible. There are some Javascript libraries that can do this for you, I really like the Scrollreveal.

It is very simple to use:

First you must link the Scrollreveal Javascript file, preferably at the end of your body tag, and invoke the library (or just copy the code below and paste at the end of your tag body ):

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

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

After that, just put the class headline in Divs that you want to apply the effect.

I made the example in the code you sent:

<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>

Follow the documentation link if you want to check: https://scrollrevealjs.org/

I hope it helped, hugging!

  • 3

    Thanks for the warning, I changed the response following your recommendations.

Browser other questions tagged javascript html jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.