adding scrolling images for a parallax background

Question

I am trying to make multiple images (3) fade in and out as parallax background. I am currently using a large animated gif which is not going to cut it due to the loading times and what I eventually need. I am trying to target a "data-background" attribute which I have done but can't seem to get the images to change. I can get it to output in the console but not the data-background. Below is the code.

Thanks!

<section id="paralax-image" style="height: 400px;" class="module-cover parallax" data-background="" data-overlay="1"
        data-gradient="1">


(function () {

// The images array.
var images = ["assets2/Arcadian.jpg", "assets2/AngryPrawns.jpg", "assets2/Apricot_Smash.jpg"];

// The counter function using a closure.
var add = (function() {
    // Setting the counter to the last image so it will start with the first image in the array.
    var counter = images.length - 1;
    return function() {
        // When the last image is shown reset the counter else increment the counter.
        if(counter === images.length - 1) {
            counter = 0;
        } else {
            counter+=1;
        }
        return counter;
    }
})();

// The function for changing the images.
setInterval(
    function() {
      var section = document.getElementById("paralax-image");
      section.getAttribute("data-background");
        section.setAttribute('data-background', images[add()]);
        console.log(images[add()]);
    }
, 3000);

})();

score 0 · Answer 1 · edited Sep 20 '18 at 01:49

First of all, attributes that have "data-" in front of them are only used to store some custom data on elements. Those attributes do not influence the appearance/behaviour of your app in any way unless you use them in your JS/CSS.

So, in your code, you are setting the data-background attribute on your section. The code is working correctly and if you look into the inspector, you can actually see that that attribute's value is changing as expected.

The next step for you would be to display the images that you set in your data-background attribute - either using JS or CSS.

Unfortunately, for now, it's not possible to grab the background URL from attribute value in CSS as described in the top-voted answer here: Using HTML data-attribute to set CSS background-image url

However, you can still manually set the CSS background-image property using JavaScript based on the "data-" property.

// The images array.
const images = ["https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350", "https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350", "https://images.unsplash.com/photo-1530482817083-29ae4b92ff15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=44f4aebbd1e1371d5bf7dc22016c5d29&w=1000&q=80"];


const imagesSwitcher = () => {

 const getCounter = () => {
    // Setting the counter to the last image so it will start with the first image in the array.
    let counter = images.length - 1;
    return () => {
        // When the last image is shown reset the counter else increment the counter.
        if(counter === images.length - 1) {
            counter = 0;
        } else {
            counter += 1;
        }
        return counter;
    }
 }
  
  const counter = getCounter();
  
  const updateBackground = () => {
   const section = document.getElementById("paralax-image");
      
      section.style.background = `url(${images[counter()]}) no-repeat`;
      
 };
  
 updateBackground();
 setInterval(() => updateBackground(), 3000);
};

imagesSwitcher();

.dynamic-background {
  display: block;
  width: 500px;
  height: 200px;
  background-size: 100%;
}

<div>
  <section id="paralax-image" class="dynamic-background" style="height: 400px;" class="module-cover parallax" data-background="" data-overlay="1" data-gradient="1">
  </section>
</div>

The thing is - in this case, you don't even actually need this data-background property. You can simply switch background image using JS.

Now, it's not very clear what you meant by parallax in your case. In case you actually meant parallax background like in here http://jsfiddle.net/Birdlaw/ny8rqzu5/, you would need to take a different approach overall. Please comment if you need any help with this.

That is exactly what I need help with. If you look at the jsfiddle link posted I need that effect with the background rotating through 3 images. So imagine the cat image in the example cross-fades two other images, but still gives that parallax effect when you scroll down. Hope that makes sense.. Thanks for the help! — JasonS, Sep 18 '18 at 17:11
@JasonS, please update your question then. So that it actually reflects what you are asking for. Put as much context/description as you can. Still not 100% clear how you want cross-fading co-exist with parallax scrolling. Do you have any example website/video/smth that shows the effect? — Daniil Andreyevich Baunov, Sep 18 '18 at 18:56
The project I am working on is at butcherandbarrel.pub As you scroll you see the images fade in and out in a couple of sections. I am currently accomplishing this by using animated gifs as backgrounds. I need to get away from using those gifs and accomplish the same effect. The gifs are too large of files and makes the page load very slow at times. Hope that helps. — JasonS, Sep 19 '18 at 15:21
@JasonS, how about this solution? http://jsfiddle.net/h2fzvyr5/ (https://stackoverflow.com/questions/27759127/crossfade-multiple-background-images-using-css-only-single-page-design) Is it not working for you? — Daniil Andreyevich Baunov, Sep 19 '18 at 15:58
@JasonS, or this one - https://codepen.io/dudleystorey/pen/qEoKzZ. I feel it suits your needs even better — Daniil Andreyevich Baunov, Sep 19 '18 at 15:59

adding scrolling images for a parallax background

1 Answers1