Jump to content

Logo Resize Smoothly on Scroll, Bedford Template?

Recommended Posts

Hello!Using the Bedford template, I've been able to adapt this code to get it to immediately resize after scrolling 75 pixels down. Ideally the client would like the logo shrink with a smooth transition.

Site is here: https://carl-huber-j3cs.squarespace.com/


<script>
$(document).on('scroll', function() {
 if ($(document).scrollTop() >= 75) {
   $('#logoImage img').css('width', '200px');
 } else {
   $('#logoImage img').css('width', '');
 }
});
</script>


I tried putting the following in the CSS for logoImage but it doesn't seem to be working:


  transition: all .3s ease;



Link to comment
  • Replies 5
  • Views 7.4k
  • Created
  • Last Reply

Firstly, thanks for your code sample.

Here's what works to animate it:

Within your image tag, include a class name ie.

<img src="logoimg.png" width="100" class="animate"/>

Within your css code include your


.animate{
transition: all 0.5s ease;
}



Link to comment

That looks great @jonnieay but I'm not sure how I would add a class declaration to the logo image? If it's simple I'm just not thinking of it...any ideas? Thanks for taking the time to write!

Link to comment

Oh I know that, like, technically how to do it. But since Squarespace handles the HTML code for the logo I'm not sure physically where to go to be able to put that declaration in. I know how to tweak CSS that's already declared, but not how to add "class='animate'" when it's not already there, you know? I'm not sure if I'm explaining that right but thank you for your continued thoughts, @jonnieay ! :)

Link to comment
  • 4 months later...

Well it's quite simple, at least when I'm looking on your site right now.

Every browser has trouble when it's comparing

width: auto

and width with percents, pxs, ems, rems, vhs, what ever.

You wrote, that you can tweak css. So in css file for selector

#logoImage img

you have to change

width: auto

to

width: 100%

and add

transition: width 300ms ease;

(you don't have to force animate all, when you only want to animate width, let the poor visitor's gpu be).

For quick preview go to your site, then put into omnibox (browser's field for url):

javascript: $("head").append('<style>#logoImage a img {width: 100%; transition: width 300ms ease;}</style>')

And please fix it fast, it looks really bad without the animation ;)

Link to comment

Archived

This topic is now archived and is closed to further replies.

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