FTWSGEM Posted March 19 Share Posted March 19 (edited) 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 March 24 by FTWSGEM Link to comment
FTWSGEM Posted March 23 Author Share Posted March 23 @tuanphan @Ziggy @Shadmon - any ideas guys? Desperate to get this to work 😞 Link to comment
Solution Shadmon Posted March 24 Solution Share Posted March 24 Hi @FTWSGEM The issue you're facing with the disappearing scrollbar stems from the overflow:hidden; rule applied to the body element within your CSS. So, Please remove this line from your CSS: body { overflow:hidden; } It will fix your issue. Let me know if it works! yomoni_lume21, FTWSGEM, pab_ehayugi22 and 2 others 3 1 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment