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

Scroll Arrow Indicator


michael_bates

Question

Recommended Posts

  • 0
On 8/12/2021 at 2:25 AM, sheasdesign said:

@tuanphan what code injection would you put if you wanted the section to remove once scrolling? Thanks in advance!

Hi. "section to remove" Can you explain clearly this?

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

Link to comment
  • 0
On 7/22/2020 at 5:45 PM, tuanphan said:

Add to Code Block

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

 

Hi @tuanphan , I used the above code but I am unable to scroll to the next section using this arrow. 

here's the url:

https://www.divyachunduru.me/

 

 

Link to comment
  • 0

@tuanphan

Site URL: https://www.awarecanada.com

Passcode to site is: Woods

The first scroll down arrow on the page (above the fold) is fixed but the second one on the "new releases" section moves (despite using the same coding) depending on screen size, why is this happening and how do I get it to stay just above the bottom of the image? 

Screenshot 2021-08-23 at 19.21.25.png

Screenshot 2021-08-23 at 18.02.36.png

Link to comment
  • 0
13 hours ago, cynicxl said:

@tuanphan

Site URL: https://www.awarecanada.com

Passcode to site is: Woods

The first scroll down arrow on the page (above the fold) is fixed but the second one on the "new releases" section moves (despite using the same coding) depending on screen size, why is this happening and how do I get it to stay just above the bottom of the image? 

 

Screenshot 2021-08-23 at 19.21.25.png

Screenshot 2021-08-23 at 18.02.36.png

 

Hi,

You added code to Code BLock or Code Injection?

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

Link to comment
  • 0

Hi 👋

I added the code to a code block in a section on my website. It's not working. It's just showing the actual code.... See attachment of what I want and what is currently happening. Id also like the "Scroll to Discover" to be clickable and it anchors you down to the next section.
 

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


 

Screen Shot 2021-08-30 at 2.59.30 PM.png

Screen Shot 2021-08-30 at 3.00.07 PM.png

Link to comment
  • 0
9 hours ago, CarinaG said:

Hi 👋

I added the code to a code block in a section on my website. It's not working. It's just showing the actual code.... See attachment of what I want and what is currently happening. Id also like the "Scroll to Discover" to be clickable and it anchors you down to the next section.
 

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


 

Screen Shot 2021-08-30 at 2.59.30 PM.png

Screen Shot 2021-08-30 at 3.00.07 PM.png

In Code Block, uncheck this option

Display Source Code

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

Link to comment
  • 0
On 9/21/2021 at 3:13 AM, RolandFuseHub said:

Hi @tuanphan same mobile issue here - arrow not centered.

https://devstanbury.squarespace.com/?password=sneakpeek

Thanks,

Roland

CleanShot 2021-09-20 at 13.12.43.jpg

It looks like you solved?

image.thumb.png.7be66f879d693f4849b4746c558782b7.png

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

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