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

jQuery - Text and Image scrolling effects are not working

本文关键字：不起作用 滚动 图像 文本 jQuery      更新时间：2023-09-26

http://honghanhdinh.com/

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

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

我不希望飞机在进入网站时出现，而是在向下滚动时自然地向左滑出。我还希望我的全名"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中。谢谢！

我认为您可以通过添加宽度：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,
        });
    });
});

您的名字"Hanh Dinh"在加载时确实存在，但它超出了我们的视线范围，请更改此行：

 css: {
        top: 200
    }

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

相关文章：