Jump to content

Arrow scroll down

Recommended Posts

  • Replies 17
  • Created
  • Last Reply

Top Posters In This Topic

Insert Code Block > Paste these 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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 4/18/2020 at 3:00 AM, tuanphan said:

Insert Code Block > Paste these 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>

 

Hey Tuan

In order to create an incentive to scroll down on my banner images Ive pasted

#siteWrapper:after {
 content: "V";
 position: absolute;
 top: 1230px;
 width: 100%;
 text-align: center;
 z-index: 50;
 display: block;
 color: white;
}

However as you'll see on my site www.adrianfisk.com the arrow is very small and hard to see. Is there a way to make the arrow larger?

I did post the your code from above though didn't get a result. My mistake may have been that I posted all of the code. It seems quite long?

As ever you help is much appreciated!

Adrian

Edited by AFisk
Link to comment
25 minutes ago, AFisk said:

Hey Tuan

In order to create an incentive to scroll down on my banner images Ive pasted

 

Where arrow? can you take a screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
8 minutes ago, tuanphan said:

where...

image.thumb.png.2ad35d2eb1b25bee6f19c7c580d12fac.pngimage.thumb.png.2ad35d2eb1b25bee6f19c7c580d12fac.png

Thats very strange as you're showing a page that I don't have! 

My ACT is only on my landing page and not on the CONTACT page. What browser are you using? 

Can you see the small arrow in the example image I gave above. Here's another example image of the ruined house. Its a very small V bottom of the image in the centre?

Screenshot 2020-05-06 at 16.24.36.png

Link to comment
1 hour ago, derricksrandomviews said:

animated-arrow-image-0275   Why not post something like this in your header or top of page. It will show up on both desktop and mobile. 

Hi - Because it would not align with the style of my site. It's too obvious and would be better suited to a shopping site or something similar. I've found the right thing, which is the white V at the bottom of the page. All I need to know is how to Make it bigger and thicker and ideally work on a mobile.

Link to comment

http://clipart-library.com/images_k/white-transparent-arrow/white-transparent-arrow-25.jpg

Take this image, resize it if need be and if you can insert it, it will show up on both mobile and desktop. But make it smaller before you add it to your site. I resized on my site and it looked good for desktop but way too big on mobile. It will work better than using code I think. The  bouncing arrow is a bit much, I agree. 

Edited by derricksrandomviews
Link to comment
3 minutes ago, derricksrandomviews said:

http://clipart-library.com/images_k/white-transparent-arrow/white-transparent-arrow-25.jpg

Take this image, resize it if need be and if you can insert it, it will show up on both mobile and desktop. But make it smaller before you add it to your site. I resized on my site and it looked good for desktop but way too big on mobile. It will work better than using code I think. The  bouncing arrow is a bit much, I agree. 

Derrick hi,

thanks for your advice. 

Where would I insert the arrow and how would I get it to be placed at the bottom of the frame? 

Link to comment

Find a spot  where you can add an image block, you can push it around with spacers if need be, one on the top of the block and expand it to move the arrow down to where you want it. I say this hoping it will work with your template. If it does you won't need the css code you have tried. 

Edited by derricksrandomviews
Link to comment
16 hours ago, AFisk said:

Thats very strange as you're showing a page that I don't have! 

My ACT is only on my landing page and not on the CONTACT page. What browser are you using? 

Can you see the small arrow in the example image I gave above. Here's another example image of the ruined house. Its a very small V bottom of the image in the centre?

 

Can you share link to Exactly page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
On 5/6/2020 at 10:37 AM, AFisk said:

Hey Tuan

In order to create an incentive to scroll down on my banner images Ive pasted

#siteWrapper:after {
 content: "V";
 position: absolute;
 top: 1230px;
 width: 100%;
 text-align: center;
 z-index: 50;
 display: block;
 color: white;
}

However as you'll see on my site www.adrianfisk.com the arrow is very small and hard to see. Is there a way to make the arrow larger?

I did post the your code from above though didn't get a result. My mistake may have been that I posted all of the code. It seems quite long?

As ever you help is much appreciated!

Adrian

Hey Adrian,

 

This approach might work better for you.

 

#page .page-section:first-of-type:after {
 font-family: squarespace-ui-font;
 content: "\E009";
 border: 3px solid #fff;
 border-radius: 50%;
 font-size: 30px;
 text-align: center;
 line-height: 40px;
 height: 40px;
 width: 40px;
 position: absolute;
 bottom: 15px;
 left: 50%;
 transform: translatex(-50%) !important;
 display: block;
 opacity: 1;
 transition: all ease .5;
}

 

This code will work on Squarespace 7.1. You can play with the font-size, height, and width numbers to adjust the size. You can also remove the "border" line if you just want the arrow.

 

I hope this helps!

Link to comment
  • 3 months later...
  • 2 weeks later...
On 1/23/2021 at 9:12 PM, AylaMourtada said:

Hi @AndyB !

that's amazing you really helped. 

Can we change the arrow symbol to a different one? and since it's still, like if you click on it it doesn't really take you to the next block, can we make it clickable so that we achieve a smooth scroll to the next block beneath the banner image?

 

thanks

@AylaMourtada

I'm glad that helped.

Yes, we can change the symbol. Here's a link I have bookmarked that offers different possibilities. You can replace \E009 with something else from this chart. Be sure to keep the quotation marks around the symbol code.

https://ericaheinz.com/notes/symbol-fonts-on-squarespace/#.YB2CSXdKi3J

 

I don't believe that it's possible to add a link to CSS using CSS. There may be a way to do this using javascript. 

Another option would be to use a different method to get an arrow (e.g., an image block with an arrow uploaded or a code block with HTML). I think it's more challenging to get the positioning of the arrow to work as well as it does with the approach I shared. 

As I'm typing this, an idea came to mind that might make positioning a Squarespace element doable. Usually, it's hard to get the arrow to the bottom of the banner because even when using "position: absolute" in the CSS for that element, the child element is still confined to the parent element's restrictions (e.g., padding, position, etc.). But, using a negative margin number may do the trick.

I'll have to play with this idea and report back if it works.

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...

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.