Jump to content

Slide In Image Removes Scroll Bar - Help!

Go to solution Solved by Shadmon,

Recommended Posts

I was hoping to add a slide in image on my homepage, just an icon, nothing major. I have got it to work perfectly, however, once I add the code, it removes my scroll bar - so I am assuming there is some bad code stuck in here somewhere. Can anyone help me remove the bug? I really want to use this.

In Code Block:

<div class="logo fade_in_and_bounce_from_left_leftmost"><img src="https://static1.squarespace.com/static/65e77b1f5c5c900ffc35b502/t/65f9b75e17b31c42a40d7410/1710864222300/SR.png"></div>

Added in CSS:

// SLIDE IN IMAGE // 

body 
{
  overflow:hidden;
}

@-webkit-keyframes fade_in_and_bounce_from_left {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fade_in_and_bounce_from_left {
  0%,
  60%,
  75%,
  90%,
  100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.logo {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.fade_in_and_bounce_from_left_leftmost {
  -webkit-animation: fade_in_and_bounce_from_left 2.25s 1;
  animation: fade_in_and_bounce_from_left 2.25s 1;
}

.fade_in_and_bounce_from_left_rightmost {
  -webkit-animation: fade_in_and_bounce_from_left 2s 1;
  animation: fade_in_and_bounce_from_left 2s 1;
}

Thanks in advance 🙂

Edited by FTWSGEM
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.