Jump to content

Code to float images and lock to edges on home screen?

Recommended Posts

  • Replies 8
  • Views 1.2k
  • Created
  • Last Reply

This is not a solution but more a proof of concept.

Add the following to Settings > Advanced > Code Injection > FOOTER.

<img id="twc-fixed-viewport-image-bottom" src="https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1623477381290-GJD50DRYTEQPWVZ2H3AP/ke17ZwdGBToddI8pDm48kN4xVJe-92wc5QhcaMroFZtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7dBUeh7tVDxQci3gUes7eqCZwl7h75fPhhsbstj2504ASm5IrL9BEbyGsUOFAVXRGw/R6b1ec000c5a7a92bd33e325e5199aa53-25%25.png" style="display : none;">

<img id="twc-fixed-viewport-image-left" src="https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1623477381290-GJD50DRYTEQPWVZ2H3AP/ke17ZwdGBToddI8pDm48kN4xVJe-92wc5QhcaMroFZtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7dBUeh7tVDxQci3gUes7eqCZwl7h75fPhhsbstj2504ASm5IrL9BEbyGsUOFAVXRGw/R6b1ec000c5a7a92bd33e325e5199aa53-25%25.png" style="display : none;">

<img id="twc-fixed-viewport-image-right" src="https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1623477381290-GJD50DRYTEQPWVZ2H3AP/ke17ZwdGBToddI8pDm48kN4xVJe-92wc5QhcaMroFZtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7dBUeh7tVDxQci3gUes7eqCZwl7h75fPhhsbstj2504ASm5IrL9BEbyGsUOFAVXRGw/R6b1ec000c5a7a92bd33e325e5199aa53-25%25.png" style="display : none;">

<img id="twc-fixed-viewport-image-top" src="https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1623477381290-GJD50DRYTEQPWVZ2H3AP/ke17ZwdGBToddI8pDm48kN4xVJe-92wc5QhcaMroFZtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7dBUeh7tVDxQci3gUes7eqCZwl7h75fPhhsbstj2504ASm5IrL9BEbyGsUOFAVXRGw/R6b1ec000c5a7a92bd33e325e5199aa53-25%25.png" style="display : none;">

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

<style>

  #twc-fixed-viewport-image-bottom {
  
    bottom : 0;
    display : inline !important;
    left : 50%;
    position : fixed;
    transform : translate( -50%, 0 );
    z-index : 9;
    
    }
    
  #twc-fixed-viewport-image-left {
  
    display : inline !important;
    position : fixed;
    top : 50%;
    transform : translate( calc( 231px - 245px ), calc( -245px / 2 ) ) rotate( 90deg );
    z-index : 9;
    
    }
    
  #twc-fixed-viewport-image-right {
  
    display : inline !important;
    position : fixed;
    right : 0;
    top : 50%;
    transform : translate( calc( 245px - 231px ), calc( -245px / 2 ) ) rotate( -90deg );
    z-index : 9;
    
    }
    
  #twc-fixed-viewport-image-top {
  
    display : inline !important;
    left : 50%;
    position : fixed;
    top : 0;
    transform : translate( -50%, 0 ) rotate( 180deg );
    z-index : 9;
    
    }
    
  </style>

The first thing you are going to want to do is replace my test image URL with your actual image. I strongly suggest, if you can, make the image dimensions ( h & w ) the same. A square is easier to deal with and shouldn't require some of the calculations I had to do to accommodate the non-square dimension image I used. Of course when you change the image the calculations will go off. Provide the URL for your image to me and I can update the CSS.

Here's a screenshot of my test.

144587292_ScreenShot2021-06-12at12_43_18AM.thumb.png.b097ca8c23adc9953b8a4c8369858733.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 6/12/2021 at 3:40 AM, creedon said:

This is not a solution but more a proof of concept.

Add the following to Settings > Advanced > Code Injection > FOOTER.


<img id="twc-fixed-viewport-image-bottom" src="https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1623477381290-GJD50DRYTEQPWVZ2H3AP/ke17ZwdGBToddI8pDm48kN4xVJe-92wc5QhcaMroFZtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7dBUeh7tVDxQci3gUes7eqCZwl7h75fPhhsbstj2504ASm5IrL9BEbyGsUOFAVXRGw/R6b1ec000c5a7a92bd33e325e5199aa53-25%25.png" style="display : none;">

<img id="twc-fixed-viewport-image-left" src="https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1623477381290-GJD50DRYTEQPWVZ2H3AP/ke17ZwdGBToddI8pDm48kN4xVJe-92wc5QhcaMroFZtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7dBUeh7tVDxQci3gUes7eqCZwl7h75fPhhsbstj2504ASm5IrL9BEbyGsUOFAVXRGw/R6b1ec000c5a7a92bd33e325e5199aa53-25%25.png" style="display : none;">

<img id="twc-fixed-viewport-image-right" src="https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1623477381290-GJD50DRYTEQPWVZ2H3AP/ke17ZwdGBToddI8pDm48kN4xVJe-92wc5QhcaMroFZtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7dBUeh7tVDxQci3gUes7eqCZwl7h75fPhhsbstj2504ASm5IrL9BEbyGsUOFAVXRGw/R6b1ec000c5a7a92bd33e325e5199aa53-25%25.png" style="display : none;">

<img id="twc-fixed-viewport-image-top" src="https://images.squarespace-cdn.com/content/v1/60374efe93a6cb725a5c6856/1623477381290-GJD50DRYTEQPWVZ2H3AP/ke17ZwdGBToddI8pDm48kN4xVJe-92wc5QhcaMroFZtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7dBUeh7tVDxQci3gUes7eqCZwl7h75fPhhsbstj2504ASm5IrL9BEbyGsUOFAVXRGw/R6b1ec000c5a7a92bd33e325e5199aa53-25%25.png" style="display : none;">

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


<style>

  #twc-fixed-viewport-image-bottom {
  
    bottom : 0;
    display : inline !important;
    left : 50%;
    position : fixed;
    transform : translate( -50%, 0 );
    z-index : 9;
    
    }
    
  #twc-fixed-viewport-image-left {
  
    display : inline !important;
    position : fixed;
    top : 50%;
    transform : translate( calc( 231px - 245px ), calc( -245px / 2 ) ) rotate( 90deg );
    z-index : 9;
    
    }
    
  #twc-fixed-viewport-image-right {
  
    display : inline !important;
    position : fixed;
    right : 0;
    top : 50%;
    transform : translate( calc( 245px - 231px ), calc( -245px / 2 ) ) rotate( -90deg );
    z-index : 9;
    
    }
    
  #twc-fixed-viewport-image-top {
  
    display : inline !important;
    left : 50%;
    position : fixed;
    top : 0;
    transform : translate( -50%, 0 ) rotate( 180deg );
    z-index : 9;
    
    }
    
  </style>

The first thing you are going to want to do is replace my test image URL with your actual image. I strongly suggest, if you can, make the image dimensions ( h & w ) the same. A square is easier to deal with and shouldn't require some of the calculations I had to do to accommodate the non-square dimension image I used. Of course when you change the image the calculations will go off. Provide the URL for your image to me and I can update the CSS.

Here's a screenshot of my test.

144587292_ScreenShot2021-06-12at12_43_18AM.thumb.png.b097ca8c23adc9953b8a4c8369858733.png

Let us know how it goes.

 

Thanks!

I created square overlay pngs and was able to roughly position them based on your code.

I'm running into a few issues.

The pngs aren't really centered since left 50% isn't based off the midpoint of the image. Cheating it by saying 45% looks wonky. Is there a code way to align these from the midpoint. The way I know how require block display not inline.

Is it possible to cheat the left and right triangles off screen a bit so the sides show less triangle than the top and bottom? Particularly on an alt layout for mobile this would be very helpful.

The overlay images don't move with the page scroll. I want them to be over just the top section with the full bleed image background. I would just embed them in that image but then often they're cropped off etc.

 

 

 

 

 

 

 

 

 

 

'

 

 

 

Link to comment

With more specifics about the effect you want to achieve we might be able to get closer.

Just a note on my code sample. It is designed to use one image that is then manipulated by CSS to be in the right position. The effect should be achievable with one or 4 images I would think.

It may take me several days to circle back around to this one.

If anyone else wants to take a crack a solution please feel free! 🙂

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@creedon Thank you so much for your proof of concept code. I played with it as well as the design and settled on something a little simpler but I think nicer looking. The only outstanding issue I have with it is that I want those four triangles to stick to the background and scroll up with the page, not float over the other elements as the page scroll up. I suspect that's a simple attribute but I can't identify it. Any suggestions?

https://tan-mauve-kb4n.squarespace.com

Password: nywa

Link to comment

I'm thinking what you will need to get to where you want to go is some Javascript. That would require the business plan or above.

Using Javascript we can add the images to be child elements of the first page section. Then with some CSS those images would move with the first page section.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
14 hours ago, creedon said:

I'm thinking what you will need to get to where you want to go it some Javascript. That would require the business plan or above.

Using Javascript we can add the images to be child-element of the first page section. Then with some CSS those images would move with the first page section.

 

Okay, I'll likely need Biz Plan anyway. I've activated that now.

If you're willing to continue to assist and recommend a javascript solution, I'd appreciate it.

 

Link to comment

I'd say this is getting closer to a solution! 🙂

First you'll want to remove the code for the other effect. Save a copy somewhere.

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

<style>

  #x-tri-bottom,
  #x-tri-left,
  #x-tri-right,
  #x-tri-top
  
    {
    
      display : inline !important;
      max-width : 6%;
      position : absolute;
      z-index : 9;
      
      }
      
  #x-tri-bottom,
  #x-tri-top
  
    {
    
      left : 50%;
      
      }
      
  #x-tri-left,
  #x-tri-right
  
    {
    
      top : 50%;
      
      }
      
  #x-tri-bottom {
  
    bottom : -1px; /* get rid of line */
    transform : translate( -50%, 0 ) rotate( 180deg );
    
    }
    
  #x-tri-left {
  
    left : 0%;
    transform : rotate( -90deg );
    
    }
    
  #x-tri-right {
  
    right : -1px; /* get rid of line */
    transform : rotate( 90deg );
    
    }
    
  #x-tri-top {
  
    top : 0;
    transform : translate( -50%, 0 );
    
    }
    
  </style>

<script>

  $( ( ) => {
  
    /*
    
      add image tags to first page section
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const ids = [
    
      'x-tri-bottom',
      
      'x-tri-left',
      
      'x-tri-right',
      
      'x-tri-top',
      
      ];
      
    const url = 'https://static1.squarespace.com/static/60bf7d7d9d424068a220347f/t/60ca6b0111785674c07f011c/1623878401448/x-tri.png';
    
    // do not change anything below, there be the borg here
    
    var $section = $( ':not( #footer-sections ) > .page-section:first' );
    
    if ( ! $section.length ) return; // bail if no section
    
    $.each ( ids, function ( ) {
    
      $imageTag = $( '<img src="' + url + '" style="display : none;">' )
      
        .attr ( 'id', this )
        
        .appendTo ( $section );
        
      } );
      
    } );
    
  </script>

You may notice I rearranged the CSS a bit. Same end result. I just reduced some of the repeated property value pairs.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.