Background image zoomed in while using Parallax.js jQuery plugin

Question

I added the parallax.js jQuery plugin and the effect works, but not properly. The background is zoomed in and the image is glitchy on scroll. I added additional variables listed in the documentation to fix those issues, and they work as expected. However, unexpectedly they also break my content which is created dynamically using JS in the '#sections' div, an empty div populated with a JavaScript object?

function parallaxBackground (){
    var yPos = -(($window.scrollTop() - $this.offset().top) / 5);// Scroll speed      
    var coords = '1% '+ yPos + 'px';// Background position       
    $this.css({ backgroundPosition: coords });// Move the background
}   
parallaxBackground();//Call parallaxBackground function

Any idea why this function would erase HTML content created using JS? The rest of the JS still works, its just the '#sections' div that stops working. Scroll, reveal, and hover effects are still intact. Here is a link to the code.

https://gist.github.com/flyspaceage/075dcf3a6d6bd65edf0f456036eb9bd8

Please read comment by FlySpaceAge for more info.

score 0 · Accepted Answer · answered Aug 01 '17 at 22:16

I ended up changing the script a bit and adding some variables from the parallax documentation. While this solution did fix the functionality, the background image is now zoomed in. While not perfect, this function did fix the initial problem I posted.

(function($){
$(document).ready(function(){
    $('#sections').on('click', '.back-to-top', scrollToTop);
    $('#jump-menu li').click(scrollToAnchor);
    $('.parallax-window').parallax({imageSrc: '../images/background.png'});     
});

function scrollToTop(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: 0
    }, 500);
}

function scrollToAnchor(event){
    event.preventDefault();

    var target = $(this).attr('rel');
    var offset = $(target).offset();

    $('html, body').animate({
        scrollTop: offset.top - 270
    }, 500);
}

/* PARALLAX functionality*/
function parallaxBackground (){

    var parallaxWidth = Math.max($(window).width() * 1, 1 ) | 0;

    $('.parallax-window').width(parallaxWidth); 

}

parallaxBackground();


})(jQuery);

Background image zoomed in while using Parallax.js jQuery plugin

1 Answers1