Load the animation just when it apperas on the pag

, ,
#1

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>

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

I can’t write the code from memory; it’s been several years since I’ve hand-coded web pages.

However, a JavaScript event listener will likely be necessary to monitor for a scroll event that triggers the CSS animation. When the user scrolls down the page, the script would calculate the current position of the scroll relative to the bottom of the page. Once the user scrolls to a specified distance from the bottom, the script would trigger the CSS transition.

Coding JavaScript has never been my strong suit anyway. You might want to Google “JavaScript event listener”.

#3

I need the complete code anyway !!

#4

Ask ChatGPT.

#5

That’s cheating, but like magic, it built the script and works, at least in Chrome, where I tried it. I’m amazed. :smiley: I used Google’s Gemini, though.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, inicial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        body {
            font-family: Arial;
        }
        
        /* ORIGINAL CSS: Initial state of the div */
        .design_meio_1 {
            border-radius: 15px 50px;
            background-image: linear-gradient(#B31E23,#c0c0c0);
            padding: 22px;
            font-family: Arial;
            text-align: left;
            position: relative;
            /* Initial state before animation */
            opacity: 0; 
            top: 80px; 
            transform: translate( 0, 0 );
            -webkit-transform: translate( 0, 0 );
            margin-bottom: 100px;
        }

        /* NEW CSS: Triggers the animation when this class is added by JavaScript */
        .design_meio_1.is-visible {
            -webkit-animation: movimento1 1s 1s linear forwards;
            animation: movimento1 1s 1s linear forwards;
        }

        /* Keyframes remain the same to define the movement */
        @keyframes movimento1 {
            80% {
                top: 0;
            }
            100% {
                top: 0;
                opacity: 1;
            }          
        }
        @-webkit-keyframes movimento1 {
            80% {
                top: 0;
            }
            100% {
                top: 0;
                opacity: 1;
            }          
        }
    </style>
</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>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const targetDiv = document.querySelector('.design_meio_1');
            const offset = 150; 

            function checkScroll() {
                const rect = targetDiv.getBoundingClientRect();
                
                // Triggers when the top of the element is 150px or less from the bottom of the screen
                const isVisible = (
                    rect.top <= (window.innerHeight - offset)
                );

                if (isVisible && !targetDiv.classList.contains('is-visible')) {
                    targetDiv.classList.add('is-visible');
                    // Stop checking for scroll once it's triggered
                    window.removeEventListener('scroll', checkScroll);
                }
            }

            checkScroll(); 
            window.addEventListener('scroll', checkScroll);
        });
    </script>
</body>
</html>
#7

Still code not working !!!

#8

I just tried it in Chrome, Safari, Opera, Firefox, DuckDuckGo, and Edge. It works exactly as you described it should.

The bottom DIV and animation script don’t load until the user scrolls down to the point where it would normally be visible. At that point, the JavaScript Event Listener is triggered, which causes the DIV to fade in and move up.

Is that not what you want it to do?

Eu acabei de testar no Chrome, Safari, Opera, Firefox, DuckDuckGo e Edge. Funciona exatamente como você descreveu que deveria.

O DIV inferior e o script de animação só são carregados quando o usuário rola a página até o ponto em que normalmente estariam visíveis. Nesse momento, o Event Listener do JavaScript é acionado, o que faz com que o DIV surja gradualmente (fade in) e se mova para cima.

Não é isso que você quer que ele faça?