Question

我希望在实际网站显示之前滚动显示一些单词（如下面的示例<h1>元素）。

<div id="main">
  <h1 id="i_1">Text 1</h1>
  <h1 id="i_2" class="hide">Text 2</h1>
  <h1 id="i_3" class="hide">Text 3</h1>
  <h1 id="i_4" class="hide">Logo</h1>
</div>

我做了JSFiddle所以你可以看到我在说什么。我的JS的主要部分是使用$(window).scroll()来更改屏幕上显示的<h1>。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll > 200) {
        i_1.removeClass('hide').addClass("show");
    }
    if (scroll > 400) {
        i_1.removeClass('show').addClass("hide");
    }
    …

首先，我不确定是否有更好的方法来做我已经做过的事情。其次，我想要＆＃34; Logo＆＃34;最后要滚动到顶部 - 它应该“转换”＃39;进入标题。

我所能找到的只是固定标题或带有全屏背景的滑块式介绍，这根本不是我想要的。

如果我能够至少获得我需要寻找的东西以达到我想要的目标，那将是很好的。我更喜欢只有CSS的解决方案，但其他任何东西都很好。

Answer 1

与您的其他JS类似，基于滚动高度进行操作，您可以执行以下操作：

    if (scroll > 1600) {
        $('#main').addClass("header");
    }
    if (scroll < 1600) {
        $('#main').removeClass("header");
    }

然后在CSS中，您只需操纵#main.header即可通过设置top和transform的新值并使用CSS transition property来改变您想要的方式这些在一定时间内逐渐变化。

#main {
    …
    top: 50%;
    transform: translateY(-50%);
    transition: top 1s linear, transform 1s linear;
}

#main.header {
  top: 0%;
  transform: translateY(0);
}

您也可以执行与h1类似的操作，例如，逐渐更改其font-size。

#main.header h1 {
  font-size: 58pt;  
}
h1 {
  transition: font-size 1s linear;
}

我已更新your fiddle以显示其实际效果。

滚动

1 个答案: