I am completely new to JavaScript, which is why I decided to use Skrollr. However, I have been facing some challenges in getting Skrollr to work properly on my webpage. I added the following code at the end of my page:
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>After adding the code, I tried implementing a simple animation from the Skrollr documentation where the text changes color using this code:
<p class="lead" data-0="background-color:rgb(0,0,255);" data-500="background-color:(rgb255,0,0):">Blah blah blah.</p>Unfortunately, I did not see any results after uploading the page. I suspected there might be a conflict between the class and the data-. After removing the class and re-uploading, I still saw no change. Can someone help me figure out what's going wrong? Here is the link to the page where I was testing Skrollr:
In the future, I also hope to create animations such as expanding images and implement parallax scrolling effects, but first, I need to get Skrollr working correctly. Any guidance on enabling smooth scrolling would also be greatly appreciated. Apologies if these questions seem basic.
One more thing I forgot to mention: While working with Skrollr, Dreamweaver flagged an error on line 1 of skroll.min.js saying "there is a syntax error." The first line of skroll.min.js contains <!DOCTYPE html>.