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

Arrow scroll down

Question

14 answers to this question

Recommended Posts

  • 0

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>

 


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
4 minutes ago, tuanphan said:

Where arrow? can you take a screenshot?

1271950467_Screenshot2020-05-06at16_06_44.thumb.png.c0efc10def63ed509cf04b0730c51dfa.pngIts very small white V , at the bottom centre

Edited by AFisk

Share this post


Link to post
  • 0

where...

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


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


Link to post
  • 0

Ive just seen that it's not appearing if you're using a mobile. It only seems to be working with a desktop.

Share this post


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

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


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

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


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


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

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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