Jump to content

Adding a scroll indicator over the index gallery slideshow banner

Go to solution Solved by tuanphan,

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

scroll.jpg

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

a.jpg

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 3 months later...
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?

image.thumb.png.dd58ea1ef0e906148251afe1e10e9fdc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

 

image.png.79c561186b932395111832428539c00a.png

ah this feature, this is not possible

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.