Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Scroll Down Arrow


GavinM01

Question

13 answers to this question

Recommended Posts

  • 0

Add Code Block with this code

<div class="mouse">  
  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>
  
</div>
<style>
  .mouse {
  margin: 50px auto;
  width: 100px;
}

.mouse-icon {
   width: 25px;
   height: 45px;
   border: 2px solid white; /*you can change 'white' to a hex color*/
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}
.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white; /*you can change 'white' to a hex color*/
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
</style>

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Yes. You want a simple down arrow?

On 5/26/2020 at 5:47 PM, Heidi2020 said:

Hey tuanphan, it doesn't seem to be an arrow. I have a round box with 2 lines going down ... ?

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
1 hour ago, tuanphan said:

Yes. You want a simple down arrow?

 

i managed to make the arrow bounce...initially wanted to have gooye scroll down arrow from codepen - https://codepen.io/flik185/pen/WxwLdX , but none of the codes from the webpage work ...should there be extra codes to use codepen codes in squarespace? 

And is it possible to have 2 arrows just like that to use for a gallery? Like going right and left?

 

thank you so much!

Edited by Heidi2020
Link to comment
  • 0
22 hours ago, Heidi2020 said:

i managed to make the arrow bounce...initially wanted to have gooye scroll down arrow from codepen - https://codepen.io/flik185/pen/WxwLdX , but none of the codes from the webpage work ...should there be extra codes to use codepen codes in squarespace? 

And is it possible to have 2 arrows just like that to use for a gallery? Like going right and left?

 

thank you so much!

Which code did you insert to your site? Codepen link above use SCSS, you need to convert to CSS

It will be (Add to Code Block)

<div class="ico animated">
  
  <div class="circle circle-top"></div>  
  <div class="circle circle-main"></div>
  <div class="circle circle-bottom"></div>  
  
  <svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve" >
  <defs>
    <clipPath id="cut-off-arrow">
      <circle cx="306" cy="306" r="287"/>
    </clipPath>
    
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
   
  </defs>
    <path  class="st-arrow" d="M317.5,487.6c0.3-0.3,0.4-0.7,0.7-1.1l112.6-112.6c6.3-6.3,6.3-16.5,0-22.7c-6.3-6.3-16.5-6.3-22.7,0
					l-86,86V136.1c0-8.9-7.3-16.2-16.2-16.2c-8.9,0-16.2,7.3-16.2,16.2v301.1l-86-86c-6.3-6.3-16.5-6.3-22.7,0
					c-6.3,6.3-6.3,16.5,0,22.7l112.7,112.7c0.3,0.3,0.4,0.7,0.7,1c0.5,0.5,1.2,0.5,1.7,0.9c1.7,1.4,3.6,2.3,5.6,2.9
					c0.8,0.2,1.5,0.4,2.3,0.4C308.8,492.6,313.8,491.3,317.5,487.6z"/>
</svg>
</div>
<style>
.ico {
  margin: 0 auto;
  text-align: center;
  width: 100px;
  height: 100px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-filter: url("#goo");
          filter: url("#goo");
}
.ico .circle {
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transform-origin: 0%;
          transform-origin: 0%;
}
.ico .circle.circle-top {
  height: 33.3333333333px;
  width: 41.6666666667px;
  -webkit-animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
          animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  z-index: 0;
  top: 0;
}
.ico .circle.circle-bottom {
  height: 33.3333333333px;
  width: 41.6666666667px;
  -webkit-animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
          animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  z-index: 9;
  bottom: 0px;
}
.ico .st-arrow {
  fill: #55544F;
  -webkit-animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
          animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
  -webkit-perspective: 9000px;
          perspective: 9000px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.svg {
  z-index: 9;
  position: relative;
}

@-webkit-keyframes blob-1-anim {
  0% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  14% {
    -webkit-transform: translateX(-50%) translateY(-8px);
            transform: translateX(-50%) translateY(-8px);
  }
  24% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
}

@keyframes blob-1-anim {
  0% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  14% {
    -webkit-transform: translateX(-50%) translateY(-8px);
            transform: translateX(-50%) translateY(-8px);
  }
  24% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
}
@-webkit-keyframes blob-2-anim {
  0% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  30% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  70% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  95% {
    -webkit-transform: scale(1) translate(-50%, 26px);
            transform: scale(1) translate(-50%, 26px);
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
}
@keyframes blob-2-anim {
  0% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  30% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  70% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  95% {
    -webkit-transform: scale(1) translate(-50%, 26px);
            transform: scale(1) translate(-50%, 26px);
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
}
@-webkit-keyframes scrolly {
  0% {
    -webkit-transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
            transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
            transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  70% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
            transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  95% {
    -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
            transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
  100% {
    -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
            transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
}
@keyframes scrolly {
  0% {
    -webkit-transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
            transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
            transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  70% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
            transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  95% {
    -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
            transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
  100% {
    -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
            transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
}

</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
7 hours ago, saira757 said:

This works but how do we make a clickable? Also when you click on the arrow, I want it to scroll down...

Can you share link to your site? I can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

jQuery (add script, directions in my signature)

$(document).ready(function() {
  $('.ico.animated').on('click', function() {
    $('html,body').animate({
      scrollTop: $('.page-section:nth-child(2)').offset().top - $('#header').height()
    }, 1000);
  });
});

CSS

.ico.animated {
	cursor: pointer;
}

 

Link to comment
  • 0
On 5/25/2020 at 10:10 AM, tuanphan said:

Add Code Block with this code


<div class="mouse">  
  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>
  
</div>
<style>
  .mouse {
  margin: 50px auto;
  width: 100px;
}

.mouse-icon {
   width: 25px;
   height: 45px;
   border: 2px solid white; /*you can change 'white' to a hex color*/
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}
.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white; /*you can change 'white' to a hex color*/
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
</style>

 

This is brilliant 🙂 but when I add it into a banner header it seems to be forced black regardless of hex or colour you write in the code is there a fix for this? The template seems to force it to remain black?

For example - 
http://partnerships.autotrader.co.uk/hyundai-e-suv

Your Martin

Link to comment
  • 0
On 5/25/2020 at 5:10 AM, tuanphan said:

Add Code Block with this code


<div class="mouse">  
  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>
  
</div>
<style>
  .mouse {
  margin: 50px auto;
  width: 100px;
}

.mouse-icon {
   width: 25px;
   height: 45px;
   border: 2px solid white; /*you can change 'white' to a hex color*/
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}
.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white; /*you can change 'white' to a hex color*/
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
</style>

 

Love this! Is there a way to delay it showing up on the home page for a second or two? 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...