Question

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

正如你所看到的，飞机和我名字的字样＆＃34; Hong＆＃34;出现在开场页面上，但是我名字的其他两部分＆＃34; Hanh Dinh＆＃34;仅在开始向下滚动时出现。此外，飞机在滚动时也会消失，并从右向左飞出。

我不希望飞机在进入网站时出现，但是当向下滚动时它会自然地向左滑动。我也想要我的全名＆＃34; Hong Hanh Dinh＆＃34;进入网站时出现 - 而不仅仅是洪部分。

我已经尝试了许多方法来修复它，但我想我错过了一些东西。

以下是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;
  }

这是＆＃34; Hong Hanh Dinh＆＃34;的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中，请告诉我。谢谢！

Answer 1

我认为你可以通过增加宽度来解决这个问题：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,
        });
    });
});

Answer 2

你的名字＆＃34; Hanh Dinh＆＃34;当它加载时确实存在，但它超出了我们的视线范围，改变这一行：

 css: {
        top: 200
    }

对于像-400这样的数字，你会看到它出现在屏幕上。（对于Hanh来说，对于Dinh，你需要更大的数字，比如-900。

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

2 个答案: