How to Create Magical WordPress Scroll Effects 🔥
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2024
- 👉 FREE THEMES www.pootlepress.com/free-word...
👉 Stay in touch with WordPress news: www.pootlepress.com/sign-up-t...
👉 Get WordPress help : www.pootlepress.com/get-wordp...
👉 Channel Sponsorship opportunities www.pootlepress.com/youtube-v...
👉 Godaddy WordPress Hosting Deal - bit.ly/jamiewp
👉 Apple.com website recreation tutorial - • WordPress Pro recreate...
👉 One Click Website with Designs for you - app.instawp.io/launch?t=magic... - วิทยาศาสตร์และเทคโนโลยี
![[안방1열 풀캠4K] 베이비몬스터 'FOREVER' (BABYMONSTER FullCam)│@SBS Inkigayo 240707](http://i.ytimg.com/vi/_2HL-ogzzBU/mqdefault.jpg)
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) th-cam.com/video/Y0tyPAOcwDw/w-d-xo.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.
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
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
Awesome as always, Jamie. Thank you!
Thanks Viktor
This is amazing, Jamie!
Thanks 🙏 i really like this one 🤩
brilliant! Great idea, Jamie. Thanks for sharing!
Thank you 🙏 i really enjoyed making this one
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 👍
Whoa, Jamie. Darn creative and looks cool. TY for the share
Thanks for watching!
Very cool, beautiful... thanks.
thanks Diego 👍
Really cool idea!
thanks Ron
Very inspiring. Love it!
Thanks so much!
The instawp with your examples was very helpful in reviewing your work. Thank you!
Good to hear 👍
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?
Brilliant!
thanks Mark 🙏
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
Incredible video and I'll be using this in the future.
Great to hear 👍
Amazing!
Tks
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 😊
Nice and simple!
Exactly
Wow - this is amazing 🤩
It is isn't it 😀
so sneaky and amazing!
Thanks Ralf - sneaky 💪
Fun exercise. Thank you
Thanks Juri
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
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!
Excellent content :))
Thank you!
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?
Thanks Kerri - i use Twenty Twenty Four and Ollie mostly atm.
Clever!
thanks 👍
Genius!
cheers Jon
these videos need more views
thanks
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 👍
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 👍
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 👍
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 th-cam.com/video/QpUz5IIKlpw/w-d-xo.htmlsi=BeWrF881c-g4KYh_
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).
Hey Jamie, is it possible to use other blocks besides the text block on top of that cover block? Say, a video embed?
Yup 👍
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 :)
I must say limiting options does increase creativity inside the available options.
100% agree Max
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
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 ?
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? 👨🔧😄
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
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 👍
How to upload wordpress theme in gumroad? How to create main zip( and what will zip contact)
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
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
is this possible to do same using Elementer
I would think so
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.
💪👍
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?
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 👍
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 :)
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
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 :) 👍
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