Add Parallax Effect to Background Image by Gutenberg Editor
Tento článek (nebo jeho část) je převzat z externího zdroje. Je tedy slušností jej uvést včetně případného autora.
From wordpress 5.0, new visual editor called Gutenberg Editor will be installed as default visual editor of wordpress. (It can be available by activating Gutenberg plugin in wordpress 4.9.) And it can make us add cover image block (background image block) from visual editor. Here, we will explain how to add parallax effect to background image added by Gutenberg.
Let’s see how it works on Codepen.
See the Pen Add Parallax Effect to Background Image Added by Gutenberg Editor of WordPress 5.0 by LeapIn (@LeapInCorp) on CodePen.
|
1 2 3 |
<div class="wp-block-cover-image has-background-dim" style="background-image:url(https://leap-in.com/wp-content/uploads/2018/06/mountain.jpg)"> <p class="wp-block-cover-image-text"><strong>Parallax 1</strong></p> </div> |
|
1 2 3 4 |
.wp-block-cover-image { background-attachment: fixed; background-position: 50% 0; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
(function($) { /** change value here to adjust parallax level */ var parallax = -0.5; var $bg_images = $(".wp-block-cover-image"); var offset_tops = []; $bg_images.each(function(i, el) { offset_tops.push($(el).offset().top); }); $(window).scroll(function() { var dy = $(this).scrollTop(); $bg_images.each(function(i, el) { var ot = offset_tops[i]; $(el).css("background-position", "50% " + (dy - ot) * parallax + "px"); }); }); })(jQuery); |
Napsat komentář