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

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

password = prelaunch

I'd like to float small .pngs at the edges of the display window for initial load on desktop and mobile, as shown in the mockup attached below. Is there a tutorial for this, or can you provide instructions?

Hi.

You can add an image under first section button block. Then we will test some code to achieve in screenshot

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.

Let us know how it goes.

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.

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.

'

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! 🙂

@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

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.

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.

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.