Rasmus Rajje Josefsson Rasmus Rajje Josefsson - 1 month ago 12
CSS Question

Switch between two parallax backgrounds

I want to switch between two parallax background using waypoints. All works well in Chrome, but the problem appear on other browsers.


  • Firefox:, when I switch between background-images, the next background will appear for a second over all other elements on the site.

  • Safari, have a lot of lag.



Edited working example now:
http://codepen.io/rajjejosefsson/pen/vXVYNL

.background_fill {
overflow: hidden;
position: relative;
}

.background_fill:before {
top: 0;
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
content: " ";
position: fixed;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://www.w3schools.com/css/trolltunga.jpg');
will-change: transform;
width: 100%;
height: 100%;
}

.background-render {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Mobile-Wallpapers-HD-640x400.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
will-change: transform;
pointer-events: none;
}

Answer

I just removed the params from show() and hide() functions and it started to work fine in FF and Safari.

Show and hide functions don't accept such argument. .background_fill isn't a valid duration.

The resulting JavaScript:

$(".background_fill").hide();

$(document).ready(function() {

  /* new hidden background */

  $('.js_show_new_bg').waypoint(function(direction) {

    if (direction === "down") {
      $(".background_fill").show();
    } else {
      $(".background_fill").hide();
    }
  }, {
    offset: '1%'
  });

});

Also you can use toggle function to simplify your code:

$(".background_fill").toggle(direction === "down"); // true = show, false = hide

Instead of this code:

if (direction === "down") {
  $(".background_fill").show();
} else {
  $(".background_fill").hide();
}
Comments