Tengo un indicador de desplazamiento que muestro después de 2 segundos de carga de la página durante 5 segundos usando CSS+jQuery en cada página:
$(document).ready(function(){ $('.icon-scroll').delay(2000).fadeIn('slow', function(){ $('.icon-scroll').delay(5000).fadeOut('slow'); }); }); body {margin:0;} div {height:100vh;} .icon-scroll {display: none; position: absolute; top: calc(50%); right: 30px; width: 30px; height: 45px; margin-left: -20px; bottom: 7%; margin-top: -35px; box-shadow: inset 0 0 0 3px; border-radius: 25px; z-index: 2;} .icon-scroll:before {position: absolute; left: 50%; content: ''; width: 8px; height: 8px; background-color: inherit; box-shadow: inset 0 0 0 5px; margin-left: -4px; top: 7px; border-radius: 4px; -webkit-animation-duration: .800s; animation-duration: .800s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: scroll; animation-name: scroll;} @-webkit-keyframes scroll {0% {opacity: 1;} 100% {opacity: 0; transform: translateY(25px);}} @keyframes scroll {0% {opacity: 1;} 100% {opacity: 0; transform: translateY(25px);}} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span class="icon-scroll"></span> </div>El propósito básico de esto es hacer que las personas se desplacen por una página donde se usa una imagen/diseño de pantalla completa. Pero no quiero que este mensaje vuelva a aparecer en una página cada vez que se actualiza (la página se actualiza al cambiar el tamaño) o se vuelve a visitar, básicamente una vez en una página y un máximo de 3 veces en el sitio en una visita para cada usuario.
Creo que esto no se puede hacer a través de CSS, por lo que cualquier ayuda en este sentido es muy apreciada.