I've been attempting to implement a parallax effect using Stellar.js with two image tag elements, but I'm encountering issues. Despite trying various configurations, including following the Stellar.js creator's tutorial scripts closely, nothing seems to be working.
I have specified absolute and relative positioning for the images, set their sizes in pixels, added the data-stellar-background-ratio attribute, included all necessary jQuery and Stellar scripts, and searched exhaustively for a solution. However, I am still unable to get the desired result. While I may be new to jQuery, it appears that this should be a straightforward process based on available tutorials, yet it remains elusive.
If anyone could provide insight into what might be causing this problem, I would greatly appreciate it. Below are snippets of the relevant code:
<img src="images/header_Splash.png" width="886" height="478" alt="" id="headerSplash" data-stellar-background-ratio="1.25"/>
This snippet features one of the images intended for the parallax effect.
</footer>
<script src="jquery.min.js"></script>
<script src="jquery.stellar.min.js"></script>
<script src="script.pre.js"></script>
The above script links are located at the bottom of my HTML, just before the </html> tag.
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 200
});
This code is extracted from the script.pre.js file, which I obtained from the Stellar.js tutorial site at
While I am aware of the numerous customizable options available through Stellar.js, my understanding is that such elaborate settings are unnecessary for a basic effect.
Could someone please point me in the right direction as to what might be the issue here?