Hi ,I want to recreate this footer

[Sao23]

Hi,I wanna recreate this footer animation please: https://cheatpal.co

my website: www.aiciavem.ro

[BSSCommerce-B2B]

Hi @Sao23 ,

Step 1: Go to Online Store -> Theme -> Customize

Step 2: Click to footer -> Add section -> Custom liquid

Drag these 2 bars to 0

Step 3: Add this code to liquid code section

<div class="wave-container" bis_skin_checked="1" style="
    background: white;
    z-index: 100;
">
    <svg class="waves-animated-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
  <defs>
    <path id="gentle-wave" d="M-160 44c30 0
      58-18 88-18s
      58 18 88 18
      58-18 88-18
      58 18 88 18
      v44h-352z" fill="#478d8d"></path>
  </defs>
  <g class="parallax1">
    <use xlink:href="#gentle-wave" x="50" y="3"></use>
  </g>
  <g class="parallax2">
    <use xlink:href="#gentle-wave" x="50" y="0"></use>
  </g>
  <g class="parallax3">
    <use xlink:href="#gentle-wave" x="50" y="9"></use>
  </g>
  <g class="parallax4">
    <use xlink:href="#gentle-wave" x="50" y="6"></use>
  </g>
</svg>
</div>

Step 4: Return to admin page -> Online Store -> Theme -> Edit code.

Step 5: Find the file custom.css and add this code to the end of file

.wave-container {
  position: relative;
  width: 100%;
  height: 3rem;
  overflow: hidden;
  line-height: 0;
}

.waves-animated-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.parallax1 > use {
  animation: move-forever1 10s linear infinite;
}

.parallax2 > use {
  animation: move-forever2 8s linear infinite;
  opacity: 0.4;
}

.parallax3 > use {
  animation: move-forever3 6s linear infinite;
  opacity: 0.3;
}

.parallax4 > use {
  animation: move-forever4 4s linear infinite;
  opacity: 0.2;
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

Here's the result

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day! 

[Sao23]

Thanks a lot! I have 2 questions, the first code I need to put it in footer liquid file no?

secound is does this animation makes a lot of lag for the website? Can you please help me make it without the white background and small border in the back pls?:)

[Sao23]

it is not working for me, im using shella theme, when I put your code up in custom liquid it doesnt work

[Sao23]

[BSSCommerce-B2B]

@Sao23, It's just CSS and HTML, so it shouldn't cause any lag. Did you follow the steps exactly as I instructed? Please check your message, and I'll help you out.