jquery - plugin - 点击菜单链接从一个div移动到另一个div




zepto parallax plugin (3)

嘿家伙,我想在我的网站上制作动画效果,当我们点击一​​个菜单链接(比如关于部分)时,它会以视差风格动画到该div。

所以,如果你知道任何可以帮助我的jquery插件,那么请让我知道,如果你向我展示一个例子,那会更好。

请参阅代码以获取帮助:

.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<a href="#">Home</a>
<a href="#">About</a>

<div class="Home-section">
  <h1> Hello </h1>
</div>

<div class="About-section">
  <h1>Bye</h1>
</div>

所以,根据代码我想动画到关于部分点击链接说明关于


为了更像视差效果,可以添加background-attachment: fixed;

.About-section {
  height: 300px;
  background: url('http://lorempicsum.com/futurama/627/200/3') no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

喜欢这个

注意 :我使用@sagar kodte JS代码,这对于动画很有效。


希望你想要这个。 谢谢

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $(id).offset().top - 10;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});
.Home-section {
  height:500px;
  background: deepskyblue;
  }

.About-section {
  height:300px;
  background:deeppink;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home"><h1> Hello </h1>
  </div>

<div class="About-section" id="about"><h1>Bye</h1>
  </div>


.Home-section {
  height: 500px;
  background: deepskyblue;
}
.About-section {
  height: 300px;
  background: deeppink;
}
<a href="#home">Home</a>
<a href="#about">About</a>

<div class="Home-section" id="home">
  <h1> Hello </h1>
</div>

<div class="About-section" id="about">
  <h1>Bye</h1>

尝试这个。





parallax