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

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

javascript jquery image text scroll

Javascript jQuery-文本和图像滚动效果不起作用,javascript,jquery,image,text,scroll,Javascript,Jquery,Image,Text,Scroll,我目前正在开发我的网站，我在学习一些视差教程时遇到了一些问题正如你所看到的，飞机和我的名字“Hong”出现在首页上，但我名字“Hanh Dinh”的其他两部分只有在开始向下滚动时才会出现。此外，该平面在滚动时也会消失，并从右向左飞出我不希望飞机在进入网站时出现，但当向下滚动时，它会自然地向左滑动。我还希望我的全名“Hong Hanh Dinh”在进入网站时出现，而不仅仅是Hong部分我尝试了很多方法来修复它，但我觉得我遗漏了一些东西以下是HTML代码的开头： <BODY>

我目前正在开发我的网站，我在学习一些视差教程时遇到了一些问题

正如你所看到的，飞机和我的名字“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>

这是“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；和溢出：隐藏；去你的潜水飞机。否则，请执行以下步骤：

步骤1：从plane div中移除img标记，不需要它。将id添加到img标记本身

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

步骤3：

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

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

 css: {
        top: 200
    }

到-400这样的数字，您将看到它将出现在屏幕上。

（对于Hanh，对于Dinh，您将需要一个更大的数字，如-900。

非常感谢！这确实帮助它在进入网站时定位在正确的位置。但是，现在还有另一个问题。整个文本“Hong Hanh Dinh”在滚动时立即向上跳转。我试图找出代码的哪一部分会影响此操作。您认为呢nk我应该尝试修改CSS或jQuery代码，以防止出现这种问题？非常感谢！这完全解决了平面问题！：）

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

 css: {
        top: 200
    }