You have really knocked it out of the park with this one (I seem to have needed to borrow American jargon), any blog reader (who isn’t a blogger themselves) is going to be seriously impressed. I love it when amazing things can be done in core Gutenberg.
An amazing, creative combination of resources available! I worked periodically over the summer on trying to learn parallax scrolling using CSS. Gradually got it to work. I wish this had been published then! Thanks for always showing what is possible!
@jamie this doesn't seem to translate well to tablet/mobile devices, and I've noticed in Safari on Mac desktop it is quite non-smooth scroll. Quite juddery.
Unfortunately when I select "Fixed Background" it changes the size of the image. Is there a work-around for keeping the image the size of the column and ensuring it is responsive for different screen sizes?
Hey Jamie, here's my second attempt at a nominal workaround to the mobile issue with the cover blocks containing the magically-appearing text/arrow graphic overlay on the landscape background, e.g., the wheat field (I deleted my first, incorrect response). A partial solution that would allow you to retain your cool text/curly arrow graphic on mobile and avoid the cropping issue albeit without the appearance-on-scroll magic would be to employ an image graphic of the text/arrow (which by default will behave responsively) and further leverage the block visibility plugin you've already employed to remove the second cover with the overlaid text/arrow graphic on mobile. First, create a transparent background png image of just the text/arrow graphic and place it within an image block in the first cover block (this would be centered horizontally and be placed below the cover block's existing foreground text, e.g., "My Portfolio"). Use the block visibility plugin to only show this image on mobile (hide it otherwise). So, on mobile, when you scroll, you don't lose your "Light" with curly arrow content in the wheat field cover. The only compromise is that there's no appearance-on-scroll magic. Instead, the "Light" with arrow graphic scrolls up in the normal fashion like the "My Portfolio" text immediately above it.
Another VERY cool trick. This is inspirational to me. I’m grateful for the time you take to do these videos and your willingness to share them like you do. Thank you yet again.
I’m digging into this a bit more. It brings to mind the Wordpress Twenty Seventeen theme where the parallax feature did not work properly on iOS. I realize that’s a limitation of the OS, not the theme, but I wonder is there something like this that could work on iOS?
Hey Jamie, really nice video. I appreciate the effort you put in. I was wondering what is the plug-in you used in this video called? Im not sure if im finding it, if you could supply with a link that would've helped a lot! thank you!
Can you use this plugin/same effects for creating an article? I'm looking for a steer if there's a Wordpress plugin that can allow for scrollytelling/longform articles as posts on a website; however, the couple I encountered haven't been updated in years and buggy.
Hi. Great tutorial, thanks very much. What holds me back, though, using fixed background is that it is not supported on iOS devices. (Is far as I know, that is!)
Hey Leonard, The block visibility plugin helps you manage what's seen on your page. You've got two choices: Simply hide the cover block that doesn't look right on mobile. Hide the troublesome cover block, then make a new background image that looks good on mobile and show this version only on mobile devices. Hope this is clear. Let me know if you have any questions!
This is awesome! Unfortunately, my child theme (FoodiePro) doesn't give me the option of "full-width" images. Is there a way I can go around this without using a plugin?
When I use your example, the "cover" blocks don't have a gap. But when I add the cover blocks myself there's a gap. Hmm, anyone else having that issue?
Hello, great tutorial thank you...when I try to reproduce it and duplicate the covers I have a space between them that ruins the smooth effect that you have obtained, I don't know how to get rid of it, any tips please? thank you
I'm getting a judder on Safari (on Macbook) - Any ideas to why its not a very smooth scroll? Ps, i'm looking forward to the IOS issue workaround update. Thanks again - really great tutorials
Hi , yes unfortunately IOS doesn't support fixed backgrounds on iphones, so i'd recommend using a plugin like block visibility to create a slightly different design for mobile visitors.
I am an Android user. I installed block visibility plugin, but how do i use it, so that i get the same effect on mobile or atleast whatever is possible. any ref. on how to use this pluging? @@jamiewp
Hi Frans - unfortunately the fixed position isn't supported on IOS , see here github.com/WordPress/gutenberg/pull/11480#top - so a solution would be to use the block visibility plugin to show or hide certain blocks on mobile.
Can someone please help me. I am sure it is plugin related. I have a new account and when I duplicate the covers there is a big white gap inbetween the covers.
For the life of me I could not get this to work. Both Firefox and Chrome on Windows 10 would just show all cover images one beneath the other. A bit of sleuthing later and I realised that in order to combat Windows' slowness I had changed a Windows setting a while ago that apparently translates directly to a CSS media feature called prefers-reduced-motion. So the good news is that both Google and Mozilla honour this setting, but it had me racking my brain a bit.
@@jamiewp for a group. Just wanted to do overlapping sections on scroll. Making a group sticky doesn’t see, to work. The group is made up of columns with an image in the second column. The image appears “on top” when the following group is scrolling over it .. if that makes sense. I was hoping to have that basic overlaying sections on scroll effect but maybe it cant be done with a group containing columns. I think I saw it work for you with a cover block . Would be great if the contents of a group behaved as a section and all stayed beneath the next section (group) that is scrolling up
How are you changing between the two background images? I dont even see you adding the second image. What am I missing? *edit - nvmd I worked it out - lol
I tried using a similar effect but had to abandon it. The reason is that Apple decided to not support fixed backgrounds on Safari on tablets and mobile (iPadOS and iOS).
@@jamiewp Indeed that is how I got around it. Ultimately I was so disappointed that Apple's decision basically means that many of the visitors would never see the effect that I stopped using it entirely. A shame really. The official reason for not allowing this setting in Safari is performance while the Apple devices these days are powerful enough to put a lander on the moon in VR (and IRL).
@@jamiewp I was ready to think I was going mad but with the latest Safari on macOS it was showing the white line in preview (Kadence theme) but was fine on the real page. Thanks for an amazingly simple but stunning technique!
Hi Jamie I loved this. However, on mobile in the editor it works, but on the actual mobile device, the scroll effect doesn’t work. Any way around this? Thank you
Hi, yes this is a limitation of IOS unfortunately. So i would generally make sure the design works ok on mobile, or create a different layout for mobile. The free Block Visibility plugin is great for this.
@@jamiewp thank you Jamie. Appreciate your guidance! I will learn more about the plugin as I might need to upgrade or find another layout for mobile. Have a SUPER day!
From today, you're the Gutenberg Grand-daddy. Awesome video. I praise your commitment and value your efforts. Thanks for this masterpiece.
Thank you so much 🙏❤ - did you see this video (it's even better imo) ua-cam.com/video/Y0tyPAOcwDw/v-deo.htmlsi=3K0pNiVkVfEj6mra
I had the same idea some years ago, with non-block themes and fixed images. good to see you are spreading the creativity!!
Thanks Tobias - it's fun to work out these for sure 👍
You have really knocked it out of the park with this one (I seem to have needed to borrow American jargon), any blog reader (who isn’t a blogger themselves) is going to be seriously impressed. I love it when amazing things can be done in core Gutenberg.
Thanks Susan - i love this one too.
An amazing, creative combination of resources available! I worked periodically over the summer on trying to learn parallax scrolling using CSS. Gradually got it to work. I wish this had been published then! Thanks for always showing what is possible!
Thanks - sometimes it's great to have restrictions and then find creative ways to still create cool things within those restrictions.
So smart Jamie. Gutenberg at its best: maximum effect with no extra plugin! Well done.
Exactly right 💪 thanks for watching
I’d love to see more like this. Totally different to what others are doing. It’s fresh and I love it 😍
Thank you - im working on some more
Indeed, you are very creative! Thank you for offering such niceties!
My pleasure
Wow! This is just incredible. Thanks for sharing how to do this.
Thanks Philip - im in love with this one too 👍
Thoroughly so good, and simple. Love it. You got a new subscriber, Jamie!
@jamie this doesn't seem to translate well to tablet/mobile devices, and I've noticed in Safari on Mac desktop it is quite non-smooth scroll. Quite juddery.
This is amazing, Jamie!
Thanks 🙏 i really like this one 🤩
Awesome as always, Jamie. Thank you!
Thanks Viktor
brilliant! Great idea, Jamie. Thanks for sharing!
Thank you 🙏 i really enjoyed making this one
Unfortunately when I select "Fixed Background" it changes the size of the image. Is there a work-around for keeping the image the size of the column and ensuring it is responsive for different screen sizes?
In WordPress 6.5 you’ll be able to set the aspect ratio 👍 check out this video ua-cam.com/video/QpUz5IIKlpw/v-deo.htmlsi=BeWrF881c-g4KYh_
Hey Jamie, here's my second attempt at a nominal workaround to the mobile issue with the cover blocks containing the magically-appearing text/arrow graphic overlay on the landscape background, e.g., the wheat field (I deleted my first, incorrect response). A partial solution that would allow you to retain your cool text/curly arrow graphic on mobile and avoid the cropping issue albeit without the appearance-on-scroll magic would be to employ an image graphic of the text/arrow (which by default will behave responsively) and further leverage the block visibility plugin you've already employed to remove the second cover with the overlaid text/arrow graphic on mobile. First, create a transparent background png image of just the text/arrow graphic and place it within an image block in the first cover block (this would be centered horizontally and be placed below the cover block's existing foreground text, e.g., "My Portfolio"). Use the block visibility plugin to only show this image on mobile (hide it otherwise). So, on mobile, when you scroll, you don't lose your "Light" with curly arrow content in the wheat field cover. The only compromise is that there's no appearance-on-scroll magic. Instead, the "Light" with arrow graphic scrolls up in the normal fashion like the "My Portfolio" text immediately above it.
Another VERY cool trick. This is inspirational to me. I’m grateful for the time you take to do these videos and your willingness to share them like you do. Thank you yet again.
Thanks Andrew - I really enjoyed working this effect out and making the video 👍
I’m digging into this a bit more. It brings to mind the Wordpress Twenty Seventeen theme where the parallax feature did not work properly on iOS. I realize that’s a limitation of the OS, not the theme, but I wonder is there something like this that could work on iOS?
Very cool, beautiful... thanks.
thanks Diego 👍
The instawp with your examples was very helpful in reviewing your work. Thank you!
Good to hear 👍
Thanks for sharing this.
But how did the background image changed from boy to girl at 4:55? 🤔
Whoa, Jamie. Darn creative and looks cool. TY for the share
Thanks for watching!
wow that's a really creative use of the blocks! I didn't think it was possible with no code but I'm so glad to be wrong!!! thanks for sharing :D
Thanks 🙏 im working on something even better for this weeks video 😊
this is gorgeous Jamie, i will give u all my thumbs up if UA-cam allows it.
Thank you - i was really pleased on how this one turned out, so it's great to get such great feedback 🙏
@@jamiewp it helps a tons⋯
@@jamiewp it helps a tons⋯
@@moon3English 👍
Love all of your videos, great job! What theme do you usually use?
Thanks Kerri - i use Twenty Twenty Four and Ollie mostly atm.
For mobile you could create a background image with the text in the correct proportion to the image and set to show only on mobile.
That's a great idea :)
Really cool idea!
thanks Ron
Dang, this is amazing; thanks for sharing!
Thanks , it is cool isn't it :)
Really cool Jamie! 🎉🎉
thanks, glad you like it - i kinda discovered it by accident :)
@@jamiewp Going to try this with the next project!
@@ghostrunner9596 cool - share a link when it's done
Hey Jamie, is it possible to use other blocks besides the text block on top of that cover block? Say, a video embed?
Yup 👍
Is there a way to disable lazy loading on a specific page? It ruins the effect by not loading the blocks below the fold in time
Great video! Could the problem for the second transition on mobile be solved using Kadence's "show on mobile" or "don't show on mobile" function?
Thanks - yes or the block visibility plugin and as someone commented, you could create different backgrounds and only show those on mobile 👍
Luv this! I had no idea this could be created w just Gutenberg, and the fact mobile friendly, thanks for sharing
Glad it was helpful!
Hey Jamie, really nice video. I appreciate the effort you put in. I was wondering what is the plug-in you used in this video called? Im not sure if im finding it, if you could supply with a link that would've helped a lot! thank you!
No plugins just core WordPress 👍
Jamie, what was the toggle icon you hit around 1 minute and 58 seconds in? I do not see that icon on my dashboard... Thanks!
Hi David, what theme are you using ?
Very nice I like how it explained it I was going something similar but this is it fr fr ❤❤🎉🎉🎉🎉😅😮
Great to hear - I really love this effect
@@jamiewp If you need any help whatsoever feel free to contact me 🙏🙏 I love your journey and will help where I can.
Regards
Tommy
Can you use this plugin/same effects for creating an article? I'm looking for a steer if there's a Wordpress plugin that can allow for scrollytelling/longform articles as posts on a website; however, the couple I encountered haven't been updated in years and buggy.
Yes absolutely 👍
Incredible video and I'll be using this in the future.
Great to hear 👍
I must say limiting options does increase creativity inside the available options.
100% agree Max
Hi. Great tutorial, thanks very much. What holds me back, though, using fixed background is that it is not supported on iOS devices. (Is far as I know, that is!)
Yes, correct - so i would create different blocks and show those on mobile (using the block visibility plugin).
Very inspiring. Love it!
Thanks so much!
Wow - this is amazing 🤩
It is isn't it 😀
this works on iphone? safari? because usually iOS ignores this property to avoid performance issues
How do you add the cover for it to be mobile responsive. I’ve added the plug in you mentioned but I’m clueless on how it works
Hey Leonard,
The block visibility plugin helps you manage what's seen on your page. You've got two choices:
Simply hide the cover block that doesn't look right on mobile.
Hide the troublesome cover block, then make a new background image that looks good on mobile and show this version only on mobile devices.
Hope this is clear. Let me know if you have any questions!
This is awesome! Unfortunately, my child theme (FoodiePro) doesn't give me the option of "full-width" images. Is there a way I can go around this without using a plugin?
There’s a way to add a theme .json file to a classic theme - its a litttt technical though
Thanks!@@jamiewp
When I use your example, the "cover" blocks don't have a gap. But when I add the cover blocks myself there's a gap. Hmm, anyone else having that issue?
Check whether the cover block has a margin :)
Hello, great tutorial thank you...when I try to reproduce it and duplicate the covers I have a space between them that ruins the smooth effect that you have obtained, I don't know how to get rid of it, any tips please? thank you
Here you go - select the cover block , then remove top and bottom margin 👍
@@jamiewp i can't see the options to remove it. where is it exactly? 👨🔧😄
I'm getting a judder on Safari (on Macbook) - Any ideas to why its not a very smooth scroll?
Ps, i'm looking forward to the IOS issue workaround update.
Thanks again - really great tutorials
Im not seeing that this end - what version of safari are you using ?
Thanks it worked on the desktop but there is no scrolling effect on mobile. Don't know what setting to do with plugin to get same effect in mobile.
Hi , yes unfortunately IOS doesn't support fixed backgrounds on iphones, so i'd recommend using a plugin like block visibility to create a slightly different design for mobile visitors.
I am an Android user. I installed block visibility plugin, but how do i use it, so that i get the same effect on mobile or atleast whatever is possible. any ref. on how to use this pluging? @@jamiewp
Thank you , Thank you !! It's working on mobile too!! Just have to adjust image sizes i have uploaded. will it get resolved in WP6.5?@@jamiewp
Why my reply is not showing up,,, i said thank youuuuu, it's working on mobile too@@jamiewp
Hi Jamie, I am getting some white blank space between 2 Covers. How I can I get rid of that?
check that the margins are set to 0 for all the cover blocks
This looks absolutely great. Somehow, however, this does not seem to work on my iPhone. Is there a solution for that?
Hi Frans - unfortunately the fixed position isn't supported on IOS , see here github.com/WordPress/gutenberg/pull/11480#top - so a solution would be to use the block visibility plugin to show or hide certain blocks on mobile.
@@jamiewp Well, something to work on for these Apple/IOS engineers. Thanks!
@@fvkeul actually i may just have found a solution . I'll do some more digging and try to get a tutorial out early next week.
This would be much appreciated! @@jamiewp
Level: Genius
thank you 👍 you wait till tomorrow's video - it takes things a few steps further :)
@@jamiewpAye. Ready to have my mind blown.
@@tomcha75 here's what i'm going to show you how to build x.com/pootlepress/status/1762057683639709820?s=20
@@jamiewpAwesome. My gears were turning as I was watching it. Almost like a puzzle. Looking forward to it.
@@tomcha75 👍
Instane trick, thanks so much for sharing!
Glad you like it - i'm slightly obsessed by what's possible with the cover block - see here x.com/pootlepress/status/1755339012703728006?s=20
Can someone please help me. I am sure it is plugin related. I have a new account and when I duplicate the covers there is a big white gap inbetween the covers.
Brilliant!
thanks Mark 🙏
How to upload wordpress theme in gumroad? How to create main zip( and what will zip contact)
Excellent content :))
Thank you!
is this possible to do same using Elementer
I would think so
so sneaky and amazing!
Thanks Ralf - sneaky 💪
Nice and simple!
Exactly
I have spaces between each section... so when I scroll it has the space lines between. How do I change that?
It's likely there is a margin being set - can you check in settings?
Fun exercise. Thank you
Thanks Juri
For the life of me I could not get this to work. Both Firefox and Chrome on Windows 10 would just show all cover images one beneath the other.
A bit of sleuthing later and I realised that in order to combat Windows' slowness I had changed a Windows setting a while ago that apparently translates directly to a CSS media feature called prefers-reduced-motion.
So the good news is that both Google and Mozilla honour this setting, but it had me racking my brain a bit.
💪👍
is there no way to set z index in 2024 theme?
Um for what?
@@jamiewp for a group. Just wanted to do overlapping sections on scroll. Making a group sticky doesn’t see, to work. The group is made up of columns with an image in the second column. The image appears “on top” when the following group is scrolling over it .. if that makes sense. I was hoping to have that basic overlaying sections on scroll effect but maybe it cant be done with a group containing columns. I think I saw it work for you with a cover block . Would be great if the contents of a group behaved as a section and all stayed beneath the next section (group) that is scrolling up
How are you changing between the two background images? I dont even see you adding the second image. What am I missing?
*edit - nvmd I worked it out - lol
Cool 👍
I tried using a similar effect but had to abandon it.
The reason is that Apple decided to not support fixed backgrounds on Safari on tablets and mobile (iPadOS and iOS).
Yup , you could show different blocks on mobile using the free block visibility plugin . This is the way I approach it.
@@jamiewp Indeed that is how I got around it.
Ultimately I was so disappointed that Apple's decision basically means that many of the visitors would never see the effect that I stopped using it entirely.
A shame really.
The official reason for not allowing this setting in Safari is performance while the Apple devices these days are powerful enough to put a lander on the moon in VR (and IRL).
@@paulbrkmn yup agree
Amazing!
Tks
There is white line between cover block, how to remove this???
Hi - select the cover block and the remove the margin (in block settings panel on the right)
@@jamiewp Thankyou, itworks
@@jamiewp I was ready to think I was going mad but with the latest Safari on macOS it was showing the white line in preview (Kadence theme) but was fine on the real page. Thanks for an amazingly simple but stunning technique!
@@PaulStradling glad you like it :) 👍
Genius!
cheers Jon
Clever!
thanks 👍
Great..
thanks for watching :)
its good but doesnt really work on the phone, is really important that this tutorials are responsive otherwise whats the point?
Your voice volume is super low.
For this video?
Hi Jamie I loved this. However, on mobile in the editor it works, but on the actual mobile device, the scroll effect doesn’t work. Any way around this? Thank you
Hi, yes this is a limitation of IOS unfortunately. So i would generally make sure the design works ok on mobile, or create a different layout for mobile. The free Block Visibility plugin is great for this.
@@jamiewp thank you Jamie. Appreciate your guidance! I will learn more about the plugin as I might need to upgrade or find another layout for mobile. Have a SUPER day!
Wicked, thank you.
thanks Carl