Support » Theme: WP Bootstrap Starter » parallax featured image wordpress

Viewing 2 replies - 1 through 2 (of 2 total)
  • 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 months, 3 weeks ago by  zafon123.
    Theme Author Afterimage Designs

    (@afterimagedesigns)

    Hi zafon123,

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘parallax featured image wordpress’ is closed to new replies.