Блог

Главная - Вопросы по программированию - Контроллер ScrollMagic не является ошибкой конструктора

Контроллер ScrollMagic не является ошибкой конструктора

#javascript #scrollmagic

#javascript #scrollmagic

Вопрос:

я следил за руководством разработчика (youtuber) по scrollmagic, после прохождения которого я получаю сообщение об ошибке я перепробовал несколько решений и руководств, но я продолжаю застревать main.js: 9 Uncaught TypeError: ScrollMagic.controller не является конструктором в main.js: 9 html

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Ezy Virtual</title>
</head>
<body>
    <header>
        <img class="logo" src="images/1280px-EasyJet_logo.png" height="34px" width="150px" alt="logo">
        <nav>
            <ul class="nav_links">
                <li><a href="# ">About Us</a></li>
                <li><a href="#">Our vision</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
        <a class="cta" href="#"><button>Join us</button></a>
    </header>
    <section>
        <div class="intro">
        <h1>EasyJet virtual</h1>
        <video id="video" src="../FP/vids/landing.mp4">
        </video>
        <div id="long"></div>
        </div>
    </section>
    <section class="section2">
        <h1>Hello</h1>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js" integrity="sha512-UgS0SVyy/0fZ0i48Rr7gKpnP Jio3oC7M4XaKP3BJUB/guN6Zr4BjU0Hsle0ey2HJvPLHE5YQCXTDrx27Lhe7A==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll 4ViUFv XOIr/xaIK96soMj6s5jVszd7I97a0H WhgFwTEg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js" integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps MHGLWZ6Byz0BqQzrP 3GIgYL KvLaWgpL8XgDVbIRYQeLa3Vqu6A==" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
</html>

css

     .section2 {
    height: 100vh;
    color: black;
}

.intro {
    height: 100vh;
}

.intro video{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.intro h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: white;
}

Javascript

     const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('h1');
//end
const section = document.querySelector('section');
const end = section.querySelector('h1');

//scroll magic
let controller = new ScrollMagic.controller();
//scene
const scene = new ScrollMagic.scene({
    duration:9000,
    triggerElement: intro,
    triggerHook: 0
})
.addIndicators
.setPin(intro)
.addTo(controller);

let scene2 = new ScrollMagic.scene({
    duration: 3000,
    triggerElement: intro,
    triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);

//text animation
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});

//vid animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

scene.on('update', e =>{
    scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
    delay  = (scrollpos - delay) * accelamount;
    console.log(scrollpos, delay);

    Video.currentTime = delay;
}, 33.3);

Пожалуйста, помогите, я новичок в программировании, и мне нужно быстро разобраться,
спасибо

Комментарии:

1. Мы в GreenSock не рекомендуем ScrollMagic. Вместо этого мы рекомендуем официальный плагин прокрутки: ScrollTrigger ! Это лучше во всех отношениях.

Ответ №1:

Контроллер должен быть написан с большой буквы «C»

 let controller = new ScrollMagic.Controller();