Adding a scroll indicator over the index gallery slideshow banner

pelanderson · February 5, 2023

Any code to add a scroll indicator over a Brine index gallery slideshow banner?

https://renfield-centre.squarespace.com/
PW: renfield

Thanks
Pete

Edited February 6, 2023 by pelanderson

tuanphan · February 8, 2023

Add to Design > Custom CSS

section#intro-gallery {
    position: relative;
}
section#intro-gallery:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 30px;
    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; }
}

pelanderson · February 8, 2023

7 hours ago, tuanphan said:

Add to Design > Custom CSS

section#intro-gallery {
    position: relative;
}
section#intro-gallery:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 30px;
    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; }
}

Thanks so much. It's not quite centred if it's possible to adjust slightly?

tuanphan · February 11, 2023

Add this code under

section#intro-gallery:after {
    left: calc(~"50% - 8px");
}

pelanderson · February 11, 2023

12 hours ago, tuanphan said:
Add this code under
section#intro-gallery:after {
    left: calc(~"50% - 8px");
}

Thanks so much

pelanderson · February 12, 2023

@tuanphan Is it possible to link to the next section on clicking the scroll arrow? Thanks, Pete

tuanphan · February 15, 2023

On 2/13/2023 at 12:32 AM, pelanderson said:

@tuanphan Is it possible to link to the next section on clicking the scroll arrow? Thanks, Pete

Possible. But you use/will use Personal or Business Plan? We can give code easier

pelanderson · February 15, 2023

6 hours ago, tuanphan said:

Possible. But you use/will use Personal or Business Plan? We can give code easier

Hi, will be business plan. Thanks

tuanphan · February 21, 2023

On 2/16/2023 at 1:37 AM, pelanderson said:

Hi, will be business plan. Thanks

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
	section#intro-gallery a.next-section {
      padding-top: 70px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-block;
      color: #fff;
      font : normal 400 20px/1 'Josefin Sans', sans-serif;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
        animation: fade_move_down 4s ease-in-out infinite;
    }
section#intro-gallery a.next-section:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 50px;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
</style>
<script>
	$(function() {
      $("section#intro-gallery").append('<a href="#" class="next-section"></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("section#intro-gallery").next().offset().top}, 500, 'linear');
      });
    });
</script>

pelanderson · February 21, 2023

7 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
	section#intro-gallery a.next-section {
      padding-top: 70px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-block;
      color: #fff;
      font : normal 400 20px/1 'Josefin Sans', sans-serif;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
        animation: fade_move_down 4s ease-in-out infinite;
    }
section#intro-gallery a.next-section:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 50px;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
</style>
<script>
	$(function() {
      $("section#intro-gallery").append('<a href="#" class="next-section"></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("section#intro-gallery").next().offset().top}, 500, 'linear');
      });
    });
</script>

Brilliant, thanks @tuanphan Can you advise how I can adjust the arrow so it's centred and above the gallery dots?

tuanphan · February 25, 2023

On 2/21/2023 at 10:04 PM, pelanderson said:

Brilliant, thanks @tuanphan Can you advise how I can adjust the arrow so it's centred and above the gallery dots?

Add this code under

<style>
  a.next-section {
    bottom: 50px !important;
}
</style>

pelanderson · February 27, 2023

On 2/25/2023 at 1:26 PM, tuanphan said:
Add this code under
<style>
  a.next-section {
    bottom: 50px !important;
}
</style>

Hi, added that under but no change

tuanphan · March 5, 2023

Try new code

<style>
  a.next-section {
    bottom: 50px !important;
    margin-left: -40px;
}
</style>

pelanderson · March 5, 2023

8 hours ago, tuanphan said:

Try new code

<style>
  a.next-section {
    bottom: 50px !important;
    margin-left: -40px;
}
</style>

Brilliant, thanks so much @tuanphan On click it goes down just a little too far. Is it possible to adjust? Thanks, Pete

tuanphan · March 6, 2023

11 hours ago, pelanderson said:

Brilliant, thanks so much @tuanphan On click it goes down just a little too far. Is it possible to adjust? Thanks, Pete

Because header is sticky to top on scroll. You can consider disable sticky header on this page.

If you need, we can give the code

pelanderson · March 6, 2023

3 hours ago, tuanphan said:

Because header is sticky to top on scroll. You can consider disable sticky header on this page.

If you need, we can give the code

Thanks, if you can give code that would be great

tuanphan · March 8, 2023

On 3/6/2023 at 8:10 PM, pelanderson said:

Thanks, if you can give code that would be great

Add to Design > Custom CSS

/* Disable homepage header sticky */
body.homepage header.Header.Header--top {
    position: relative !important;
}

Mary_DG · June 30, 2023

hello @tuanphan I tried this but it didn't work for me.

https://www.hellocinnamon.com/start-of-a-journey

Need to add scroll indicator below the gallery slideshow removing the left and right arrow controls and moving it to the scroll indicator line. TYVM, Mary

tuanphan · July 1, 2023

On 6/30/2023 at 7:16 AM, Mary_DG said:

hello @tuanphan I tried this but it didn't work for me.

https://www.hellocinnamon.com/start-of-a-journey

Need to add scroll indicator below the gallery slideshow removing the left and right arrow controls and moving it to the scroll indicator line. TYVM, Mary

Add it here?

Mary_DG · July 3, 2023

Hello @tuanphan yes that is correct. Thank you so much in advance.

tuanphan · July 5, 2023

On 7/4/2023 at 5:54 AM, Mary_DG said:

Hello @tuanphan yes that is correct. Thank you so much in advance.

Add this to Last Line in Settings > Developer Tools > Code Injection > Footer

<script>
$(function() {
      $('[data-section-id="6499dc0f9667031509523420"]').append('<a href="#" class="next-section"></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $('[data-section-id="6499dc0f9667031509523420"]').next().offset().top}, 500, 'linear');
      });
    });
</script>
<style>
	[data-section-id="6499dc0f9667031509523420"] a.next-section {
      padding-top: 70px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-block;
      color: black;
      font : normal 400 20px/1 'Josefin Sans', sans-serif;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
      animation: fade_move_down 4s ease-in-out infinite;
      z-index: 999999999999999999999999999;
      padding: 10px;
    }
[data-section-id="6499dc0f9667031509523420"] a.next-section:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 50px;
}
/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
</style>

Mary_DG · July 5, 2023

@tuanphan thank you, I tried this but it is giving me downward scroll arrow to scroll down the page, I was hoping to get the round dot indicator on carousel, like below sample.

tuanphan · July 8, 2023

On 7/6/2023 at 1:01 AM, Mary_DG said:

@tuanphan thank you, I tried this but it is giving me downward scroll arrow to scroll down the page, I was hoping to get the round dot indicator on carousel, like below sample.

ah this feature, this is not possible

Adding a scroll indicator over the index gallery slideshow banner

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources