视差转换与两个定位点/ div之间的微妙反弹 [英] Parallax transition with subtle bounce between two anchors/divs

问题描述

我想在我的网站上只有一个链接到折叠区域的链接，我将有一个简单的联系表单;想法是让这个链接做一个很好的过渡，类似于js视差，一旦它到达下面的折叠区域它那种巧妙地'弹跳'几个像素。 （锚点之间的空间大约是800px）

I'm trying to have just one link on my website that links to the 'below-the-fold area' that I'll have a simple contact form at; the idea is to have that link do a nice transition similar to js parallax and once it reaches the below the fold area it kind of subtly 'bounces' a few pixels back up. (The space between anchors is about 800px)

我在下面的代码中的尝试，但它仍然只是作为锚点读取，没有任何转换。 （我应该加载不同的jQuery库，或者以不同的顺序加载它们吗？）

My attempts in the code below, but it's still just being read as an anchor-point without any transition. (Should I be loading a different jQuery library, or load them in a different order?)

更新尝试12-16：

头部

调用：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

关闭前标记。 （一些内联样式在关闭之前就是< / head> 如果有问题）

Just About before closing head tag. (A few inline styles are right before closing </head> if matters)

<script type="text/javascript">

    $('a').on('click', function (event) {
        event.preventDefault();//stop the browser from jumping to the anchor
        var href  = $(this).attr('href'),
            oset  = $(href).offset().top;
        $('html, body').stop().animate({
            scrollTop : oset
        }, 700, function () {
            location.hash = href;
        });
    });

    </script>

标记，CTA divs

<div id="top" class="scrollpls"><a href="#bottom"><img src="http://www.mysite.com/imgs/down_btn.png" border="0" style="float:right; margin-top:200px;"></a></div>

b

..and near bottom of doc

   <div id="bottom" class="scrollpls"><a href="#top">
<img src="http://www.mysite.com/imgs/upsubway.png" style=" float: right;
    float: right;
    margin-right: -74px;
    margin-top: 700px;
}"></a></div>

http://jsfiddle.net/Hpegt/1/

从早期问题创建的一个小提琴，关于这个函数，一个具有div高度的样式。因为声明这对于所有的div，如在小提琴将打破我的布局，我尝试了一个类

.scrollpls {
    height : 500px;
    border :0px solid #000;
}

我在这里做错了什么？有一天会得到这个，我会试图找出如何实现一个轻松与微妙的反弹后，它导航到点。

What am I doing wrong here? After I someday get this, I'll be trying to figure out how to implement an 'ease' with a subtle bounce back after it navs to the points.

感谢任何帮助

推荐答案

有大量内置，请放宽rel =nofollow>缓动效果。

There are tons of built-in easing effects if you include jQueryUI.

尝试对您的小提琴进行修改 - http://jsfiddle.net/CzQXC/

Try this modification to your fiddle - http://jsfiddle.net/CzQXC/

$('a').on('click', function (event) {
    event.preventDefault();//stop the browser from jumping to the anchor
    var href  = $(this).attr('href'),
        oset  = $(href).offset().top;
    $('html, body').stop().animate(
        {
            scrollTop : oset
        },
        1000,
        'easeInOutElastic',
        function ()
        {
            location.hash = href;
        }
    );
});

这篇关于视差转换与两个定位点/ div之间的微妙反弹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！