Scroll Arrow - keep hidden

Developer
Rob
Size
4,898 Kb
Views
34,408
  1. Scroll Arrow - keep hidden Previews
  2. Scroll Arrow - keep hidden HTML Codes
  3. Scroll Arrow - keep hidden CSS Codes
  4. Scroll Arrow - keep hidden JS Codes

How do I make an scroll arrow - keep hidden?

An updated version for explanatory purposes. Keeps the arrow hidden upon scrolling.A simple, animated down arrow to indicate scroll intent. More info at robsawyer.me. What is a scroll arrow - keep hidden? How do you make a scroll arrow - keep hidden? This script and codes were developed by Rob on 15 August 2022, Monday.

Scroll Arrow - keep hidden Previews
IQ Test

Scroll Arrow - keep hidden - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll Arrow - keep hidden</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body { height:100%;
}
body { margin:0; background:#14b5d1; font-size:1.3em; color:#333; font-family:'Open Sans', sans-serif;
}
section { float:left; width:100%; background:#fff; position:relative; box-shadow:0 0 5px 0px #333;
}
/* the important styles */
.arrow-wrap { position:absolute; z-index:1; left:50%; top:-5em; margin-left:-5em; background:#111; width:10em; height:10em; padding:4em 2em; border-radius:50%; font-size:0.5em; display:block; box-shadow:0px 0px 5px 0px #333;
}
.arrow { float:left; position:relative; width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ffffff transparent transparent transparent; -webkit-transform:rotate(360deg)
}
.arrow:after { content:''; position:absolute; top:-3.2em; left:-3em; width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #111 transparent transparent transparent; -webkit-transform:rotate(360deg)
}
.hint { position:absolute; top:0.6em; width:100%; left:0; font-size:2em; font-style:italic; text-align:center; color:#fff; opacity:0;
}
.arrow-wrap:hover .hint { opacity:1;
} @-webkit-keyframes arrows { 0% { top:0; } 10% { top:12%; } 20% { top:0; } 30% { top:12%; } 40% { top:-12%; } 50% { top:12%; } 60% { top:0; } 70% { top:12%; } 80% { top:-12%; } 90% { top:12%; } 100% { top:0; } } .arrow-wrap .arrow { -webkit-animation: arrows 2.8s 0.4s; -webkit-animation-delay: 3s; }
/* this is the unimportant CSS used just to layout the content */
header { float:left; width:100%; padding:2em 4em; color:#fff; height:calc(100% - 3em);
}
header h1 { margin:0;
}
header h3 { margin:0; color: #56dcee ;
}
header a { color:#56dcee; opacity:0.5; text-decoration:none;
}
header a:hover { color:#333; opacity:1;
}
.content { float:left; width:70%; margin:0 15%; padding:2em 0;
}
h1 { font-family:'Maven Pro', sans-serif; font-weight:300; font-size:2.4em;
}
h2, h3 { font-family:'Maven Pro', sans-serif; font-weight:300; font-size:1.5em; margin-top:2em;
}
pre { background:#ededed; padding:1em;
}
p { color:#555; font-size:0.9em;
}
p a { color:#14b5d1; text-decoration:none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro:500' rel='stylesheet' type='text/css'>
<header> <h1>Scroll Indicator</h1> <h3> An animated scroll button. (That stays hidden after scrolling!) </h3> <a href="http://www.robsawyer.me/blog/2013/09/17/scroll-indicator/">robsawyer.me</a>
</header>
<section class="main">
<a class="arrow-wrap" href="#content">
<span class="arrow"></span>
<!--<span class="hint">scroll</span>-->
</a> <div class="content" id="content"> <h1>Content Section</h1> <p> The purpose of this arrow demo is to indicate that there is further content down the page. While studies have generally shown that users <em>do, in fact,</em> scroll (thus killing the worries about page fold), it still has become somewhat fashionable to indicate scroll intent. </p> <p> A subtle animation triggered after a period of time draws attention to the scroll indicator. Some jQuery hides the indicator after the user begins scrolling. </p> <p> This fork of the arrow includes the behavior of keeping the arrow hidden once the user has scrolled down. Note that I am doing this only locally on the page, the same could be done with sessionStorage (or even localStorage) if you wanted to keep the arrow hidden after navigating away from the page! </p> <h2> The CSS </h2> <pre>
.arrow-wrap { position:absolute; z-index:1; left:50%; top:-5em; margin-left:-5em; background:#111; width:10em; height:10em; padding:4em 2em; border-radius:50%; font-size:0.5em; display:block;
}
.arrow { float:left; position:relative; width: 0px; height: 0px; border-style: solid; border-width: 3em 3em 0 3em; border-color: #ffffff transparent transparent transparent; -webkit-transform:rotate(360deg)
}
.arrow:after { content:''; position:absolute; top:-3.2em; left:-3em; width: 0px; height: 0px; border-style: solid; border-width: 3em 3em 0 3em; border-color: #111 transparent transparent transparent; -webkit-transform:rotate(360deg)
} </pre> <h2>Animation</h2> <p>Be sure to use the correct vendor-prefixes</p> <pre> @-webkit-keyframes arrows { 0% { top:0; } 10% { top:12%; } 20% { top:0; } 30% { top:12%; } 40% { top:-12%; } 50% { top:12%; } 60% { top:0; } 70% { top:12%; } 80% { top:-12%; } 90% { top:12%; } 100% { top:0; } } .arrow-wrap .arrow { -webkit-animation: arrows 2.8s 0.4s; -webkit-animation-delay: 3s; } </pre> <p> Read more at <a href="http://www.robsawyer.me/blog/2013/09/17/scroll-indicator/">robsawyer.me</a> </p> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scroll Arrow - keep hidden - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body { height:100%;
}
body { margin:0; background:#14b5d1; font-size:1.3em; color:#333; font-family:'Open Sans', sans-serif;
}
section { float:left; width:100%; background:#fff; position:relative; box-shadow:0 0 5px 0px #333;
}
/* the important styles */
.arrow-wrap { position:absolute; z-index:1; left:50%; top:-5em; margin-left:-5em; background:#111; width:10em; height:10em; padding:4em 2em; border-radius:50%; font-size:0.5em; display:block; box-shadow:0px 0px 5px 0px #333;
}
.arrow { float:left; position:relative; width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ffffff transparent transparent transparent; -webkit-transform:rotate(360deg)
}
.arrow:after { content:''; position:absolute; top:-3.2em; left:-3em; width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #111 transparent transparent transparent; -webkit-transform:rotate(360deg)
}
.hint { position:absolute; top:0.6em; width:100%; left:0; font-size:2em; font-style:italic; text-align:center; color:#fff; opacity:0;
}
.arrow-wrap:hover .hint { opacity:1;
} @-webkit-keyframes arrows { 0% { top:0; } 10% { top:12%; } 20% { top:0; } 30% { top:12%; } 40% { top:-12%; } 50% { top:12%; } 60% { top:0; } 70% { top:12%; } 80% { top:-12%; } 90% { top:12%; } 100% { top:0; } } .arrow-wrap .arrow { -webkit-animation: arrows 2.8s 0.4s; -webkit-animation-delay: 3s; }
/* this is the unimportant CSS used just to layout the content */
header { float:left; width:100%; padding:2em 4em; color:#fff; height:calc(100% - 3em);
}
header h1 { margin:0;
}
header h3 { margin:0; color: #56dcee ;
}
header a { color:#56dcee; opacity:0.5; text-decoration:none;
}
header a:hover { color:#333; opacity:1;
}
.content { float:left; width:70%; margin:0 15%; padding:2em 0;
}
h1 { font-family:'Maven Pro', sans-serif; font-weight:300; font-size:2.4em;
}
h2, h3 { font-family:'Maven Pro', sans-serif; font-weight:300; font-size:1.5em; margin-top:2em;
}
pre { background:#ededed; padding:1em;
}
p { color:#555; font-size:0.9em;
}
p a { color:#14b5d1; text-decoration:none;
}

Scroll Arrow - keep hidden - Script Codes JS Codes

//create a variable to track whether the user has already scrolled down the page
var scrollState = 0;
//note that I am just setting a variable to check. If you wanted, you could you a sessionStorage or localStorage item to keep the state saved when the user navigates away from the page!
//this is where we apply opacity to the arrow
$(window).scroll( function(){ //get scroll position var topWindow = $(window).scrollTop(); //multipl by 1.5 so the arrow will become transparent half-way up the page var topWindow = topWindow * 1.5; //get height of window var windowHeight = $(window).height(); //set position as percentage of how far the user has scrolled var position = topWindow / windowHeight; //invert the percentage position = 1 - position; if (position < -.5) { scrollState = 1; } //define arrow opacity as based on how far up the page the user has scrolled //no scrolling = 1, half-way up the page = 0 //check to see if the user hasn't scrolled down too much yet, then start changing the opacity if (scrollState == 0) { $('.arrow-wrap').css('opacity', position); }
});
//Code stolen from css-tricks for smooth scrolling:
$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } });
});
Scroll Arrow - keep hidden - Script Codes
Scroll Arrow - keep hidden - Script Codes
Home Page Home
Developer Rob
Username robooneus
Uploaded August 15, 2022
Rating 3
Size 4,898 Kb
Views 34,408
Do you need developer help for Scroll Arrow - keep hidden?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob (robooneus) Script Codes
Name
Fixed nav background - stackoverflow
Useless RPG
Prototype jobboard6
A Pen by Rob
Cards bkup
Scroll Arrow
Mini-search filter
Berlin Restaurants
Simple Page with Side Menu
Cards
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!