Jump to content

nicoledelger

Circle Member
  • Posts

    10
  • Joined

  • Last visited

Everything posted by nicoledelger

  1. Site URL: https://www.studiodelger.com/testing I’m trying to achieve a simple parallax effect on two overlapping .PNGs here: StudioDelger.com/testing My goal is to have the clouds in the background move more slowly than the people in the foreground as you scroll down the page. I’ve been looking at these tutorials on perspective and translatez https://medium.com/@johnearle/all-in-perspective-2996ee463509 https://keithclark.co.uk/articles/pure-css-parallax-websites/ Is it possible to do this with pure CSS? This site has a similar effect in the way that the pizza drawing and hand illustration moves up the page as you scroll. https://www.lamannabakery.com/ The CSS: /* Paralax Illustration */ //column container [data-section-id="60745c91580bd53b44eb6725"]{ .sqs-col-5{ position: relative; } .image-block{ position: absolute; width: 100%; } } //clouds sqs-block #block-yui_3_17_2_1_1618238465998_4806{ .sqs-block-content{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; perspective: 1px; perspective-origin: 0 0; } .image-block-outer-wrapper{ transform-origin: 0 0; transform: translateZ(-1px) scale(2); } .image-block-wrapper{} } //clouds image [data-image-id="60745d03bc8cce06463584c8"]{} //people sqs-block #block-yui_3_17_2_1_1618238465998_6847{ .sqs-block-content{} .image-block-outer-wrapper{} .image-block-wrapper{} } //people image [data-image-id="60745d1b829140737fd62ca8"]{} I would appreciate any help.
  2. Hi! I think you can help me? 

    I need to manually add a little padding to the navigation menu on my site, but I want to keep my site Margin at 0. 

    I can't for the life of me find the code to do this. 

     

    https://viola-turquoise-f66n.squarespace.com/

    the password to view is password 

    1. tuanphan

      tuanphan

      You can edit Site Header or add this to Design > Custom CSS

      header#header {
          padding-left: 2vw;
          padding-right: 2vw;
      }

      If you have any other questions, please post on forum or send to my email.

       

    2. nicoledelger

      nicoledelger

      oh my god, you're amazing. thank you. 

  3. I used this code to create a one-column grid for a client. /* 100% (auto) */ /*5fad6b44253fde48501f2902*/ [class^="portfolio-grid-"] { grid-template-columns: auto; } but now, I can't get the thumbnail images to be full bleed on the left and right. There's a black column. Is there a code I can add on to this?
×
×
  • 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.