WordPress.org

Ready to get started?Download WordPress

Forums

Replace Header with Parallax effect (7 posts)

  1. carn21
    Member
    Posted 1 year ago #

    I'm using the Twentyeleven theme and would like to replace the header image with a parallax effect I have worked out in another website using jquery and multiple DIVS that are stacked on top of each other. Can someone direct me to how I might go about doing this?

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

  3. carn21
    Member
    Posted 1 year ago #

    I've actually already created a child theme and have gotten everything looking how I want to. I would just like to have a section of images using a parallax effect below the nav where the header images are. Don't know the best way to go about doing that.

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    Um - you lost me a bit now... The header image is above the nav in Twenty Eleven. So do you want to replace that image or add something additional below the nav? Only the placement determines which template file you'll be customising in your child theme.

  5. carn21
    Member
    Posted 1 year ago #

    O sorry. I swapped the position of the nav and the header. I have the nav as a fixed position element at the top, so the page scrolls behind it. What I'd like to do is insert a parallax effect below the nav, so that when you scroll down the page, it engages the parallax effect.

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    Ah! That means you definitely still need to be customising header.php. assuming your jQuery is in a separate file, you can enqueue it in the child's functions.php file using something like:

    function my_jquery_init() {
    	wp_enqueue_script('my-script',
    	get_stylesheet_directory_uri() . '/js/myscript.js',
    	array('jquery'),
    	false
    	);
    }
    endif;
    add_action('template_redirect', 'my_jquery_init');

    Do remember to ensure that your script uses no-conflict wrappers.

    Then it's just a case of adding your div blocks before </header> in the theme. Obviously this is all very general. I, personally, have absolutely no idea how a parallax effect works. :-)

  7. kenneth.von.rauch
    Member
    Posted 1 year ago #

    @ carn21

    I just found your post and it occurred to me that you may want to check this tutorial, which explains how to easily add a parallax effect to your WordPress theme (any theme!). You'll just have to use the Parallax Background Builder that allows you to create this effect in a very user friendly way.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.