![]() ![]() We can also set the height of the background image to 100%. * Create the parallax scrolling effect */Įxample: Add Parallax Effect with customize height In this example, we are creating a parallax scrolling effect by using CSS properties. background-repeat : The no-repeat value is added to it so that the images do not repeat in the background.Įxample: Create a parallax scrolling effect using CSS.background-size : This property is used to scale the image so it fills the background.background-position : It is used to position the background image to the center.background-image : It is used to add the background image to the webpage.background-attachment : The fixed value is added to background-attachment to give the parallax effect to the webpage.Along with is, we need some other CSS properties too. The background-attachment property gives the actual effect to the webpage. In the parallax scrolling, the background element moves at a slower speed than the foreground element. The parallax effect is very popular in video games for years and now it is being used in web designing too. Set the inner HTML of the image’s diagnostics div to show the current vertical position of the image.The parallax scrolling effect is used to create an illusion of depth for a 3D effect, having multiple layers of scrolling.Set the image’s object-position CSS property by using. Find out whereabouts within the window the image is, as a percentage.Main function: setImageScrollPercentage(). ![]() ![]() Listen to the window’s resize event and the document’s scroll event.Call setImageScrollPercentage() to set the image’s initial properties.Add the image element to a the parallaxImages array so we can loop through all the images quickly, whenever we want.Optionally create a small CSS element to hold diagnostic info.For each image block instance with the parallax CSS class….The code should be easy enough to follow, and it breaks down like this: wp-block-image.parallax img definitions to see how we’ve set the letterbox format, using “ width:100%” and heights of “8em”, “15em” and “22em”. Paste the following into wpt-parallax/wpt-parallax.css. Check your browser’s JavaScript console too, to make sure there are no errors in there, for things like missing CSS or JS files. Save all that and reload some content on your site – there won’t be any parallax yet, but nothing should be broken either. Next up, open your child theme’s functions.php file and add the following couple of lines: // WPT Parallax Image Effect. In here, create two empty text files called “wpt-parallax.css” and “wpt-parallax.js”. In your custom child theme, create a folder called “wpt-parallax”. Notice how we set the global JavaScript object wptParallax by calling wp_localize_script, so we can keep the project’s settings in PHP. We don’t have any CSS dependencies, and we’re not reliant on jQuery either – super lightweight. There’s not much in here – all we do is enqueue our CSS and JS assets. 'isDevModeEnabled' => WPTPLX_IS_DIAGNOSTICS_ENABLED,Īdd_action('wp_enqueue_scripts', 'wpt_parallax') $base_uri = get_stylesheet_directory_uri() In your custom child theme, create a new file called wpt-parallax.php and paste the following into it. Img with “object-fit:cover ” The PHP Code ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |