MadihaSyed Posted March 12, 2022 Share Posted March 12, 2022 Site URL: https://oriole-gar-h86y.squarespace.com/ Basically, I would like to know how to achieve this scroll effect in my website: https://www.zendaya.com/ Where the background with the name Zendaya stays fixed until a certain point, and then along with the image, the below section sweeps it out of view once you continue scrolling. Link to comment
Solution paul2009 Posted March 12, 2022 Solution Share Posted March 12, 2022 20 minutes ago, MadihaSyed said: Basically, I would like to know how to achieve this scroll effect in my website The block containing the H1 headline ("Zendaya") has simply been fixed in position using Custom CSS (using 'position:fixed'). this stops it moving up with the rest of the section (the image). 🙂 With the CSS Without the CSS Did this help? Please give feedback by clicking an icon below ⬇️ MadihaSyed 1 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
MadihaSyed Posted March 13, 2022 Author Share Posted March 13, 2022 Hey, thanks for the help! I did fix the position in the CSS, but now its overlapping across the entire page over the rest of the sections? is there a way to put it behind all of the other sections so its not visible after scrolling? Thanks! Link to comment
Adr_81 Posted August 9, 2022 Share Posted August 9, 2022 Hey there, did you get this to work? I'm having the same issue! Thanks! Graphic Design / Football / Music Link to comment
tuanphan Posted August 11, 2022 Share Posted August 11, 2022 On 8/10/2022 at 3:15 AM, Adr_81 said: Hey there, did you get this to work? I'm having the same issue! Thanks! Can you share link to page where you have problem? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Adr_81 Posted August 18, 2022 Share Posted August 18, 2022 Hey @tuanphan thanks for getting back in touch. Sure - it's here... https://jaguar-raccoon-nwkn.squarespace.com/ PW BenEditsMusic123 Client is trying to achieve the same effect as the Zendaya site, where the BEN EDITS MUSIC text is fixed and scrolls behind the image. I've been using this code... //--Scroll Behaviour--// #block-yui_3_17_2_1_1660167861306_308882 { position: fixed; width: 92%; height: 200px; top: 100px; } Which now seems to be working. Previously I had the text in a different font, and it all seemed rather glitchy - it kept extending out at the side after working initially? All seemed very odd. Whilst i've got you, I don't suppose you know why some of the corners aren't appearing rounded within the FILM & TV section? First example below... //specify with the class name .titles1:hover:before { content: ''; background: url('https://static1.squarespace.com/static/62ed106ac3eadf037cbe518d/t/62f2794b1cf4867de0901e3d/1660057931457/Ridley+Jones.jpeg'); background-size:contain; background-repeat:no-repeat; border-radius: 20px; width: 25vw; left: 50vw; height: 30vh; margin-top:-50px; position: absolute; opacity:1; transition: transform .4s cubic-bezier(.86,0,.07,1),opacity .4s cubic-bezier(.86,0,.07,1); transform: translate3d(.33333vh,-11.66667vh,0); -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; } // End Ridley // Thanks again, Adam Graphic Design / Football / Music Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment