Animations of input text and Divs when scrolling the page

Asked

Viewed 1,927 times

0

I have seen that it is getting more and more common this practice, where the elements of the page will "appear" (fade-in, slide-in, and more) automatically when, when giving scroll, you enter a new Section/div. I gave a researched, but did not find the necessary to really learn how it works and how to put into practice.

I quickly searched a website that saw such a feature. Of course it was not at all difficult to find. All I had to do was put "Bootstrap themes examples" on Google that most of them already featured such animations.

Check out a particular example that I liked very much: "Material Style Theme (Bootstrap)

My questions are:

  • In what is done?
  • How is it done?
  • Where can I find (in which library?) examples to study and learn more about?
  • Page loading is impaired due to this feature?

Example of a section of my website that would like the effects:

<div class="site-wrapper">
<div class="site-wrapper-inner" id="portofolio">

    <br />
    <br />
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading" style="color:white">Portfolio</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-6 portfolio-item">

                <img style="width:360px;Height:200px" src="Imagem-removida-por-questões-profissionais" class="img-responsive" alt="">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Título</h4>
                    </div>


                    <div class="panel-body">
                        <p class="text-muted">Descrição</p>
                    </div>
                </div>
            </div>



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

In that case, I would like the following div to be excited:

class="col-Md-4 col-Sm-6 portfolio-item

Speak to emphasize that I looked here, but I did not find the necessary:

1 answer

2


  • That’s exactly what I was looking for. Thank you

Browser other questions tagged

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