Jump to content

Alexdouglas142

Member
  • Posts

    5
  • Joined

  • Last visited

Posts posted by Alexdouglas142

  1. How do you change the colour of the indicator?

     

     

    <div class="scroll-down"></div>
    <style>
      .scroll-down {
    	position: absolute;
    	left: 50%;
    	bottom: 10px;
    	display: block;
    	text-align: center;
    	font-size: 20px;
    	z-index: 100;
    	text-decoration: none;
    	text-shadow: 0;
      width: 13px;
      height: 13px;
      border-bottom: 2px solid red;
      border-right: 2px solid red;
      z-index: 9;
      left: 50%;
      -webkit-transform: translate(-50%, 0%) rotate(45deg);
      -moz-transform: translate(-50%, 0%) rotate(45deg);
      transform: translate(-50%, 0%) rotate(45deg);
    	-webkit-animation: fade_move_down 4s ease-in-out infinite;
    	-moz-animation:    fade_move_down 4s ease-in-out infinite;
    	animation:         fade_move_down 4s ease-in-out infinite;
    }
    
    
    /*animated scroll arrow animation*/
    @-webkit-keyframes fade_move_down {
      0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    @-moz-keyframes fade_move_down {
      0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    @keyframes fade_move_down {
      0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
      50%  { opacity: 1;  }
      100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
    }
    </style>
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.