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

Search the Community

Showing results for tags 'parallax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers πŸ‡«πŸ‡·'s Topics
  • France Designers πŸ‡«πŸ‡·'s Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. Site URL: http://www.megvolk.com/bestow Hi there - I'm having an issue with project pages in the Jasper template. When loading the project pages, some images or videos don't show up upon landing on the page, and requires a scroll for them to appear. I'm afraid people won't scroll on my site and some work will be missed, so I want to disable parallax loading to have everything visible upon landing (unless there's another solve). I also wonder if it's related to my screen/browser size. It's happening here and here. However, all images load on this page without needing to scroll for them to appear : Def Jam Origins Series Any help or ideas would be appreciated! Thanks, M
  2. Site URL: http://sturmer.com.au/stories Hi there, I've applied some code in the code-injection section of my site wide footer to enable a parallax effect on the background images of my homepage (http://sturmer.com.au/) but it is causing problems on another page (http://sturmer.com.au/stories) by having the background images from the third section down bleed into other sections above. I have tried pasting the site-wide footer code directly onto the homepage 'page' on a per-page basis but this only seems to affect the header. Is there anyone able to assist and work out why this might be the case? Thanks so much for your help
  3. Site URL: https://tobiashaunhorst.com/tobiashaunhorst-de Dear Forum! I am having trouble with misaligned background pictures that get cropped in an awkward way in mobile view. I had to disable Parallax effect for mobiles, as it created issues with functionality and a strange whirring effect. This was done via code from this forum. Now the pics are static but weirdly cropped. I had already aligned all pictures via the focus point in the page settings. However this setting seems to be ignored by the software. How can I ensure reasonable alignment of the pictures on mobiles? Thank you for all your help! Tobias
  4. Hello everyone! I am trying to find a template, or a way to create a one page horizontal scroll site with anchors, but besides the "squarekicker" which I think is not what I am looking for, I can't find anything else. What I am aiming for is this https://polygondesign.com.au/ If you have any idea on how someone could recreate something like this, I would really appreciate your ideas and comments. Thank you in advance, Constantinos
  5. Site URL: https://www.byhutch.com Hi, I designed a site on Cargo for an artist and I would like to use the same .js file to animate a background image on squarespace but I am not sure how to implement it. I have added the image as a background, added the script to the footer injection and i have this code in the css. ///testing parallax section[data-section-id="629bd39be10a3e30d5e26b57"] { .section-background img { ??????? } } here's the script.... const sections = document.querySelectorAll("section") const bodyTag = document.querySelector("body") const addMovement = function () { const topViewport = window.pageYOffset const midViewport = topViewport + (window.innerHeight / 2) // lets find the middle of each section // (section, index) => {} sections.forEach((section, index) => { const topSection = section.offsetTop const midSection = topSection + (section.offsetHeight / 2) // how far away is the section from the visible area of the page const distanceToSection = midViewport - midSection // pick the tags to parallax const image = section.querySelector("img") const contentTag = section.querySelector("div") // weight down this distance let rotation = distanceToSection / 100 let contentDist = -1 * distanceToSection / 2 // for all the even sections, rotate the other way // is the index divisible by two // is the index's remainder zero? // the modulo operator 5 % 2 = 1, 4 % 2 = 0 if (index % 2 == 1) { rotation = rotation * -1 } // apply some parallax image.style.transform = `rotate(${rotation}deg)` contentTag.style.top = `${contentDist}px` contentTag.style.transform = `rotate(${-1 * rotation}deg)` // check the background if (distanceToSection > -100) { const dataBackground = section.getAttribute("data-background") bodyTag.style.backgroundColor = dataBackground } }) } addMovement() document.addEventListener("scroll", function () { addMovement() }) window.addEventListener("resize", function () { addMovement() }) any ideas? @tuanphan @creedon The url I am trying to implement is just a trial site https://radish-hexaflexagon-chhx.squarespace.com/parallax pw:demo
  6. Site URL: https://raspberry-wolverine-7tn4.squarespace.com/ Hi all, I am using parallax and therefore Brine 7.0 for a client. However, I want to disable the parallax for a number of banners because it is just too much. Anyone know how to do this? Thanks in advance!
  7. Site URL: http://campbell-rey.com Hey there, Would anyone know how to replicate this on Squarespace 7.1? I've experimented a little, but cant get the bg image to fix like this. Any help would be greatly appreciated! Thanks, Adam
  8. Hello Squarespace experts. I'm working on a site for a friend in which we want a single image to have parallax smart crop added to it, but to keep the rest of the images in the same style they were. Does anyone know how I might be able to do this? For reference this site is on 7.0 and using a Brine Template.
  9. Site URL: https://typeaprofessionals.com Hi there, I'm using the Brine 7.0 template with the parallax scrolling effect for three images on my home page. The images look fine on desktop and tablet view, but when I look at my site on my phone, I notice there is a black space below the images before they start scrolling (shown below). I'm using this CSS to make the header fixed--could this be cause of the black space problem beneath the images? Any idea how to fix? Thank you! //fixed header navigation// .Header.Header--top { position: fixed; top: 0px; z-index:1000; width:100%; } .Intro {padding-top:100px;} .Index {padding-top:100px;} .Main {padding-top:100px;} .Main.Main--page {padding-top:100px !important;} .Main.Main--blog-item {padding-top:0px !important;} @media only screen and (max-width: 480px) { .Main {padding-top:0px !important;} .Intro {padding-top:0px !important;} .Index {padding-top:0px !important;} .Main.Main--page {padding-top:0px !important;} }
  10. Hi everyone, I'm trying this Parallax effect for my personal website. I found this code on an youtube channel : here it's the link. I'm a beginner in Squarespace, so I try again and again ; 0 result with this message 'missing opening '{' . Can you help me, please? What's wrong? Thanks a lot in advance !
  11. Site URL: https://puma-hibiscus-cfk8.squarespace.com/ Hi there, I found this tutorial about a parallax overlapping effect for sections: https://library.superhi.com/posts/parallax-overlapping-sections-using-sticky-positioning I tried it out, and it works almost fine. I have one problem: the effect starts overlapping the section although the content isn’t loaded completely. The smaller text gets cut at the end of every section. Anyone any idea how to fix it? Thanks a lot for your help! My code: #siteWrapper section[data-section-id="621c9fa9c9e50e3f55a26b38"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621ca0171f61485008230187"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621c9fa9c9e50e3f55a26b38"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621ca0171f61485008230187"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621ca0dd94eb8b659e6d97e9"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="621ca1d5a5cbf94bb9fffd14"] { position: sticky; position: -webkit-sticky; top: 0; } #siteWrapper section[data-section-id="61eae59aeef95b3951e803e5"] { position: sticky; position: -webkit-sticky; top: 0; } example_overlapping_sections.mp4
  12. Site URL: https://michaelkelleher.co/ Is there a way to inject parallax scrolling with a background video? The code for background images does not work. Site link below. https://michaelkelleher.co/
  13. Site URL: https://www.NathanChwalik.com Hello! I'm trying to apply this code pen to allow for parallax movement based on mouse position: https://codepen.io/dmitrij-shorop/pen/PoOWOyN I tried code-injecting the javascript into the page header, but for some reason I can't get any movement. I've input the HTML code in a code block, the CSS in the Custom CSS, and I've tried viewing it on the live site. Still doesn't seem to work πŸ˜• I'm really just trying to get three squares to be able to move, not the text portion... I'd be grateful for any advice! Thanks @tuanphan is this something that you know about with your insane coding skills ?
  14. In 7.1, it it possible to have a background video parallax or keep a fixed position? Thanks!
  15. Site URL: https://www.thepostmarkoh.com I recently changed my template and love the effects of the parallax scrolling. I've been working REALLY hard on SEO and it seems that the index/parallax idea is messing it up. It's messing with hiding the pages so they don't get pulled up because part of the index is just a simple picture. It's messing with speed and google dings you for that. Anyone able to look at my page and give suggestions on how I can get that scrolling effect but not have to have individual pages to make this happen. Individual pages-- with low word count-- to multiple pages with only a picture for content.. Thanks!
  16. Site URL: https://unfold.com/templates I'm trying to make my Squarespace site easy to navigate with central scrolling which I believe is known as the parallax effect although I could be wrong. I'm trying to go for something like Unfold which is a Squarespace site itself! And they've taken away that ability for me to scroll and content emerges in the middle of my screen? It makes no sense. I'm trying to work through a solution here. I have little money and am starting a business service. I need this too look professional and custom, not cookie-cutter. I need help.
  17. Hi all, I'm wondering if there is a way to create a parallax scrolling animation like the one on the landing page of this website: https://www.sightlinehospitality.com I have not fully built out the site yet, so I do not have a site URL to share, but my client asked if this effect would even possible on a Squarespace site...wondering if anyone has any insight. Ultimately, I would not need the scroll to reveal text, but rather have two images that begin separate (left image slides down, right image slides up), and as you scroll the two images would meet together in the middle to reveal a full picture. Thanks in advance!
  18. So I've asked the "Customer Care" team a few times about this issue. Site scrolls fine on desktop but on mobile it is choppy and jumps up and down as you go by different content. I've tried experimenting with parallax content on and off and other things, but it still happens. And quite frankly, just turning off parallax wouldn't be a "solution" really. So the answer I always get is, "We're aware of this, but no ETA on a fix." That's just not acceptable. So I'm posting this to see if anyone has had any success with any hack to improve how jumpy things are on mobile. We predominantly use Sonora and Mojave templates. Perhaps it isn't as bad on some templates? Thanks.
  19. Site URL: https://www.camillaottesen.dk Hey. I'm using parallax headers in several pages, made with background-attachment: fixed. How can I twist the code, so it will also work i IOS? (i have removed the image-url in the following) [data-section-id="61e145e15bc8c537841f2161"]{ .section-background{ &::after { //creating the element content: ""; width:100%; height:100%; position: absolute; //adding the image background-image:url("IMAGE-URL(removed in this code-example"); background-repeat:no-repeat; opacity:70%; //positioning the image background-size:cover; background-position:center center; background-attachment: fixed; transform: scale(1); } } www.camillaottesen.dk code: Camilla
  20. Is it possible to create a horizontal scrolling design on squarespace? like the following examples: BANILA STUDIO kern inc. Thecs – Portfolio WordPress Theme (3theme.com) Roberto. - Onepage Horizontal Personal CV/Resume HTML Template Preview - ThemeForest Thanks in advanced!
  21. Site URL: https://www.blueridgeresearch.com/home2 When viewed on my phone, my site has a black bar between each banner image on the Index page using scrolling parallax. (See bottom of image below with red arrow) It looks fine on the desktop. I have tried adjusting padding, etc. in the site styles but nothing has worked. Does anyone have CSS code that will close up the space between banner images on the Index page in mobile view? I appreciate any help I can get. Thank you very much. htpps://www.blueridgeresearch.com/home2
  22. Hi everyone, I've spent the best part of 2 hours trying to figure out where the parallax option is for my 7.0 Margot template. I don't have developer mode on and am driving myself nuts! Can anyone put me out of my misery?! Thank you
  23. Site URL: https://www.dentalartlimited.co.uk Hello I have added Parallex code found on this website (https://stnsvn.com/blog/how-to-add-parallax-scrolling-squarespace-7-1) to make the image on the front page have the parallax effect however it is very glitchy and stuttery, does anybody know how to fix this ? Any help would be greatly appreciated. I have screenshotted the section that I am trying to make parallaxed.
  24. Site URL: https://chimes-halibut-ljr4.squarespace.com/ [Client Request] Hey all, I basically want to add an image background that is fixed relative to the screen. So I'm thinking add a fixed image behind everything, and make the background (colours) of all sections on top transparent. Just wondering if this is possible with CSS? Edit: So I have something working for the home page, although it's not ideal as it doesn't work on mobile. I have made another Home test page with what it was before (footer edit is site wide so can ignore that for now.) Password for site: 123 Cheers in advance!
  25. Site URL: https://matey.app/home Hello! I'm trying to replicate the parallax scrolling from the images on this website: https://cuberto.com/projects/flipaclip/ Is it possible to apply this to Image Blocks, specifically the Card format? Thanks! 473497186_ScreenRecording2021-11-09at5_59_03PM.mov
Γ—
Γ—
  • Create New...