parallax featured image wordpress

Hi, if someone needs to add parallax to the main part of the page from the administration panel. For this solution. I did not use the featured image for this. Only Advanced Custom Fields plugin.

1 step:
Instal Advanced Custom Fields plugin and add custom fields with image

2 step:
download https://github.com/pixelcog/parallax.js/

3 step:
Install parallax.js in your wordpress -(I added to /wp-bootstrap-starter/inc/assets/js/parallax.min.js and parallax.js

4 step:
open function.php and add this code
wp_enqueue_script('wp-bootstrap-starter-parallaxjs', get_template_directory_uri() . '/inc/assets/js/parallax.min.js', array() );

5 step:
open header.php and add this code:
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

6 step :
Open your Page or other site and add this code

<div class="container-fluid p-0 m-0"> //with out dont work
<?php
$image = get_field('parallax');//name your custom fields 
if( !empty($image) ): ?>
 <div class="parallax-window" data-parallax="scroll" data-image-src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></div>
<?php endif; ?>
</div> 

7 step:
add code for style.css

.parallax-window {
    min-height: 400px;
    background: transparent;
}

Regards.

• This reply was modified 6 years, 8 months ago by zafon123.

Hi zafon123,

Thanks for this tutorial, this will help others that looking for this functionality. Thank you very much ??