Awesome Parallax Effect with WordPress Gutenberg Block Editor

I discovered this really cool Fixed Parallax Effect with Block Editor (Gutenberg) and here's what I built wp-skins.com/streamliner/para...
Here's a link to the smooth scroll plugin for jump links (anchor links) en-gb.wordpress.org/plugins/e...
Timeline
0:00 - Intro
0:30 - Demo of Parallax Effect
1:30 - Create the blurred image
2:50 - Add the Cover Block
5.10 - Set the Fixed Parallax
5:30 - Set the Cover Block to be full width
7:30 - Create the 2nd image
9:00 - Add the jump links (html anchor points)

[@SHAREandGROW]

Great! Had this in my inbox from April and now finally came to check it out! Thx

[@jamiewp]

Great :)

[@manifestandvisualize]

I love your videos and your cat. Thank you for giving so many great information in such an inspiring way!

[@jamiewp]

Thank you 🙏

[@TheFlowerEmpowered]

Thanks so much! So well explained, very helpful. I'm subscribing!!

[@jamiewp]

Great, and thank you 🙏

[@tomfraser3086]

Love your tutorials. This one is especially useful. Your idea works perfectly on desktop and laptop, but when it comes to tablet all that you see is the center cut of the photo. Is there a way to maintain the aspect ratio between devices ???

[@AmankayAlvarado-vy9mh]

Gracias amigo, me encanto!!! Lo aplique actualmente, algunas configuraciones cambiaron con la versión actual de WP, pero quedo genial.

[@randbaldwin]

Late to the party, but love this. Here's a cool idea (IMHO) for a variation: On the blurred image, fade to clear at the bottom. Then instead of a sharp edge between the blur and clear, it becomes a smoooooth tasty fade. :)

[@TonyGirling]

Thanks for another informative video Jamie. I've used the Cover block with a fixed image before but never thought of stacking 2 like this.
I need to try your smooth scroll plugin - is it CSS or JS based? -> does it work for all browsers?

[@jamiewp]

Hi Tony , it's JS based - link here en-gb.wordpress.org/plugins/easy-smooth-scroll-links/

[@thewebpixiehq]

Thanks for this video, very useful as usual. I thought I would try it out but I get an annoying gap between the 2 covers, is there any way to remove this? I've resorted to making the background a similar colour to the image but it's not ideal. Plus as an additional challenge, I thought I would get fancy and have my bottom cover with a transparent background (png image) so it looks like the image is building up as you scroll. Unfortunately, the transparency doesn't work at all. I feel like I need to make adjustments in CSS but can't find anywhere to add css. I'm using full site editor and Tove theme, but am happy to go with any theme at the moment, as I try and build up my knowledge. I know I'm being cheeky asking, but if you don't ask and all that ...

[@jamiewp]

Hi Nicola, i think that gap is because of the Tove theme - it might be worth reaching out on the wp.org Tove support forum. Re CSS , here's a nice simple CSS Gutenberg plugin wordpress.org/plugins/blocks-css/

[@thewebpixiehq]

@@jamiewp Thank you! I shall give these a whirl.

[@JavierTubert]

Hi Jamie, very helpfull this tutorial. Thank you very much. One silly question... how do you do to have the adjustments of each block stays sticked in the header? In my case they stay on top of each block, in the main section, which is a bit anoying... :)

[@jamiewp]

Try sticking the parent group block

[@dogvaly3877]

Sir ,that is awesome
Needs Gutenberg editors customisation

[@MrCheekytony]

What plugin did you used for your website?

[@DavePerth]

Nice effect, but isn't a Parallax effect where the background image also scrolls at a different rate than the overlaying content ?

[@jamiewp]

Hi Dave, yes it is, but this is called Fixed Parallax. There are different types of parallax :)

[@Loggy48]

Interesting. Maybe a plugin/theme/WP update is required!

[@phoglite]

Good vid! It doesn’t seem to work on mobile safari... background just moves with the foreground.

[@jamiewp]

Yup parallax is not support on safari i believe

[@VittorioZamparella]

let me object that background-attachment:fixed is available since css 1 and is not a parallax

[@rebelinc]

Good idea and video. But when i do a similar thing I only get the two blocks scrolling up or down:-)

[@jamiewp]

Did you set the background to be fixed?

[@rebelinc]

@@jamiewp yes I did. Using the Astra Theme and its a new test install. Strange indeed

[@spaceoverview4268]

Please take a look of parallax definition, here it's not parallax effect.

[@Historian212]

I don't understand the use of "parallax" here, since the word is about an optical illusion involving the difference between the real and apparent position of an object, not blur or any other filter effect. Since a very large percentage of people use their phones to access the web, and most don't spend much time per screen, whether on mobile device or computer, the use of motion, blur-to-sharp, etc., on images mostly wastes people's time and is likely to get them to browse on rather than wait.

[@jamiewp]

Hi, fair point. The use of Parallax is because the image is a fixed parallax background - it's a setting in Gutenberg for the Cover Block - agreed not to be used in every case, but for some sites where appropriate.

[@lin_ng4380]

If u have the problem with hide the title, here is the code for CSS area
.page .entry-title {
display: none;
}

[@jamiewp]

Thanks for sharing

[@scudlauncherr]

i found a tutorial tell : If you do hide the footer credit with CSS, then Google may flag you as a spammer and your site will lose search engine rankings. In the worst-case scenario, Google may even delete you from their index so you never appear in search results.

[@luisneves3633]

Hello! Check the email (and spam) with a letter of cooperation (ConveyThis)