From today, you're the Gutenberg Grand-daddy. Awesome video. I praise your commitment and value your efforts. Thanks for this masterpiece.

@jamiewp

3 ай бұрын

Thank you so much 🙏❤ - did you see this video (it's even better imo) kzread.info/dash/bejne/i2So27J6f8bddNo.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!!

@jamiewp

5 ай бұрын

Thanks Tobias - it's fun to work out these for sure 👍

I’d love to see more like this. Totally different to what others are doing. It’s fresh and I love it 😍

@jamiewp

5 ай бұрын

Thank you - im working on some more

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!

@jamiewp

5 ай бұрын

Thanks - sometimes it's great to have restrictions and then find creative ways to still create cool things within those restrictions.

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.

@jamiewp

5 ай бұрын

Thanks Susan - i love this one too.

Awesome as always, Jamie. Thank you!

@jamiewp

5 ай бұрын

Thanks Viktor

This is amazing, Jamie!

@jamiewp

5 ай бұрын

Thanks 🙏 i really like this one 🤩

brilliant! Great idea, Jamie. Thanks for sharing!

@jamiewp

5 ай бұрын

Thank you 🙏 i really enjoyed making this one

So smart Jamie. Gutenberg at its best: maximum effect with no extra plugin! Well done.

@jamiewp

5 ай бұрын

Exactly right 💪 thanks for watching

Indeed, you are very creative! Thank you for offering such niceties!

@jamiewp

5 ай бұрын

My pleasure

Wow! This is just incredible. Thanks for sharing how to do this.

@jamiewp

5 ай бұрын

Thanks Philip - im in love with this one too 👍

Whoa, Jamie. Darn creative and looks cool. TY for the share

@jamiewp

4 ай бұрын

Thanks for watching!

Very cool, beautiful... thanks.

@jamiewp

5 ай бұрын

thanks Diego 👍

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.

@jamiewp

2 ай бұрын

Thanks Andrew - I really enjoyed working this effect out and making the video 👍

@SuttonsNest

2 ай бұрын

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?

Really cool idea!

@jamiewp

5 ай бұрын

thanks Ron

The instawp with your examples was very helpful in reviewing your work. Thank you!

@jamiewp

5 ай бұрын

Good to hear 👍

Brilliant!

@jamiewp

5 ай бұрын

thanks Mark 🙏

Very inspiring. Love it!

@jamiewp

4 ай бұрын

Thanks so much!

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

@jamiewp

5 ай бұрын

Thanks 🙏 im working on something even better for this weeks video 😊

Incredible video and I'll be using this in the future.

@jamiewp

5 ай бұрын

Great to hear 👍

so sneaky and amazing!

@jamiewp

5 ай бұрын

Thanks Ralf - sneaky 💪

Luv this! I had no idea this could be created w just Gutenberg, and the fact mobile friendly, thanks for sharing

@jamiewp

5 ай бұрын

Glad it was helpful!

Wow - this is amazing 🤩

@jamiewp

5 ай бұрын

It is isn't it 😀

Nice and simple!

@jamiewp

5 ай бұрын

Exactly

Really cool Jamie! 🎉🎉

@jamiewp

5 ай бұрын

thanks, glad you like it - i kinda discovered it by accident :)

@ghostrunner9596

5 ай бұрын

@@jamiewp Going to try this with the next project!

@jamiewp

5 ай бұрын

@@ghostrunner9596 cool - share a link when it's done

Amazing!

@jamiewp

5 ай бұрын

Tks

this is gorgeous Jamie, i will give u all my thumbs up if KZread allows it.

@jamiewp

17 күн бұрын

Thank you - i was really pleased on how this one turned out, so it's great to get such great feedback 🙏

@moon3English

16 күн бұрын

@@jamiewp it helps a tons⋯

@moon3English

16 күн бұрын

@@jamiewp it helps a tons⋯

@jamiewp

16 күн бұрын

@@moon3English 👍

Fun exercise. Thank you

@jamiewp

5 ай бұрын

Thanks Juri

Instane trick, thanks so much for sharing!

@jamiewp

5 ай бұрын

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

Genius!

@jamiewp

5 ай бұрын

cheers Jon

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.

Love all of your videos, great job! What theme do you usually use?

@jamiewp

3 ай бұрын

Thanks Kerri - i use Twenty Twenty Four and Ollie mostly atm.

Clever!

@jamiewp

5 ай бұрын

thanks 👍

Excellent content :))

@jamiewp

5 ай бұрын

Thank you!

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!

@jamiewp

4 ай бұрын

No plugins just core WordPress 👍

Very nice I like how it explained it I was going something similar but this is it fr fr ❤❤🎉🎉🎉🎉😅😮

@jamiewp

5 ай бұрын

Great to hear - I really love this effect

@tommycrankx

5 ай бұрын

@@jamiewp If you need any help whatsoever feel free to contact me 🙏🙏 I love your journey and will help where I can. Regards Tommy

these videos need more views

@jamiewp

5 ай бұрын

thanks

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?

@jamiewp

5 ай бұрын

Thanks - yes or the block visibility plugin and as someone commented, you could create different backgrounds and only show those on mobile 👍

Thanks for sharing this. But how did the background image changed from boy to girl at 4:55? 🤔

this works on iphone? safari? because usually iOS ignores this property to avoid performance issues

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.

@jamiewp

5 ай бұрын

That's a great idea :)

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.

@jamiewp

2 ай бұрын

Yes absolutely 👍

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!

@jamiewp

5 ай бұрын

Hi David, what theme are you using ?

Hey Jamie, is it possible to use other blocks besides the text block on top of that cover block? Say, a video embed?

@jamiewp

3 ай бұрын

Yup 👍

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!)

@jamiewp

5 ай бұрын

Yes, correct - so i would create different blocks and show those on mobile (using the block visibility plugin).

I must say limiting options does increase creativity inside the available options.

@jamiewp

5 ай бұрын

100% agree Max

what theme and plugins i need for this, infact all of your videos, thank you

@jamiewp

20 күн бұрын

This is done just using the default Twenty Twenty Four theme and no plugins.

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

@jamiewp

5 ай бұрын

Im not seeing that this end - what version of safari are you using ?

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?

@jamiewp

5 ай бұрын

In WordPress 6.5 you’ll be able to set the aspect ratio 👍 check out this video kzread.info/dash/bejne/g6SJ3JeCea7SoNo.htmlsi=BeWrF881c-g4KYh_

Level: Genius

@jamiewp

5 ай бұрын

thank you 👍 you wait till tomorrow's video - it takes things a few steps further :)

@tomcha75

5 ай бұрын

@@jamiewpAye. Ready to have my mind blown.

@jamiewp

5 ай бұрын

@@tomcha75 here's what i'm going to show you how to build x.com/pootlepress/status/1762057683639709820?s=20

@tomcha75

5 ай бұрын

​@@jamiewpAwesome. My gears were turning as I was watching it. Almost like a puzzle. Looking forward to it.

@jamiewp

5 ай бұрын

@@tomcha75 👍

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

@jamiewp

5 ай бұрын

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!

How to upload wordpress theme in gumroad? How to create main zip( and what will zip contact)

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?

@jamiewp

4 ай бұрын

There’s a way to add a theme .json file to a classic theme - its a litttt technical though

@cathydouglas2930

4 ай бұрын

Thanks!@@jamiewp

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

@jamiewp

5 ай бұрын

Here you go - select the cover block , then remove top and bottom margin 👍

@pakeydev

5 ай бұрын

@@jamiewp i can't see the options to remove it. where is it exactly? 👨‍🔧😄

is this possible to do same using Elementer

@jamiewp

Ай бұрын

I would think so

This looks absolutely great. Somehow, however, this does not seem to work on my iPhone. Is there a solution for that?

@jamiewp

5 ай бұрын

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.

@fvkeul

5 ай бұрын

@@jamiewp Well, something to work on for these Apple/IOS engineers. Thanks!

@jamiewp

5 ай бұрын

@@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.

@h.a.n.d.l.e.s

5 ай бұрын

This would be much appreciated! @@jamiewp

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.

@jamiewp

5 ай бұрын

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.

@vivekkumar-qd3ev

5 ай бұрын

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

@vivekkumar-qd3ev

5 ай бұрын

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

@vivekkumar-qd3ev

5 ай бұрын

Why my reply is not showing up,,, i said thank youuuuu, it's working on mobile too@@jamiewp

I have spaces between each section... so when I scroll it has the space lines between. How do I change that?

@jamiewp

Ай бұрын

It's likely there is a margin being set - can you check in settings?

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

4 ай бұрын

💪👍

is there no way to set z index in 2024 theme?

@jamiewp

17 сағат бұрын

Um for what?

@spitsparrow

16 сағат бұрын

@@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

@jamiewp

5 ай бұрын

Cool 👍

There is white line between cover block, how to remove this???

@jamiewp

5 ай бұрын

Hi - select the cover block and the remove the margin (in block settings panel on the right)

@hectorm.markley6154

5 ай бұрын

@@jamiewp Thankyou, itworks

@PaulStradling

2 ай бұрын

@@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!

@jamiewp

2 ай бұрын

@@PaulStradling glad you like it :) 👍

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

5 ай бұрын

Yup , you could show different blocks on mobile using the free block visibility plugin . This is the way I approach it.

@paulbrkmn

5 ай бұрын

@@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

5 ай бұрын

@@paulbrkmn yup agree

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?

@jamiewp

5 ай бұрын

Check whether the cover block has a margin :)

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.

@jamiewp

Ай бұрын

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

@jamiewp

2 ай бұрын

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.

@mohammedtjr9236

2 ай бұрын

@@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.

@jamiewp

5 ай бұрын

thanks Carl