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

Scroll Down Arrow


GavinM01

Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 0
Posted (edited)

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
Posted (edited)
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 post
  • 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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 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 post
  • 0

Hi, 

I too am just wanting a simple 'scroll' down arrow on my squarespace 7.1 site on various pages. There used to be an option to have a scroll down icon on squarespace 7.0.

Can anyone help with CSS for this?

Michael

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...