Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Scaling SVG logo on scroll


noctisariel

Question

Site URL: https://salamander-plane-pf6e.squarespace.com/residential

Friends, hoping someone with more CSS knowledge than me (which is pretty much everyone) can hopefully advise on how I might go accomplishing the following: 

I'm building a simple site to help launch a new brand for a client. We spent a lot of time developing the new visual identity and want to showcase the logo and new name really prominently when you first get to the website.

I've managed to get a SVG logo into my header, but what I really want to do is have the logo display massive and dead center as soon as you get to the site, and then have it scale and move to the upper left corner of the header on scroll. I put together a quick, simple animation to help articulate what I'm describing.

Is this possible? Is there an easier/better alternative to what I'm asking? The animation isn't even necessary - I'd be happy with being able to land on a separate page that just has the logo sized how I want it, that then moves to the homepage on click or something. 

Thank you so much in advance for any help! 

Link to post
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Wonderful, fixed it! Thank you very much. 

Man, I'd be lost without you! This worked perfectly. Thanks for all your help throughout this process. I appreciate it so much! 

Posted Images

21 answers to this question

Recommended Posts

  • 1

The landing page is going to be easier. Here is a mock up I did. I used the source for the SVG minus the xml tag in a code block. Then hide the header and footer of the page. I didn't have to fiddle with the size to get it that way. It is also responsive because I didn't fiddle with the size. The svg can also be made a link. Although a whole page onclick might be a better option.

2117827244_ScreenShot2021-04-21at6_33_09PM.thumb.png.bf30cd73436bd0870d2cbbfcb6f1b04a.png

Would that work for your need?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

Here is the CSS code I'm currently using to get the svg logo to display...

/* tuan -5mi */
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/60745ecb1a38bf0adab35cb0/t/607471ec29782c28ffd50276/1618244076196/M-Frame_Logo_White.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Link to post
  • 0

@creedon incredible! Can't thank you enough for your help with this man. Really really appreciate it. I think this solution would work more than fine. Do you think it would be a better UX to be able to click anywhere - not just the logo - to reveal the main homepage? 

Link to post
  • 0

 I think something like an enter button is most likely to get folks to click-through. Not sure how that would fit in but it's easy to test! 🙂

The next best is probably the whole page click. Most folks I think will click somewhere on a page at least once to see if something will happen. That will require the business plan or above and some Javascript.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

@creedon, hope you had a great weekend! Thanks again for all your help with this man, really appreciate it. 

The enter button definitely seems like it makes more sense. What would that process look like in terms of getting that implemented? Would I just be adding a new page with the custom code you used to hide the header/footer and display the logo, and then setting this page as the homepage? 

Very grateful for your assistance. 

Link to post
  • 0
Quote

What would that process look like in terms of getting that implemented?

What you have described is pretty much it. Throw in the button and I think you'll be good. Once you've created the page if you post the URL here we can help with the CSS to hide the header/footer.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<!--

  hide page header and footer
  
  Version      : 1.0
  
  SS Version   : 7.1
  
  Notes        : this effect is not active in SS Preview to test it use full
                 preview < https://bit.ly/3vncHIf > or private browsing
                 < https://bit.ly/3f6lhq2 >.
                 
  By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    body:not( .sqs-edit-mode ) #header,
    body:not( .sqs-edit-mode ) #footer-sections
    
      {
      
        display : none;
        
        }
        
    </style>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

Thanks so much for all your help @creedon

I'm now encountering another issue with my SVG logo...

Depending on my browser window size, it looks like my logo is sometimes getting cropped on the right edge - right where the registration mark appears. (See attached screenshot.)

Forgive my ignorance, but it's almost as if my logo is placed behind a frame that sometimes covers it. 

Here is the CSS I'm using to apply and format the svg logo. 

/* tuan -5mi */
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/60745ecb1a38bf0adab35cb0/t/607471ec29782c28ffd50276/1618244076196/M-Frame_Logo_White.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}

Screen Shot 2021-05-03 at 12.52.25 PM.png

Link to post
  • 0

@creedon, sorry to bring this back from the dead (and please excuse my ignorance), but how would I go about finding the SVG code you referred to? I've managed to get the header and footer hidden, but I just can't get the SVG logo to display on this page. 

As always, REALLY appreciate your help. 

Link to post
  • 0

As an alternative to getting at the source of the svg you can refer to it using an image tag in a code block.

<img src="https://static1.squarespace.com/static/60745ecb1a38bf0adab35cb0/t/607471ec29782c28ffd50276/1618244076196/M-Frame_Logo_White.svg"/>

To get to the source put that url in the address bar of your browser, then view source of the page.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...