Adding a scroll indicator over the index gallery slideshow banner

pelanderson · February 5

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

tuanphan · February 8

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

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

Add this code under

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

pelanderson · February 11

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

Thanks so much

pelanderson · February 12

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

tuanphan · February 15

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

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

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

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

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

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

Try new code

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

pelanderson · March 5

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

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

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

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

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

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources