Intersection Observer API和Bootstrap出现问题

时间：2019-05-21 21:33:40

标签： javascript twitter-bootstrap bootstrap-4

我的路口观察器API有问题。当交集比率至少为40％时，我试图触发动画，因此我使用以下代码：

if(entry.intersectionRatio > 0.40){
  DO SOMETHING
}

但是，我不断得到的交集比率为“ 0.0xxxx”，甚至更低，为“ 0.00xxxx”。例如，现在我要在控制台上打印一个交叉比率0.007672634441405535。我可以尝试使用此值来触发我的动画，但是该值非常难以预测，而且该元素也永远不会完全被看到，因为即使我完全可以看到该元素，该元素也永远不会得到1，的交集比率。所以我想知道错误在哪里并学会解决。我正在使用引导程序，并且删除了框架使用的脚本，这些脚本没有解决问题。

这是网站，我要说的是“与团队会面”标题下的卡片。另外，当您滚动到该部分时，我的脚本还将在卡片上打印出cards元素的交叉比例。

感谢您的帮助。 

let cards = document.querySelectorAll(".card");
let container = document.querySelector("#cards");

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log("The intersectionRatio is:  " + entry.intersectionRatio);
    if (entry.intersectionRatio > 0.40) {
      cards.forEach(card => {
        card.classList.add("animate");
      });
    }
  });
});

cards.forEach(card => {
  observer.observe(card);
});
html,
body {
  font-family: "Poppins", sans-serif;
  color: #222;
}

.site-wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
}


/*Navbar*/

#navbar .navbar-brand>img {
  height: 3rem;
}


/*End Navbar*/


/*Welcome*/

.welcome hr {
  border-top: 2px solid #b4b4b4;
  width: 95%;
}

.welcome {
  width: 65%;
  padding: 3rem;
}


/*End Welcome*/


/*Showcase Icons*/

#showcase .row {
  padding: 3rem;
}

#showcase .icon {
  padding: 2rem;
}

#showcase .icon {
  display: flex;
  justify-content: center;
}

#showcase .icon>svg {
  height: 6rem;
  width: 6rem;
}

#showcase .icon0 {
  color: #e54d26;
}

#showcase .icon1 {
  color: #563d7c;
}

#showcase .icon2 {
  color: #2163af;
}


/*End Showcase*/


/*Section 1*/

#section1 {
  padding: 4rem
}

#section1 img {
  height: 100%;
  width: 100%;
}

#section1 .btn {
  margin-bottom: 2rem;
}


/*End Section 1*/


/*Paralax*/

figure {
  height: 30rem;
  width: 100%;
}

figure .fixed-wrap {
  height: 100%;
  width: 100%;
}

#fixed {
  height: 100%;
  width: 100%;
  background-image: url(http://lorempixel.com/output/animals-q-c-640-480-4.jpg);
  background-attachment: fixed;
  background-size: cover;
}


/*End Paralax*/


/*Emoji*/

#emoji-container {
  padding: 3rem;
  overflow: hidden;
}

#emoji-container .btn {
  width: 100%;
}

#emoji img {
  width: 200px;
}

#emoji {
  overflow: hidden;
}


/*End Emoji*/


/*Section 2*/


/*TODO*/

#section2 {
  padding: 2rem;
}

#section2 hr {
  border-top: 2px solid #d5d5d5;
  width: 75%;
  padding: .8rem;
}

#section2 h1 {
  padding: 1.5rem;
}


/*End Section 2*/


/*Cards*/

#cards {
  padding: 3rem;
}


/*End Cards*/


/*Section 3*/

#section3 {
  padding: 3rem;
}

#section3 .row {
  padding: 1rem;
}


/*End Section 3*/


/*Social-media*/

#social-media {
  padding-bottom: 4rem;
  margin-bottom: 3rem;
  text-align: center;
}

#social-media h2 {
  padding: 2rem;
}

#social-media a {
  text-decoration: none;
  padding: 3rem;
}

#social-media .icon {
  height: 4.5rem;
  width: 4.5rem;
  display: inline-block;
}

#social-media .icon0 {
  color: #3b5998;
}

#social-media .icon1 {
  color: #00aced;
}

#social-media .icon2 {
  color: #dd4b39;
}

#social-media .icon3 {
  color: #517fa4;
}

#social-media .icon4 {
  color: #bb0000;
}

#social-media .icon0:hover,
#social-media .icon1:hover,
#social-media .icon2:hover,
#social-media .icon3:hover,
#social-media .icon4:hover {
  color: #d5d5d5;
}


/*End Social-media*/


/*Footer*/

footer {
  background-color: #3f3f3f;
  color: #d5d5d5;
  padding-top: 2rem;
  padding-bottom: 1rem;
}

footer a {
  color: #d5d5d5;
}

hr.light {
  border-top: 1px solid #d5d5d5;
  width: 75%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}

hr.light-100 {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}


/*End Footer*/
<!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">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="slider.css">
  <link rel="stylesheet" type="text/css" href="Showcase.css">
  <link rel="stylesheet" type="text/css" href="Jumbotron.css">
  <link rel="stylesheet" type="text/css" href="animation.css">
  <link rel="stylesheet" type="text/css" href="slider.css">

  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">

</head>

<body>
  <div class="site-wrapper">

    <!--Navbar-->
    <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light" id="navbar">
      <a href="#" class="navbar-brand">Placeholder</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse text-center" id="menu">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a href="#" class="nav-link">Placeholder</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Placeholder</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Placeholder</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Placeholder</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Placeholder</a></li>
        </ul>
      </div>

    </nav>
    <!--End Navbar-->

    <!--Slider-->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="http://lorempixel.com/output/nightlife-q-c-640-480-7.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="http://lorempixel.com/output/food-q-c-640-480-4.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!--End Slider-->

    <!--Jumbotron-->
    <div class="jumbotron">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
          <p class="lead">A web design agency that allows individuals and organizations to make their brand accessible via the World Wide Web.
          </p>
        </div>
        <div class="col-xs-12 col sm-12 col-md-3 col-lg-3 col-xl-2">
          <button class="btn btn-secondary">
              Learn more
        </button>
        </div>
      </div>
    </div>
    <!--End Jumbotron-->

    <!--Welcome-->
    <div class="container-fluid welcome">
      <div class="row text-center">
        <div class="col-12">
          <h1>Built with ease</h1>
        </div>
        <hr class="my-4">
        <div class="col-12">
          <p class="lead">Welcome to my Portafolio website. It is free. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eos itaque velit odit repudiandae!</p>
        </div>
      </div>
    </div>
    <!--End Welcome-->

    <!--Showcase Icons-->
    <div class="container-fluid showcase" id="showcase">
      <div class="row text-center">
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="icon icon0">
            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="html5" class="svg-inline--fa fa-html5 fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path>
            </svg>
          </div>
          <h2>HTML5</h2>
          <p>Built with the latest version of html, HTML5.</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="icon icon1">
            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="bootstrap" class="svg-inline--fa fa-bootstrap fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M292.3 311.93c0 42.41-39.72 41.43-43.92 41.43h-80.89v-81.69h80.89c42.56 0 43.92 31.9 43.92 40.26zm-50.15-73.13c.67 0 38.44 1 38.44-36.31 0-15.52-3.51-35.87-38.44-35.87h-74.66v72.18h74.66zM448 106.67v298.66A74.89 74.89 0 0 1 373.33 480H74.67A74.89 74.89 0 0 1 0 405.33V106.67A74.89 74.89 0 0 1 74.67 32h298.66A74.89 74.89 0 0 1 448 106.67zM338.05 317.86c0-21.57-6.65-58.29-49.05-67.35v-.73c22.91-9.78 37.34-28.25 37.34-55.64 0-7 2-64.78-77.6-64.78h-127v261.33c128.23 0 139.87 1.68 163.6-5.71 14.21-4.42 52.71-17.98 52.71-67.12z"></path>
              </svg>
          </div>
          <h2>BOOTSTRAP</h2>
          <p>Built with the latest version of html, HTML5.</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="icon icon2">
            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="css3" class="svg-inline--fa fa-css3 fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"></path>
                </svg>
          </div>
          <h2>CSS3</h2>
          <p>Built with the latest version of html, HTML5.</p>
        </div>
      </div>
      <hr class="my-4">
    </div>
    <!--End Showcase-->

    <!--Section 1-->
    <div class="container-fluid section1" id="section1">
      <div class="row">
        <div class="col-lg-6">
          <h2>If you built it...</h2>
          <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat excepturi quibusdam quisquam rerum dolorem nam saepe fuga iusto error nemo? </p>
          <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quia officia delectus aliquid magni assumenda dolorem eligendi, cumque reiciendis, ad incidunt ut fuga expedita commodi dolorum minima. Accusantium maxime, magni necessitatibus
            itaque esse modi corrupti, facilis commodi vero ratione illo est neque impedit. Illum, repellat. </p>
          <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolorum placeat quas vel veniam at consequatur libero pariatur? Commodi suscipit accusamus sequi animi excepturi atque esse debitis, ipsam autem in cumque maxime, nesciunt, minus
            iusto libero rerum optio eveniet quia eum ullam soluta labore fugiat consequuntur. Neque, tenetur. Excepturi perspiciatis placeat dolorum accusantium molestiae autem eaque ut, sint veniam, iusto qui tempore repellat, optio voluptatem alias
            libero eligendi facilis laudantium quam. Error omnis officiis nulla eius at fuga dolorem! Similique facere nesciunt numquam ad distinctio. </p>
          <br>
          <button class="btn btn-primary">
          Learn more
        </button>
        </div>
        <div class="col-lg-6">
          <img src="http://lorempixel.com/output/food-q-c-640-480-8.jpg" alt="" class="img-fluid">
        </div>
      </div>
    </div>
    <hr class="my-4">
    <!--End Section 1-->

    <!--Paralax-->
    <figure id="uno">
      <div class="fixed-wrap">
        <div id="fixed">
        </div>
      </div>
    </figure>
    <!--End Parallax-->

    <!--Emoji-->
    <div class="container-fluid emoji-container" id="emoji-container">
      <button class="btn btn-primary fun" data-toggle="collapse" data-target="#emoji">
    Click for fun.
  </button>
      <div class="collapse" id="emoji">
        <div class="container-fluid">
          <div class="row text-center">
            <div class="col-sm-6 col-md-3">
              <img src="http://lorempixel.com/output/people-q-c-640-480-4.jpg" alt="" class="gif">
            </div>
            <div class="col-sm-6 col-md-3">
              <img src="http://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" class="gif">
            </div>
            <div class="col-sm-6 col-md-3">
              <img src="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" alt="" class="gif">
            </div>
            <div class="col-sm-6 col-md-3">
              <img src="http://lorempixel.com/output/animals-q-c-640-480-9.jpg" alt="" class="gif">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--End Emoji-->

    <!--Section 2-->
    <div class="container-fluid section2" id="section2">
      <div class="row text-center">
        <div class="col-12">
          <h1 class="display-4">Meet the Team</h1>
        </div>
        <hr>
      </div>
    </div>
    <!--End Section 2-->

    <!--Cards-->
    <div class="container-fluid cards" id="cards">
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img src="http://lorempixel.com/output/technics-q-c-640-480-1.jpg" alt="" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">Johnn Doe1</h4>
              <p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
              <button class="btn btn-primary">See profile</button>
            </div>
          </div>

        </div>
        <div class="col-md-4">
          <div class="card">
            <img src="http://lorempixel.com/output/technics-q-c-640-480-3.jpg" alt="" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">Johnn Doe2</h4>
              <p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
              <button class="btn btn-primary">See profile</button>
            </div>
          </div>

        </div>
        <div class="col-md-4">
          <div class="card">
            <img src="http://lorempixel.com/output/fashion-q-c-640-480-7.jpg" alt="" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">Johnn Doe3</h4>
              <p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
              <button class="btn btn-primary">See profile</button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!--End Cards-->

    <!--Section 3-->
    <div class="container-fluid section3" id="section3">
      <div class="row">
        <div class="col-md-12 col-lg-6">
          <h2>Our Philosofy</h2>
          <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, eum saepe? Quisquam, dolores. Consectetur soluta ad voluptatum magnam eveniet ipsa! </p>
          <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maxime similique culpa doloremque debitis unde accusamus, dolores explicabo laboriosam ratione quos, recusandae doloribus. Voluptates non iusto modi quae quam! </p>
        </div>
        <div class="col-lg-6">
          <img src="img/05.jpg" alt="" class="img-fluid">
        </div>
      </div>
      <hr class="my-4">
    </div>
    <!--End Section 3-->

    <!--Social Media-->
    <div class="container-fluid social-media" id="social-media">
      <div class="row">
        <div class="col-12">
          <h2>Connect</h2>
        </div>
        <div class="col-12">
          <a href="#">
            <div class="icon icon0">
              <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
              </svg>
            </div>
          </a>
          <a href="#">
            <div class="icon icon1">
              <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
              </svg>
            </div>
          </a>
          <a href="#">
            <div class="icon icon2">
              <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google-plus-g" class="svg-inline--fa fa-google-plus-g fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"></path>
              </svg>
            </div>
          </a>
          <a href="#">
            <div class="icon icon3">
              <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
              </svg>
            </div>
          </a>
          <a href="#">
            <div class="icon icon4">
              <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!--End Social Media-->

    <!--Footer-->
    <footer>
      <div class="container-fluid">
        <div class="row text-center">
          <div class="col-md-4">
            <img src="img/logo.svg" alt="">
            <hr class="light">
            <p>555-555-555</p>
            <p>email@myemail.com</p>
            <p>505 Street Name</p>
            <p>City, State, 0000</p>
          </div>
          <div class="col-md-4">
            <hr class="light">
            <h5>Our hours</h5>
            <hr class="light">
            <p>Monday:9am-5pm</p>
            <p>Saturday:10am-4pm</p>
            <p>Sunday:colsed</p>
          </div>
          <div class="col-md-4">
            <hr class="light">
            <h5>Service Area</h5>
            <hr class="light">
            <p>City, State, 0000</p>
            <p>City, State, 0000</p>
            <p>City, State, 0000</p>
            <p>City, State, 0000</p>
          </div>
          <div class="col-12">
            <hr class="light-100">
            <h5>&copy; Juan Pedro Erbetta</h5>
          </div>
        </div>
      </div>
    </footer>
    <!--End Footer-->
  </div>
  <!-- /.site-wrapper -->

  <script src="animation.js"></script>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

您缺少IntersectionObserver的选项，否则您将仅使用默认值。

请参阅：https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API

因此，对于您的示例，请尝试以下操作：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log("The intersectionRatio is:  " + entry.intersectionRatio);
    if (entry.intersectionRatio > 0.40) {
      cards.forEach(card => {
        card.classList.add("animate");
      });
    }
  });
}, {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
});

希望有帮助。

相关问题
最新问题