Tutorial

Animated Announcement Bar

Fluid engine - Squarespace 7.1 - HTML | CSS | jQuery - medium experience needed

Ever wondered how to get an animated top banner instead of the ‘boring’ one Squarespace offers? Here’s your super exciting, animated custom announcement banner (and you can add anything you want, in it!)

Let’s get started!

Instructions

  • We’re going to start by creating our custom banner in HTML. The animated swapping text is is actually a slider/carousel. I used the Splide.js library for this, as it’s lightweight and easy to customize without getting too much into writing code. You can find the documentation on Splide.JS here.

  • There is no need to download the entire library, we’re going to use the script and link provided by them which includes the JavaScript and the CSS for the slider. Copy and paste the script and link into your Header. Settings –> Advanced –> Code Injection
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
  • Now let’s start with building the actual banner. We will add this to the homepage header (or any other page) or in the general header if you want to be able to see it on all pages. I will create it on one page only. So I will go to the cogwheel of the page I want the banner to appear on and go to Advanced. Here you can inject custom code or scripts, specific to a page.

  • Below is the code example for the splide slider. You see there is a container with class ‘splide’ with some important attributes for the slider to work properly. The actual slides are list items in an unordered list. The list items can contain text, images or anything you like. The data-splide-interval represents the autoplay interval duration in milliseconds. You can adjust this to your liking.

  • At the bottom of the container (.splide) we’ll add in a close button, so people can close/hide the entire banner in the front end, later on. I’ve used Font Awesome icons on my banner, but you can always use other icons instead, just don’t forget to style them with some CSS. To use the Font Awesome icons add your Font Awesome CDN Script to the general header of your website.

  • Depending on where you add your banner (General header or Page header, you need to add a line of css for the header to have a top margin. I’ve added it directly into my page header below my banner div. Save the changes you’ve made!
<div class="splide" role="group" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide" data-splide-interval="6000"> <i class="fa-regular fa-thumbs-up"></i> <span class="bold-text"> SALE!</span> Use<span class="bold-text discount-code"> WELCOME2023 </span> to get 20% off your order</li>
			<li class="splide__slide" data-splide-interval="6000"> <i class="fa-solid fa-truck-fast"></i> FREE WORLDWIDE SHIPPING </li>
			<li class="splide__slide" data-splide-interval="6000"> <i class="fa-solid fa-cart-shopping"></i> OPEN | 9am - 5pm </li>
		</ul>
  </div>
    <button class="close-banner-button"> <i class="fa-solid fa-xmark"></i> </button>
</div>

<style>
#header {
  margin-top: 60px;
}
</style>
  • Now we have the HTML done, let’s add some jQuery code, to make the slider work and to add a function to the close button. Go back to Settings –> Advanced –> Code Injection and add the code below into your Footer.

  • First start with your slider. There are lots of options to customize the slider. I’ll explain my choices and the options in the code below We want the slider to loop infinite [type:’loop’] We will make a vertical slider  [direction:’ttb] Set the height of your slider [height: ’60px’] We want the slider to autoplay the slides [autoplay: true] We don’t want dots or indicators on the slider [pagination: false] We don’t want to see the arrows to go through the slider [arrows: false] For more settings, see Splide options.
<script>
var splide = new Splide( '.splide', {
  type: 'loop',
  direction: 'ttb',
  height   : '60px',
  autoplay: true,
  pagination: false,
  arrows: false,
} );

splide.mount();
</script>
  • Now we just need to add the function for the close button. When you click on the close button,  the on click function will be executed. This will first fadeOut the splide (which is the entire container) and then remove the container.

  • We also want the header to be back on top without the top margin, so we add the function to change the CSS to go back to 0px on margin-top. Save the changes you’ve made!
<script>
$(document).ready(function() {
    $('.close-banner-button').on('click', function(e) { 
       $(".splide").fadeOut("swing", function() {
        $(this).remove();
        $('#header').css("margin-top", "0px");
    });
  });
});
</script>
  • Almost there!! Let’s make the banner visible and style it with some CSS. You can style it however you like, font, size, colours etc. Make sure to add the mobile view styles and make sure the content fits on mobile view. Save the changes you’ve made!
// ADD THIS TO YOUR GENERAL CSS//
    
.splide {
  z-index: 999;
}

.splide__list {
  color: #ffffff !important;
  width: 100%;
}

.splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #000000 !important;
  font-family: europa; 
} 

.splide__list i {
  margin-right: 30px;
}

.bold-text {
  font-weight: 800;
  margin-right: 5px;
  margin-left: 5px;
}

.close-banner-button {
  color: white;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  cursor: pointer;
  background-color: transparent !important;
  border: none;
}

// MOBILE VIEW //
@media (max-width: 800px) { 
.splide__list i {
  margin-right: 10px !important;
}
  .splide__slide {
font-size: 12px;
} 
}

And there it is! A fully custom announcement bar, sliding vertically through your announcements and your visitors are able to close the bar, when they’ve had enough of it!