silvabokis

squarespace development + strategy + UX + design & build + marketing

+44 (0)7908 262225

I'm a freelance user experience consultant who delivers projects large and small for a client base that includes multinationals, SMEs, and sole traders.   
I specialise in formulating new media strategy, defining information architecture, user experience design, interaction design, prototyping, user research & testing, website and application building, and online marketing. 

A Scroll hint that fades out when the page is scrolled down

This is a quick solution I just programmed for a client that allows displays a down arrow "scroll hint" locked to the bottom of the browser window that slowly fades out as the page is scrolled down and  quickly fades back in if the page is scrolled back to the top. 

The solution is a combination of jQuery code and custom CSS. 

Remember: You'll need a link to the main jQuery library as the first item in your sitewide header injection point for the code below to work. If you already have the link to the main jQuery library you can skip to The jQuery Code, below. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

The jQuery Code

<script>
$(window).scroll(function(){
    offset = $(this).scrollTop();
    if (offset > 100) {
        $("body:not(.scrolled)").addClass("scrolled");
   }
   else
   {
       $("body.scrolled").removeClass("scrolled");   
   }
});
</script>

The Custom CSS

body:before {
   font-family: "squarespace-ui-font";
   content:"\e009";
   position:fixed;
   bottom:0;
   width:10%;
   text-align:center;
   z-index:1000;
   display:block;
   color:#333;
   font-size:6vw;
   background-color: rgba(54, 64, 36, 0.5);
   margin-left:45%;
   margin-right:45%;
   padding:.3em .1em;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -ms-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;

 }

 .scrolled:before {
   -webkit-transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -ms-transition: opacity 2s ease-in-out;
   -o-transition: opacity 2s ease-in-out;
   opacity: 0;
 }