javascript - 我怎样才能在滚动上获得 "ballooning"效果？

Question

我正在尝试使用 jQuery 实现此效果:

我需要:

• 确定 .project 是否在视口(viewport)中。
• 如果不是，我需要它从 0.3 缩放到 1，并在对象进入视口(viewport) 25%(距顶部 75%)时将不透明度从 0 更改为 1。

这就是我所拥有的，但是当我滚动时，卡片似乎同时全部反转。

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop(),
      scaleVal = (1/scrollTop),
      screenBottom = $(window).scrollTop() + $(window).height(),
      offset = $('.project').offset().top;
    if(scrollTop > (scrollTop/2)){
      $(".project").css('transform', "scale("+scaleVal+")");
      $(".project").css('opacity', scaleVal);
    }
});

// var screenBottom = $(window).height();
// $(window).scroll(function{
//  screenBottom = $(window).height() + $(window).scrollTop();
//  if ( screenBottom == cardStartsHeight ) {
//    // magic on the card
//  }
// });

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800|Gentium+Book+Basic);
.project--image, .project--description {
  float: left;
}

body {
  background: #eee;
  font-family: "Open Sans", arial, sans-serif;
}

img {
  width: 100%;
  height: auto;
}

#wrapper {
  margin: 0 auto;
  max-width: 1024px;
  padding: 0 30px;
}
#wrapper::after {
  clear: both;
  content: "";
  display: table;
}

.side-bar {
  width: 20%;
  position: fixed;
  top: 30px;
}
.side-bar .logo {
  border-bottom: dashed 1px #ccc;
  padding-bottom: 20px;
}
.side-bar .logo .avatar {
  height: 90px;
  width: 90px;
  background-color: #ccc;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/243277/avatar.jpg");
  background-size: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}
.side-bar .logo .name {
  font-size: 12px;
  display: block;
  text-transform: uppercase;
}
.side-bar .logo .title {
  font-size: 16px;
}
.side-bar nav a {
  color: #4A90E2;
  margin-top: 20px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}
.side-bar nav a i {
  margin-right: 6px;
  opacity: 0.5;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
}
.side-bar nav a:hover i {
  opacity: 1;
}

main {
  width: 75%;
  box-sizing: border-box;
  margin-left: 25%;
}

.project {
  margin-top: 30px;
  box-shadow: 0 8px 20px rgba(50, 50, 50, 0.3);
  background: white;
  padding: 70px;
  border-radius: 9px;
}
.project::after {
  clear: both;
  content: "";
  display: table;
}
.project--image {
  display: inline-block;
  width: 25%;
}
.project--description {
  width: 75%;
  box-sizing: border-box;
  padding-left: 20px;
}
.project--description .title {
  font-size: 30px;
  margin-bottom: 10px;
}
.project--description .about {
  font-family: "Gentium Book Basic", serif;
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 20px;
}
.project--description .cta {
  color: #4A90E2;
  text-align: right;
  text-decoration: none;
}
.project--description .cta:after {
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  content: "→";
  margin-left: 5px;
}
.project--description .cta:hover:after {
  margin-left: 10px;
}

footer {
  margin-top: 30px;
  padding-top: 30px;
  border-top: dashed 1px #ccc;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<div id="wrapper">
  <aside class="side-bar">
    <h1 class="logo">
      <div class="avatar"></div><span class="name">Aaron Benjamin</span><span class="title">Digital UX Designer</span>
    </h1>
    <nav><a href="#" target="_blank"><i class="fa fa-dribbble"></i> Dribbble</a><a href="#" target="_blank"><i class="fa fa-twitter"></i> Twitter</a><a href="#" target="_blank"><i class="fa fa-medium"></i> Medium</a><a href="#" target="_blank"><i class="fa fa-codepen"></i> Code Pen</a></nav>
  </aside>
  <main>
    <article class="project">
      <div class="project--image"><img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt=""/></div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#" class="cta">Read more</a>
      </div>
    </article>
    <article class="project">
      <div class="project--image"><img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt=""/></div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#" class="cta">Read more</a>
      </div>
    </article>
    <article class="project">
      <div class="project--image"><img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt=""/></div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#" class="cta">Read more</a>
      </div>
    </article>
    <footer>
      <p>Hello</p>
    </footer>
  </main>
</div>

Answer 1

编辑

我想我得到了一些与您的原始帖子更一致的东西。

已知错误

1. 特别是在片段编辑器上，您会得到一些奇怪的缩放，因为从技术上讲，第一个元素与屏幕底部重叠。当我在 Codepen 上使用这段代码时，我没有遇到任何问题，因为第一个元素没有重叠，但我可以预见它会成为一个问题。也许有跳过第一个 child 的代码？

2. 我偶尔会(滚动得非常快)出现增大/缩小的行为。也许使用 Math.min或 Math.max可以提供帮助。

代码的作用

1. 查看底部位置与窗口高度的关系，如果从底部的值中删除窗口高度，则可以得出有多少重叠。
2. 然后根据窗口的高度将此值转换为分数。
3. 设置元素的初始比例。我希望有比 .each() 更快的方法但我找不到它。
4. 检查卷轴。参见第 3 点的第二句。

编码愉快!

function fractional_overlay(el) {
  var rect = el.getBoundingClientRect();
  //Bounding Client Rectangle;
  var win_height = $(window).height();
  return (rect.bottom - win_height) / win_height;

}

$(document).ready(function() {
  //Initial Set for items off screen. I could not find a faster way
  $('.project').each(function(i, el) {

    var sf = fractional_overlay(el);
    // sf = Scale Factor;

    if (sf > 0 && sf < 1) {
      $(el).css({
        'transform': 'scale(' + sf + ',' + sf + ')'
      });
    }

  });

  //On every scroll, check to see that the items are either above the viewport or inside it.
  $(document).scroll(function(e) {

    $('.project').each(function(i, el) {
      var sf = fractional_overlay(el);
      if (sf > 0 && sf < 1) {
        sf = 1 - sf;
        $(el).css({
          'transform': 'scale(' + sf + ',' + sf + ')'
        });
      }
    });

  });
});

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800|Gentium+Book+Basic);
 .project--image,
.project--description {
  float: left;
}
body {
  background: #eee;
  font-family: "Open Sans", arial, sans-serif;
}
img {
  width: 100%;
  height: auto;
}
#wrapper {
  margin: 0 auto;
  max-width: 1024px;
  padding: 0 30px;
}
#wrapper::after {
  clear: both;
  content: "";
  display: table;
}
.side-bar {
  width: 20%;
  position: fixed;
  top: 30px;
}
.side-bar .logo {
  border-bottom: dashed 1px #ccc;
  padding-bottom: 20px;
}
.side-bar .logo .avatar {
  height: 90px;
  width: 90px;
  background-color: #ccc;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/243277/avatar.jpg");
  background-size: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}
.side-bar .logo .name {
  font-size: 12px;
  display: block;
  text-transform: uppercase;
}
.side-bar .logo .title {
  font-size: 16px;
}
.side-bar nav a {
  color: #4A90E2;
  margin-top: 20px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}
.side-bar nav a i {
  margin-right: 6px;
  opacity: 0.5;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
}
.side-bar nav a:hover i {
  opacity: 1;
}
main {
  width: 75%;
  box-sizing: border-box;
  margin-left: 25%;
}
.project {
  transition: all linear 0.3s;
  margin-top: 30px;
  box-shadow: 0 8px 20px rgba(50, 50, 50, 0.3);
  background: white;
  padding: 70px;
  border-radius: 9px;
}
.project::after {
  clear: both;
  content: "";
  display: table;
}
.project--image {
  display: inline-block;
  width: 25%;
}
.project--description {
  width: 75%;
  box-sizing: border-box;
  padding-left: 20px;
}
.project--description .title {
  font-size: 30px;
  margin-bottom: 10px;
}
.project--description .about {
  font-family: "Gentium Book Basic", serif;
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 20px;
}
.project--description .cta {
  color: #4A90E2;
  text-align: right;
  text-decoration: none;
}
.project--description .cta:after {
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  content: "→";
  margin-left: 5px;
}
.project--description .cta:hover:after {
  margin-left: 10px;
}
footer {
  margin-top: 30px;
  padding-top: 30px;
  border-top: dashed 1px #ccc;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <aside class="side-bar">
    <h1 class="logo">
      <div class="avatar"></div><span class="name">Aaron Benjamin</span><span class="title">Digital UX Designer</span>
    </h1>
    <nav><a href="#" target="_blank"><i class="fa fa-dribbble"></i> Dribbble</a><a href="#" target="_blank"><i class="fa fa-twitter"></i> Twitter</a><a href="#" target="_blank"><i class="fa fa-medium"></i> Medium</a><a href="#" target="_blank"><i class="fa fa-codepen"></i> Code Pen</a>
    </nav>
  </aside>
  <main>
    <article class="project" id="first">
      <div class="project--image">
        <img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt="" />
      </div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#"
        class="cta">Read more</a>
      </div>
    </article>
    <article class="project" id="second">
      <div class="project--image">
        <img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt="" />
      </div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#"
        class="cta">Read more</a>
      </div>
    </article>
    <article class="project" id="third">
      <div class="project--image">
        <img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt="" />
      </div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#"
        class="cta">Read more</a>
      </div>
    </article>
    <footer>
      <p>Hello</p>
    </footer>
  </main>
</div>

这是一个快速的答案:

我看到的问题是，在您的滚动条上，您正在编辑每个 .project 的样式页面上的元素。我使用 $(document) 的原因滚动是因为当我用 $('.project') 尝试它时滚动什么也没发生。希望这能为您提供一个良好的起点，您可以使用它来获得您想要的精确效果。

我做了什么的列表:

1. 我找到了一种获取元素是否在视口(viewport)内的方法。我从另一个 Stack Overflow question 找到的我修改了一些默认代码(我留在那儿以防万一你可能需要它)导致离开视口(viewport)向上方向的元素也缩小。根据您的演示，我认为您不希望这样。
2. 不确定您为什么要使用窗口，老实说我只是使用了 document对象而不是 window因为这是第一个想到的。窗口可能是更好的方式，老实说我不知道​​。
3. 添加了 .scale类和一个transition在您的 CSS 中声明。
4. 注意 我在 <article> 中添加了 id标签帮助我在编辑 in_viewport_or_higher 时进行调试功能。

Javascript 代码的描述(主要针对后来找到此答案的人)

1. 如果忽略这两个函数声明，则从 $(document).ready() 开始打电话，我检查所有.project元素并添加比例类(如果它们低于底部边缘)。
2. 在文档中添加滚动事件监听器。
3. 每次滚动我们都必须遍历 .projects 中的元素收集并重新评估它们是否被展示。根据我们的发现切换等级。

你能做什么

您可以找出仍然隐藏在底部边缘下的每个元素的比率，并使用它通过 .css() 手动设置缩放变换量。调用transform样式声明，这样它就不是“全有或全无”的方法。

function in_viewport_or_higher(el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
  );
}

function in_viewport(el) {

  //special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }

  var rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
  );
}
$(document).ready(function() {
  //Initial Set for items off screen. I could not find a faster way
  $('.project').each(function(i, el) {
    $(this).toggleClass('scale', !in_viewport_or_higher(el));
  });

  //On every scroll, check to see that the items are either above the viewport or inside it.
  $(document).scroll(function(e) {

    $('.project').each(function(i, el) {
      $(this).toggleClass('scale', !in_viewport_or_higher(el));
    });

  });
});

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800|Gentium+Book+Basic);
 .project--image,
.project--description {
  float: left;
}
body {
  background: #eee;
  font-family: "Open Sans", arial, sans-serif;
}
img {
  width: 100%;
  height: auto;
}
#wrapper {
  margin: 0 auto;
  max-width: 1024px;
  padding: 0 30px;
}
#wrapper::after {
  clear: both;
  content: "";
  display: table;
}
.side-bar {
  width: 20%;
  position: fixed;
  top: 30px;
}
.side-bar .logo {
  border-bottom: dashed 1px #ccc;
  padding-bottom: 20px;
}
.side-bar .logo .avatar {
  height: 90px;
  width: 90px;
  background-color: #ccc;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/243277/avatar.jpg");
  background-size: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}
.side-bar .logo .name {
  font-size: 12px;
  display: block;
  text-transform: uppercase;
}
.side-bar .logo .title {
  font-size: 16px;
}
.side-bar nav a {
  color: #4A90E2;
  margin-top: 20px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}
.side-bar nav a i {
  margin-right: 6px;
  opacity: 0.5;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
}
.side-bar nav a:hover i {
  opacity: 1;
}
main {
  width: 75%;
  box-sizing: border-box;
  margin-left: 25%;
}
.project {
  transition: all linear 0.7s;
  margin-top: 30px;
  box-shadow: 0 8px 20px rgba(50, 50, 50, 0.3);
  background: white;
  padding: 70px;
  border-radius: 9px;
}
.project.scale {
  opacity: 0.2;
  transform: scale(0.2, 0.2);
}
.project::after {
  clear: both;
  content: "";
  display: table;
}
.project--image {
  display: inline-block;
  width: 25%;
}
.project--description {
  width: 75%;
  box-sizing: border-box;
  padding-left: 20px;
}
.project--description .title {
  font-size: 30px;
  margin-bottom: 10px;
}
.project--description .about {
  font-family: "Gentium Book Basic", serif;
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 20px;
}
.project--description .cta {
  color: #4A90E2;
  text-align: right;
  text-decoration: none;
}
.project--description .cta:after {
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  content: "→";
  margin-left: 5px;
}
.project--description .cta:hover:after {
  margin-left: 10px;
}
footer {
  margin-top: 30px;
  padding-top: 30px;
  border-top: dashed 1px #ccc;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <aside class="side-bar">
    <h1 class="logo">
      <div class="avatar"></div><span class="name">Aaron Benjamin</span><span class="title">Digital UX Designer</span>
    </h1>
    <nav><a href="#" target="_blank"><i class="fa fa-dribbble"></i> Dribbble</a><a href="#" target="_blank"><i class="fa fa-twitter"></i> Twitter</a><a href="#" target="_blank"><i class="fa fa-medium"></i> Medium</a><a href="#" target="_blank"><i class="fa fa-codepen"></i> Code Pen</a>
    </nav>
  </aside>
  <main>
    <article class="project" id="first">
      <div class="project--image">
        <img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt="" />
      </div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#"
        class="cta">Read more</a>
      </div>
    </article>
    <article class="project" id="second">
      <div class="project--image">
        <img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt="" />
      </div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#"
        class="cta">Read more</a>
      </div>
    </article>
    <article class="project" id="third">
      <div class="project--image">
        <img src="http://simonpan.com/wp-content/themes/sp_portfolio/assets/prime-music-tile-hero.jpg" alt="" />
      </div>
      <div class="project--description">
        <h2 class="title">Hello World</h2>
        <p class="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima architecto numquam eius dicta mollitia quo consequuntur ducimus eveniet eos modi voluptate quidem saepe aliquid distinctio esse temporibus delectus, repellat facere?</p><a href="#"
        class="cta">Read more</a>
      </div>
    </article>
    <footer>
      <p>Hello</p>
    </footer>
  </main>
</div>