-1

I am trying to use ScrollMagic on my webpage. I've entered the code in a .js file, and have linked both this file and a ScrollMagic cdn to my html, but it hasn't made a difference to my page.

I've tried adding ../ to the file link and adding different scripts

This is the HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Sarabun" 
rel="stylesheet">
<link rel="stylesheet" href="css/styles2.css">
<title>Example</title>
</head>

<body>
<header>
<h1>Header section</h1>
</header>
<section class="about">
<div class="about-title">
  <h2>About Us</h2>
</div>
<div class="about-pages">
  <div>
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet, </p>
  </div>
  <div>
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet, </p>
  </div>
  <div>
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  </div>
  </section>


<footer>
<h2> This is the footer </h2>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="app.js"></script>

</body>

This is the app.js code:

function splitScroll(){
const controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
duration: '200%',
triggerElement: '.about-title'
triggerHook: 0; 
})

.setPin('.about-title');
.addIndicators();
.addTo(controller);
 }

splitScroll();

I expected the left side of my page to stay stationary whilst the right scrolls, but it's all scrolling at once.

RianneJ
  • 143
  • 1
  • 11

1 Answers1

1

I see some errors in your JS code. Object properties should have a trailing comma. You are missing one. You also should not have a semi-colon after the last one.

new ScrollMagic.Scene({
duration: '200%',
triggerElement: '.about-title',
triggerHook: 0 
})

Another issue is you have unnecessary semicolons that is causing chaining issues...

.setPin('.about-title')
.addIndicators()
.addTo(controller); // This one may need to be removed also

Lastly, I see that the trigger is attached to a class (.about-title). I do not see that class in your html.

Clay Hess
  • 228
  • 6
  • 24
  • I've edited my HTML above to show the about-title section. I've edited my JS to how you've said but to no avail. Do you think i'll need to add a jquery cdn? – RianneJ Apr 18 '19 at 08:11
  • I've got it to work, I had a look at the console whilst running the page and saw that the file app.js was not being found. Added ../js/app.js (as this is the folder it is kept in) and the parallax now works. Thanks for your help Clay, as i done this before but i still had errors in my JS code, now that i've edited it, it works. – RianneJ Apr 18 '19 at 09:11