jQuery – Elemento visível na tela

Facebooktwitterredditpinterestlinkedinmail

Nesse post, apresento uma função bem interessante.

Hoje em dia usamos muitos efeitos de animação, para tornar nossos sites mais atraentes. Mas a animação só deve ser executada, quando o elemento (div, img, titulo) estiver visível na janela.

A ideia dessa função é exatamente verificar a posição do elemento na janela, e determinar se ele está visível ou não, para sabermos a hora certa de iniciar a animação.

Funcão jQuery:

Nessa função são definidas 4 variáveis

// Pega posição do topo do elemento
var tDiv = $(divID).offset().top; 
// Pega altura em pixels do elemento
var hDiv = $(divID).height();
// Pega posição do topo da janela
var tWin = $(window).scrollTop();
// Pega posição do topo da janela
var hWin = window.innerHeight;

Verifica a posição do elemento em relação a janela

    if(tDiv >= tWin && (tDiv+hDiv) < (tWin + hWin)){
        var vMens = "<br>Totalmente visível";
        $(divID).html(vPos+vMens);
    }else if(tDiv >= tWin && (tDiv+hDiv) > (tWin + hWin)){
        var vMens = "<br>Parcialmente visível - corte abaixo";
        $(divID).html(vPos+vMens);
    }else if(tDiv < tWin && (tDiv+hDiv) < (tWin + hWin)){
        var vMens = "<br>Parcialmente visível - corte acima";
        $(divID).html(vPos+vMens);
    }

Código HTML:

<div class="card card mb-3">
	<div class="card-header">
		<h4>Verifica se um elemento está totalmente visível na tela (jQuery)</h4>
	</div>
	<div class="card-body">
		<div id="box-1" class="v-offset">
			<h4>Box 1</h4>
		</div>
		<div id="box-2" class="v-offset">
			<h4>Box 2</h4>
		</div>
		<div id="box-3" class="v-offset">
			<h4>Box 3</h4>
		</div>
		<div id="box-4" class="v-offset">
			<h4>Box 4</h4>
		</div>
	</div>
</div>

Código CSS:

#box-1{
	width: 100%;
	height: 300px;
	background: #F9797B;
	color: #000;
}
#box-2{
	width: 100%;
	height: 200px;
	background: #AA79F9;
	color: #000;
}
#box-3{
	width: 100%;
	height: 400px;
	background: #F9EC79;
	color: #000;
}
#box-4{
	width: 100%;
	height: 300px;
	background: #187605;
	color: #FFF;
}
Deixe uma resposta

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Mais Truques e dicas

jQuery – Contador

Nesse post apresento uma função simples, para gerar um contador e atualizar o resultado em uma <div>, <span> ou qualquer outro elemento que possua um ID. A função é baseada no efeito do jQuery “animate“. Função jQuery: Pesquisei várias formas de executar essa tarefa, e baseado nos exemplos que encontrei, escrevi essa função que coleta […]

...
Impressão mesclada no Corel Draw

Quem trabalha em Gráfica Expressa, já dever ter encarado o desafio de imprimir um convite com os nomes dos convidados fornecidos pelo cliente a partir de uma lista feita em algum editor de texto, ou ter que imprimir etiquetas de endereços de alguma lista também ou até mesmo ter que imprimir ingressos numerados. O que […]

Problemas no envio de arquivo para impressão

Com a evolução dos programas de edição de textos, imagens e gráficos, muita gente que contratava serviços de profissionais para realizar trabalhos gráficos se sentiu a vontade para fazer as próprias artes, como banners, folders, cartazes, convites dentre outros. A qualidade visual desses trabalhos não se discute, o grande problema é a qualidade técnica. 1º […]

...
Calendário no Corel Draw

Se existe uma coisa que todo arte finalista detesta fazer e tem que fazer todo início de ano, é arte de calendário. O que muita gente não sabe, é que existe uma forma bem simples de montar um calendário bem completo através do Corel X4. Ai vai a dica: Abra um novo arquivo no Corel […]