CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3297739
user3297739

Reputation: 21

Stellar.js not working

I'm trying to use Stellar.js to create a simple parallax with two image tag elements but it's not working. I've tried a handful of different configurations. What I have now is literally a copy paste of the Stellar.js creator's own tutorial scripts (applied to my own html and css elements).

I've defined the image sizes in pixels, set them to absolute and relative positioning, added the data-stellar-background-ratio attribute, declared all the scripts for jQuery, and Stellar and looked everywhere for a solution but nothing works. I'm new to jQuery but from every tutorial I can find I understand that this is supposed to be simple, but it refuses to do anything. This is very frustrating.

Can someone please tell me what I'm doing wrong. I've copied snippets of the code below:

<img src="images/header_Splash.png" width="886" height="478" alt="" id="headerSplash" data-stellar-background-ratio="1.25"/>

This is one of the images I'm trying to apply the parallax effect to. 

 </footer>

    <script src="jquery.min.js"></script>
    <script src="jquery.stellar.min.js"></script>
    <script src="script.pre.js"></script>

These are the script links at bottom of my html just before the </html>.

$(function(){
$.stellar({
    horizontalScrolling: false,
    verticalOffset: 200
});

This is the script.pre.js file that I copied from the Stellar.js tutorial site code http://markdalgleish.com/examples/mobileparallax/index.pre.html

The know there are a lot of things I can toggle with Stellar.js but my understanding is that for a simple effect this is all that's needed.

What am I missing here?

Upvotes: 2

Views: 2454

Answers (1)

LWurm
LWurm

Reputation: 542

It looks like you want to be using the attribute data-stellar-ratio instead of data-stellar-background-ratio on your image tag.

The data-stellar-background-ratio should be used for elements that have a background-image style applied to an element such as a div.

Example: div { background-image: url("/img/circles.png"); }

In this case, the image should be treated as an element to be scrolled, and not a background image.

To drive the point home, you could apply both attributes to any element with a background image to create some extra cool effects.

Generally speaking, images would only be used with the data-stellar-ratio tag. A practical exception to this would be if you were to apply both attributes to a semi-transparent image with it's own secondary background-image underneath.

Upvotes: 2

Related Questions