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
  • 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: https://www.lightbulb.com.au/home I am using a code block to embed an animation for the title page and am having a few issues: Layers: I need the text "connecting people to purpose" and "and strategy to execution" to sit neatly when switching to mobile. Currently the "strategy to execution" part drops off under the animation background. I think that's because the code block is currently inline with the text so pushes the text when re-sizing, but not sure how to fix. In my mind if the animation background sat on z-index:1 and the text sat on z-index:2 it would work, but the column of text still gets pushed Parallax: I have done some research into parallax for images but am unable to replicate that with this animated effect because it isn't able to be coded in as 'background-attachment: fixed' Cover page: The main goal is to have the entire screen taken up by this animation and the words on load. Then as you start to scroll the header menu appears. Currently I can't get the menu to appear only on scroll. I also can't get the animation background to appear as the exact same size of screen (especially when moving between ipad and phone size) even though I'm using 'height: 100vh;' Any help would be much appreciated! Here is my current code; <!-- particles.js container --> <div id="particles-js"></div> <!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <style> h1{color:white; z-index:99!important;} #block-de839e242497a7829823 {z-index:101!important;} #block-yui_3_17_2_1_1618818769687_39082 { height: 100vh; width: 110vw; margin-top: -20vh!important; margin: 0rem -60vw; position: relative; left: 50%; right: 50%; background-size: cover !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: center !important; background-repeat: no-repeat; z-index:0;} /* ---- reset ---- */ body{ margin:0; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #262626; background-repeat: no-repeat; background-size: cover; background-position: 0% 0%; } </style> <script> particlesJS("particles-js", {"particles":{"number":{"value":30,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.7,"random":true,"anim":{"enable":true,"speed":0.1,"opacity_min":0.3,"sync":false}},"size":{"value":30,"random":true,"anim":{"enable":true,"speed":1,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1.5,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"},"onclick":{"enable":false,"mode":"remove"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});; </script>
  2. 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.
  3. Site URL: https://earthlycraft.co Hello! So i'd really like to implement the multi speed parallax styles available in rellax.js; https://dixonandmoe.com/rellax/ Anyone had any success with this? I found some guidance within https://www.minimist.ca/articles/variable-speed-parallax-effects-in-squarespace, but no matter what i do to the inline code nothing seems to change Thanks! Joe
  4. Site URL: https://lukaseriksen.com Hi! I've been trying to figure out how to target a parallax effect to specific images on my site so that they move slightly slower, or faster than the text that is aligned with them upon scrolling. I've found a couple examples of this effect on various websites: https://dixonandmoe.com/rellax/ https://delassus.com/en/products/tomatoes https://www.ixstudio.net/ Would anyone know how to do this?
  5. 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.
  6. Hi everyone, Straight up I'm not a coder but I'm trying to achieve two things on my page: 1. Smooth Home page navigation scroll using anchors 2. Parallax Scroll where images are blocked in the background and the next section overlaps as you scroll down. Both codes work idividually, however when I combine both in the Custom CCS section, the Parallax code works and the smooth navigation stops working. What happens is when I click on a menu item, it jumps straight to that section and I loose that "smooth scroll" effect. Can you guys help me out? is it possible to have both effects? I've posted the codes I'm using at the end. Thanks in advance! Jen This one in the CSS Custom section: { scroll-behavior: smooth; } This one in the Code Injection Footer section: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ bleed: 0, imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>
  7. Site URL: https://www.samdanan.com/ RPReplay_Final1615858581.MP4 Hi all! I am trying to change the dark blue background color that only appears when you pull up or down on mobile view. I've searched everywhere in the site styles but can't seem to find what is causing this. Any help is appreciated! Website: https://www.samdanan.com/ Password: butter
  8. Site URL: https://www.chilliosis.com/ My parallax effect is doing a weird thing where it has a random white bar at the top of the parallax banners. Sometimes it disappears, then reappears again. The following is the code I used which I found here. I also have javascript code that splits certain sections which is also in the footer, I don't know if that may what's interfering with it. Any insight on what might be causing this would be greatly appreciated 🙏 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: 0.2, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>
  9. Hey all! On my site, I have several index pages. Several of the sections of these index pages have background/banner images for the nifty parallax effect. I'm not fully satisfied with how those background/banner images are displaying at all times and I'm attempting to target them with CSS to make some adjustments. However, no matter how much digging I do, when I inspect the page code, I can't seem to find where those index page section background images live to figure out the correct CSS class to use to target them. I'm using the Mojave template and the images were uploaded in the page (the section pages making up the index page) settings under media. Can someone point me to where I can find the parallax index page background images when I'm inspecting? Or, at minimum, let me know the CSS targets I need to hit? Thank you!
  10. Site URL: https://www.parris3creativenews.com/ Hello, I'm using Mojave and there is an issue with a white bar appearing at the bottom of my banner images when scrolling through my site in mobile. It's as if the smart crop feature isn't working properly. I thought perhaps I could make the background of my images transparent or the same color as my website's background but can not figure out how to adjust. Does anyone have any tips to fix this? I'm including a snap shot image from my phone to illustrate the problem.
  11. Site URL: https://www.itsnicetohearyou.com/v1-home Hi there, I have noticed that my background video blows up the more content I add. I want to make the video closer to it's original size and have it be fixed/sticky in the background, and have the text just scroll over it. I can't seem to figure out how to make that work. I found this YouTube tutorial but it's just for photos, I would love these effects with the video on my site. Can someone help!
  12. Site URL: https://cristiestevens.com/frwrd-skincare Hello! I want to create this Parralax roll over animation as shown in the above link with a full bleed header, do I need to do this in code?
  13. Site URL: https://www.qbpsychology.ca/ Member 0 10 posts Posted Friday at 03:06 PM (edited) Password: psychology Note: reposted from last week because i didn't get any responses Hi guys! I watched a you tube video on how to mimic parallax in the new version of squarespace by putting the images in a hidden folder and then linking to them using css. The only issue is that it defaults to focusing on the vertical top of the photo, so i can't choose if i want the focus shifted up or down. You can see this very clearly by clicking on the hidden pictures folder to get a sense of the images. Then go to any page where there is a picture in the header and adjust the height of the section. You'll see that the top of the photo always shows, adjusting the height of the section changes how much of the lower portion shows The code references "center" but i don't know what language to use to tell it to shift the focus up or down, or even if i have a more nuanced control of that. Can someone tell me how to edit my code? Thanks everyone! For clarity, the stuff in red is the location where the images will be applied, the stuff in blue includes the src code for the images. Ideally, i'd like to have control of this for each photo, so i hope that its controlled in the blue section. I tried adding white space to the bottom of one of the photos to shift the view down, that didn't work. cropping the photo so that the best part was in the middle of the photo space just resulted in a blown up image that still didn't focus where i wanted it. It seems that the answer lies in editing the css and editing the photo itself doesn't help //create the mix-in once// .parallax(){ //creating the element content: ""; width:100%; height:100%; position: absolute; //adding the image properties - don't add the image background-repeat:no-repeat; //positioning the image background-size:cover; background-position:center center; background-attachment: fixed; transform: scale(1.2); //mobile @media(max-width:787px){ background-position:center center; background-attachment: scroll !important; } } //add mix-in to section for parallax// [data-section-id="5fd3c136f185343d3286a5ac"]{ .section-background{ &::after { /* this will apply all the properties in the parallax mixin here */ .parallax(); /*This is the specific image for this section*/ background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fe4fa6b5e66733f02fcad17/1608841850112/wheat+shadow+high+res.jpg?format=1500w); } } } [data-section-id="5fe38565019323436e7ddf54"]{ .section-background{ &::after { .parallax(); background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fef8931143c0d28f2edd55e/1609533750668/regina%25252Bwaves%25252Bhigh%25252Bres.jpg?format=1500w); } } } [data-section-id="5fe38575019323436e7de274"]{ .section-background{ &::after { .parallax(); background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fef8c1ea6a0ae63d6c9fbf8/1609534521187/saskatoon%2Bstormy%2Bsunset%2Bhigh%2Bres.jpg?format=1500w); } } }
  14. Site URL: https://www.qbpsychology.ca/ Password: psychology Hi guys! I watched a you tube video on how to mimic parallax in the new version of squarespace by putting the images in a hidden folder and then linking to them using css. The only issue is that it defaults to focusing on the vertical top of the photo, so i can't choose if i want the focus shifted up or down. You can see this very clearly by clicking on the hidden pictures folder to get a sense of the images. Then go to any page where there is a picture in the header and adjust the height of the section. You'll see that the top of the photo always shows, adjusting the height of the section changes how much of the lower portion shows I'm hoping theres a way to edit the code to make it so that i can change the area of focus for individual pictures? For clarity sake, I've pasted the css below. The red text is the commands for how the parallax should act and go, and the blue text is the src code of the pic to the location where i want the pic to go. If anyone is interested, here's the link to the video: https://www.will-myers.com/adding-parallax-effect-to-a-background-image-in-squarespace-71#:~:text=So the parallax effect will,section background on your website. //create the mix-in once// .parallax(){ //creating the element content: ""; width:100%; height:100%; position: absolute; //adding the image properties - don't add the image background-repeat:no-repeat; //positioning the image background-size:cover; background-position:center center; background-attachment: fixed; transform: scale(1.2); //mobile @media(max-width:787px){ background-position:center center; background-attachment: scroll !important; } } //add mix-in to section for parallax// [data-section-id="5fd3c136f185343d3286a5ac"]{ .section-background{ &::after { /* this will apply all the properties in the parallax mixin here */ .parallax(); /*This is the specific image for this section*/ background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fe4fa6b5e66733f02fcad17/1608841850112/wheat+shadow+high+res.jpg?format=1500w); } } } [data-section-id="5fe38565019323436e7ddf54"]{ .section-background{ &::after { .parallax(); background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fef8931143c0d28f2edd55e/1609533750668/regina%25252Bwaves%25252Bhigh%25252Bres.jpg?format=1500w); } } } [data-section-id="5fe38575019323436e7de274"]{ .section-background{ &::after { .parallax(); background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fef8c1ea6a0ae63d6c9fbf8/1609534521187/saskatoon%2Bstormy%2Bsunset%2Bhigh%2Bres.jpg?format=1500w); } } }
  15. Hi! my problem when I'am adding a parallax image to a page where I have a sticky CSS, the sticky code doesn't work anymore.(code below ) The sticky texts doesn't work with parallax pages? I checked all forums, but I didn't find the solution. this is the page url: https://www.studio4045.net/csurgo /* Sticky text on desktop */ @media screen and (min-width:901px) { /* Sticky text */ div#page-5fd7b5fb2b9b2c152d146504>.row:nth-child(2)>.span-3 { position: sticky; position: -webkit-sticky; top: 200px; Thanks,
  16. Site URL: https://oval-denim-r8bs.squarespace.com We added some Parallax functionality and unfortunately it broke the fallback image that comes up for mobile users. Anyone know any way to alter this code to not impact the video header? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ bleed: 0, imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>
  17. I have the following code in my code injection footer to add parallax effect to all banner background images: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js"></script> <script> $('.has-background').attr('data-scrollax-parent', 'true'); $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "30%" }'); $.Scrollax(); </script> However, I want to disable the effect for one specific section. Is this possible? How would I do it - use data-section-id in some way?
  18. Site URL: https://wedge-rust-ntjf.squarespace.com/ Hi there! I'm looking to create a website homepage similar to this ? https://arentpyke.com Is it possible to make let's say an image with a logotype on top of it and then scroll down into the homepage past the header. Or even if someone has guides on how to do this ? Cheers Sean!
  19. Hi all. My newest client has a very specific vision for his site, and I am not sure how I am going to accomplish it. He has a full-length picture of him in his business attire, and he wants that image to stay in place, while people scroll through the content next to the image. The scrolling content needs to be more than just text. I will need to include buttons, icons, anchors, and text styling throughout the scrolling content. I'm unsure of the best way to approach this and I would appreciate some suggestions. Thanks!
  20. Been trying to "work" the parallax option for an hour only to discover after some frustration that the new update does not support it. Please tell me this is false. Unless, is there another way I am unaware of? Such a shame Squarespace. Taking out one of the best aesthetic features (in my opinion) and honestly the only reason I used Squarespace in the first place. Seems as the company are adding more restrictions deliberately to make them less unique from their competitors. Great. Edit: Have decided to switch from this platform. Screenshot.mp4
  21. need help creating a parallax fixed footer. example here of what i would like to achieve: https://codepen.io/pqt/pen/bNByOj can anybody help?
  22. Site URL: https://www.davai.squarespace.com Hi all I have just noticed some pretty substantial errors on one of our websites (password: davai). I have added multiple images as Parallax effect on certain sections with help from the following code: [data-section-id="5f687b7bd45f307089cd61c5"]{ .section-background{ &::after { //creating the element content: ""; width:100%; height:100%; position: absolute; //adding the image background-image:url(https://static1.squarespace.com/static/5f6873716e3d0466b9953dd9/t/5f7ad62404f4b1678e14f967/1601885776821/RKP_2411.JPG?format=1500w); background-repeat:no-repeat; //positioning the image background-size:cover; background-position:center center; background-attachment: fixed; transform: scale(1); //mobile @media(max-width:787px){ background-position:center center; background-attachment: scroll !important;}}}} I noticed there is a string of code to change the viewing on mobile, does it need one for tablet/ipads as well? Any fixes will be greatly appreciated!
  23. Site URL: https://thelandcollaborative.squarespace.com Hi All, I've been through the many posts here about Parallax on Squarespace 7.1. I've tried about 5 different versions (all the issues are in the forums). The parallax is working, but the jitters are terrible when you scroll up. So far, I haven't found a fix for this. Is it possible to get any of the experts on here to commit to figuring it out? The website is: https://thelandcollaborative.squarespace.com. I'm using this in the site-wide code injection box: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js"></script> <script> $('.has-background').attr('data-scrollax-parent', 'true'); $('.has-background .section-background').attr('data-scrollax', 'properties: { translateY: "100%" }'); $.Scrollax(); </script> <style> .has-background {overflow: hidden;} </style> Thank you!
  24. Site URL: https://www.jorigoh.com/para Hello, My site password is 123 https://www.arcticmonkeys.com/ I am trying to achieve this fix background image while content scrolls pass to the top. I achieve it slightly with parallex BUT it only applies to 1st section, subsquently sections are opaque. Do i need add multiple of the same image to achieve this? wouldnt that mess up the alignment when it scrolls to the next section's image? Or make subsquent sections transparent? Or do i need to add a css to drag the section length? Thanks!
  25. Hello, I have parallax enabled for a banner image (which I like). However, on mobile, scrolling down the page looks very jittery. I'd like to disable parallax on mobile altogether, while leaving it functional on desktops. How can I do that? I've tried injecting the following code into the page header, to no avail: @media screen and (max-width:640px) { .parallax { background-attachment: inherit; } } Thanks, Joe
×
×
  • Create New...