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

Adding a Code for 'Scroll down' arrow on top of a gallery


sastavangogh

Question

Site URL: https://www.aditya-sinha.com/

Hi anyone, or @tuanphan hopefully, I am trying to add a code on top of the slideshow on my homepage in order for a scroll down indicator to show up. I tried it on a normal section and it worked, code used: 

<div class="scroll-down"></div>
<style>
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: block;
    text-align: center;
    font-size: 100px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 30px;
  height: 30px;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  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>

But I cannot seem to Insert a code on the slideshow. Any way I can sort this out? 

Password for access: tester

 

Edited by sastavangogh
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi. Add to Design > Custom CSS body.homepage article section:first-child:after { content: ""; position: absolute; left: 50%; bottom: 10px; display: block; text-align: ce

Posted Images

5 answers to this question

Recommended Posts

  • 0
On 4/26/2021 at 9:20 PM, sastavangogh said:

Site URL: https://www.aditya-sinha.com/

Hi anyone, or @tuanphan hopefully, I am trying to add a code on top of the slideshow on my homepage in order for a scroll down indicator to show up. I tried it on a normal section and it worked, code used: 

<div class="scroll-down"></div>
<style>
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: block;
    text-align: center;
    font-size: 100px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 30px;
  height: 30px;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  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>

But I cannot seem to Insert a code on the slideshow. Any way I can sort this out? 

Password for access: tester

 

Hi. Add to Design > Custom CSS

body.homepage article section:first-child:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: block;
    text-align: center;
    font-size: 100px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 30px;
  height: 30px;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  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; }
}

image.thumb.png.25cc4df9ff57cb056903514c33c10342.png

Link to post
  • 0
On 4/28/2021 at 7:38 AM, tuanphan said:

Hi. Add to Design > Custom CSS


body.homepage article section:first-child:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    display: block;
    text-align: center;
    font-size: 100px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 30px;
  height: 30px;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
  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; }
}

image.thumb.png.25cc4df9ff57cb056903514c33c10342.png

Hi @tuanphan, thanks for helping me out with the scroll down indicator a couple months ago (and since!). But I've just come to realise that the arrow is not center aligned on mobile. I've tried numerous codes from similarly answered questions on the forum, but none have seemed to work. 

Would you know how to center align the indicator on mobile devices as well? Thanks. 

PW tester

Link to post
  • 0
On 6/2/2021 at 5:35 PM, sastavangogh said:

Hi @tuanphan, thanks for helping me out with the scroll down indicator a couple months ago (and since!). But I've just come to realise that the arrow is not center aligned on mobile. I've tried numerous codes from similarly answered questions on the forum, but none have seemed to work. 

Would you know how to center align the indicator on mobile devices as well? Thanks. 

PW tester

Looks fine here. Can you explain clearly?

image.thumb.png.f5c2ccefa4dfa3b7781ab0b1f73b50b4.png

Link to post
  • 0
14 hours ago, tuanphan said:

Looks fine here. Can you explain clearly?

image.thumb.png.f5c2ccefa4dfa3b7781ab0b1f73b50b4.png

Hi @tuanphanit is a little to the right if you look closely, any way to center it to the screen properly? 

I've attached a screenshot for better clarity.

 

IMG_7748.jpg

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