jQuery - 文本和图像滚动效果不起作用答案

【问题标题】：jQuery - Text and Image scrolling effects are not workingjQuery - 文本和图像滚动效果不起作用
【发布时间】：2014-08-25 15:50:09
【问题描述】：

http://honghanhdinh.com/

我目前正在开发我的网站，但在学习一些视差教程时遇到了一些麻烦。

如您所见，我的名字“Hong”的飞机和单词出现在开始页面上，但我的名字“Hanh Dinh”的其他两个部分仅在开始向下滚动时出现。此外，飞机在滚动时也会消失，并从右向左飞出。

我不希望飞机在进入网站时出现，而是在向下滚动时自然滑出到左侧。我还希望在进入网站时出现我的全名“Hong Hanh Dinh”——而不仅仅是 Hong 部分。

我已经尝试了很多方法来修复它，但我认为我遗漏了一些东西。

这是 HTML 代码的开头：

  <BODY>

  <!--Begin about info--!>

  <MAIN>

  <section id="bg" data-speed="10" data-type="background">
  <div id="plane">
  <img src="http://www.locanto.info/classifieds/images/airplane.png">
  </div>


  <div id="parallax2">
  <h2 id="center" class="parallax2">Hong</h2>
  <h2 id="left" class="parallax2">Hanh</h2>
  <h2 id="right" class="parallax2">Dinh</h2>
  </div>
  </section>

这是我的 CSS：

  #bg {
  background-color: #FFFFFF;
  background-size
  }

  #parallax2 {
  height: 800px;
  margin-bottom: 600px;
  overflow: hidden;
  padding-top: 200px;
  }

  /* Parallax Scrolling text */

  #center.parallax2 {
  font-size: 175px;
  color: #CC3333;
  opacity: 0.5;
  text-align: center;
  left: 200px;
  padding: 0;
  position: relative;
  bottom: 100px;
  }


  #left.parallax2 {
  color: #336699;
  font-size: 200px;
  text-align: left;
  left: 400px;
  opacity: 0.75;
  overflow: hidden;
  position: relative;
  }


  #right.parallax2 {
  color: #C5C3DE;
  font-size: 250px;
  text-align: right;
  opacity: 0.5;
  overflow: hidden;
  position: relative;
  width: 1200px;
  bottom: -300px;
  }

这是用于“Hong Hanh Dinh”滚动的jQuery：

  $(document).ready(function() {
  var controller = $.superscrollorama();
  controller.addTween(
    '#parallax2', 
    (new TimelineLite()).append([
    TweenMax.fromTo($('#left.parallax2'), 1, {
    css: {
        top: 200
    },
    immediateRender: true
  }, {
    css: {
        top: -900
    }
  }),
    TweenMax.fromTo($('#right.parallax2'), 1, {
    css: {
        top: 500
    },
    immediateRender: true
  }, {
    css: {
        top: -1800
    }
  })
    ]), 1000 // scroll duration of tween
  );

  });

这是飞行器的 jQuery：

  $(document).ready(function() {
  $(window).scroll(function() {
    console.log($(this).scrollTop());
  $('#plane').css({
    'width': $(this).scrollTop(),
    'height': $(this).scrollTop()
  });
  });
  });

如果我的错误是在 CSS 中还是在 jQuery 中，请告诉我。谢谢！

【问题讨论】：

标签： javascript jquery image text scroll

【解决方案1】：

我认为你可以通过添加 width: 0; 来解决这个问题。和溢出：隐藏；到你的 div#plane。否则，请按照以下步骤操作：

第 1 步：从平面 div 中删除 img 标签，不需要它。将 id 添加到 img 标签本身。

<img id="plane" src="http://www.locanto.info/classifieds/images/airplane.png">

第 2 步：

#plane{
    position: fixed;
    right: -WIDTH OF IMAGE;
}

第 3 步：

$(document).ready(function() {
    $(window).scroll(function() {
        $('#plane').css({
            'right': $(this).scrollTop() - WIDTH OF IMAGE,
        });
    });
});

【讨论】：

非常感谢！这完全解决了飞机问题！ :)

【解决方案2】：

你的名字“Hanh Dinh”在加载时确实存在，但它不在我们的视线范围内，请更改此行：

 css: {
        top: 200
    }

输入像 -400 这样的数字，您会看到它会出现在屏幕上。（对于 Hanh，对于 Dinh，您需要更大的数字，例如 -900。

【讨论】：

非常感谢！这确实有助于它在进入站点时定位在正确的位置。但是，现在还有另一个问题。整个文本“Hong Hanh Dinh”在滚动时立即向上跳跃。我试图弄清楚代码的哪一部分会影响这一点。你认为我应该尝试修改 CSS 或 jQuery 代码以防止这种打嗝吗？