Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Load the animation just when it apperas on the page

L

legendary003

macrumors newbie
Original poster
Sep 25, 2025
2
0
When the page loads, the div design makes the animation starts below. If I page down, the div animation already starts.
I would like an code that the animation just appear when shows by the page.


HTML: 
<html>

<head>
<meta name="viewport" content="width=device-width, inicial-scale=1">
<style>

body {
    font-family: Arial;
}

.design_meio_1 {
    border-radius: 15px 50px;
    background-image: linear-gradient(#B31E23,#c0c0c0);
    padding: 22px;
    font-family: Arial;
    text-align: left;
    position: relative;
    opacity: 0;
    top: 80;
    -webkit-transform: translate( 0, 0 );
    -webkit-animation: movimento1 1s 1s linear forwards;
    transform: translate( 0, 0 );
    animation: movimento1 1s 1s linear forwards;
    margin-bottom: 100px
}

@keyframes movimento1 {
    80% {
        top: 0;
      }
    100% {
        top: 0;
        opacity: 1;
   }         
 }
 
@-webkit-keyframes movimento1 {
    80% {
        top: 0;
      }
    100% {
        top: 0;
        opacity: 1;
   }         
 }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

    <center>
        <div class="design_meio_1">
            <br>
            <br>
            <span style="font-weight: bold; color: yellow;">Criação e<br>
            Atualização de Web<br>Sites</span><br>
            <br><br>
            <span style="font-weight: bold; color: black;">
            . Textos Elaborados;<br>
            . Design Criativo;<br>
            . Público Alvo;<br>
            . Hospedagem Grátis;<br>
            . Padrão: R$1.500;<br>
            . 5xR$300;<br>
            </span>
            <br>
            <br>
        </div>
    </center>


</body>
</html>
 
This is the sort of thing that an LLM can probably do for you if you give it your current website's code and ask it to use the Waypoints library. I'm almost certain Claude could do it.

That said, I'd actually really encourage you to try to learn how to do this yourself! It's really great practice! Waypoint's documentation is pretty readable:

With Waypoints included, we now have access to a global Waypoint class. We create waypoints by instantiating this class. When creating a new Waypoint we must pass it an options object. There are many properties you can set on this options object, but two of them are required, element, and handler.

JavaScript: 
var waypoint = new Waypoint({
  element: document.getElementById('basic-waypoint'),
  handler: function() {
    notify('Basic waypoint triggered')
  }
})

The element tells Waypoints which DOM element's position to observe during scroll, and handler is the function that will trigger when the top of that element hits the top of the viewport.
Click to expand...

Of course, you don't want to merely run notify('Basic waypoint triggered')—you want to add the CSS class that triggers your animation CSS to the element you want to animate.

A note on the documentation—if you don't know what a framework is, you want the "no-framework" build!
 
Last edited:
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back