Почему мой ScrollMagi c. JS устанавливает высоту элемента равной 0? - PullRequest
Новая
       9

Почему мой ScrollMagi c. JS устанавливает высоту элемента равной 0?

1 голос
/ 03 марта 2020

Я пытаюсь сделать что-то вроде этого: Ссылка: ScrollMagi c Примеры

Я не могу заставить его работать. Высота #pageContent составляет только 0 , если включено ScrollMagi c .min. js.

Изображение - Элемент: #pageContent in inspect

Что я пробовал:

  • Использование в примерах исходного кода
  • Удаление моих скриптов 

//Copied from ScrollMagic Examples
$(function () { // wait for document ready
  // init
  var controller = new ScrollMagic.Controller();

  // define movement of panels
  var wipeAnimation = new TimelineMax()
  .fromTo("#pageSec1", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("#pageSec2", 1, {x:  "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("#pageSec3", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone});

  // create scene to pin and link animation
  new ScrollMagic.Scene({
    triggerElement: "#pageContent",
    triggerHook: "onLeave",
    duration: "300%"           
  }).setPin("#pageContent")
    .setTween(wipeAnimation)
    .addIndicators()
    .addTo(controller);
});
* {
  box-sizing: border-box;
  font: normal 14px Arial;
}
#pinContainer {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
section {
	height: 100%;
	width: 100%;
	position: absolute;
  padding: 15vh 20vw;
  background: white;
}
.space {
  height: 100vh;
  padding: 15vh 20vw;
  width: 100%;
  border-bottom: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="space">Space</div>

<div class="content" id="pageContent">

  <section class="section-img" id="pageSec1">
    <div class="section-content">
      <div class="img-display">
        <img src="../img/me.jpg" alt="About Me">
      </div>
      <div class="info">
        <h2>About Me</h2>
        <div class="text"></div>
        <a class="more" href="about.html">Read More</a>
      </div>
    </div>
  </section>

  <section class="section-card" id="pageSec2">
    <div class="section-content">
      <div class="info">
        <h2>My Work</h2>
        <a class="more">See All</a>
      </div>
      <div class="card-content">
        <div class="card">
          <h4>Company</h4>
          <h3>Online Warehouse Status</h3>
          <hr>
          <div class="text">This is a dashboard program created to see the warehouse stock online. I have also made a user system and a reusable database system.</div>
          <a class="more">Read More</a>
        </div>
        <div class="card">
          <h4>Hobby Project</h4>
          <h3>Computer Builder</h3>
          <hr>
          <div class="text">This is a dashboard program created to see the warehouse stock online. I have also made a user system and a reusable database system.</div>
          <a class="more">Read More</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section-info" id="pageSec3">
    <div class="section-content">
      <div class="info">
        <h2>Contact Me</h2>
        <div class="info-box">
          <div class="info-boxitem">
            <h3>Email</h3>
            <h4>email@gmail.com</h4>
          </div>
          <div class="info-boxitem">
            <h3>Phone</h3>
            <h4>+45 00 00 00 00</h4>
          </div>
        </div>
      </div>
    </div>
  </section>

</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
...