I have a scroll prompt that I show after 2s of page load for 5s using CSS+jQuery on every page:
$(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>The basic purpose of this is to make people scroll a page where a fullscreen image/design is used. But, I do not want this prompt to reappear on a page every time it is refreshed (page refreshes on resize) or revisit - basically once on a page, and max 3 times across the site in a visit for every user.
I think this can't be done through CSS so any help in this regard is much appreciated.