Question

这是我的第一篇文章，但我是一位长期观众。希望有人可以提供帮助 - 这个让我疯狂，我试过并试图找到答案，但无济于事。

基本上，我正在使用一些风格滚动元素更新朋友的网站。我之所以选择SuperScrollorama，因为它看起来非常棒，虽然我已经准备好接受它对我想要达到的目标完全过度杀伤。无论如何我对SuperScrollorama真的很感兴趣，所以我想我部分选择了它，所以我可以尝试使用它！

无论如何，我想要实现的想法包括：

单页网站，其中第一部分只是一个居中的，大的（650像素宽）图像，导航菜单<ul>居中并固定在包含6个<li>元素的页面顶部。

在向下滚动时，我希望图像缩小到250px宽度，并且我希望在第三个和第四个<li>之间留出250px的空间，以使缩小的图像滚动到然后保持一段时间滚动。我正在尝试通过向第三个<li>添加边距来创建空间。（我很欣赏这可能会给我带来不良的副作用，一个是它不会完全居中。这里的建议也很受欢迎！我将要描述的问题，但是，当我尝试其他基于浮动的方法时，我也遇到了这个问题并使用两个单独的div，因此margin-right本身似乎不是根本原因）

现在，我已经设法让图片缩小并将其自身附加到页面顶部而不会有太多麻烦。

我遇到的问题是保证金权利。在页面加载时，<ul>显示为居中并均匀分布，正如我所希望的那样。第三个<li>上的边距右边值为0.但是，在最小的滚动事件之后，值从0跳到89px。继续滚动按预期工作，但在向上滚动时，边距返回到89px然后停止。

这是我得到的代码：

HTML：

<body>
<nav>
        <ul>
            <li><a href="#home">HOME</a></li>
            <li><a href="#programme">PROGRAMME</a></li>
            <li id="grow_margin"><a href="#tickets">TICKETS</a></li>
            <li><a href="#menu">MENU</a></li>
            <li><a href="#venue">VENUE</a></li>
            <li><a href="#faq">FAQ</a></li>
        </ul>   

</nav>

<header id="fix-it">

    <h1><img id="scale-it" src="/images/logo.png" />TITLE</h1>

</header>

CSS：

html {
height: 100%;
width: 100%;
}

body {
    height: 100%;
    width: 100%;
}

nav {
position: fixed;
top: 0;
width: 100%;
height: 5%;
text-align: center;
}



nav ul {
list-style: none;
height: 100%;
}

nav ul li {
display: inline-block;
height: 100%;
}

nav ul li a {
color:#bbbbbb;
text-decoration: none;
margin: 8px;
}

header {
width: 100%;
position: fixed;
}

header h1 {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}

和JS：

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama({
        reverse: true
    });
        var windowHeight=window.innerHeight;
        var scrollDuration = windowHeight; 

        controller.addTween('#grow_margin', 
            TweenMax.to( $('#grow_margin'), .25, {css:{'margin-right':'250px'}, immediateRender:true}), scrollDuration);
        controller.addTween('#scale-it', 
            TweenMax.fromTo( $('#scale-it'), .25, {css:{width:'650px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{width:'250px'}, ease:Quad.easeInOut}), 
            scrollDuration);
        controller.addTween('#fix-it', 
            TweenMax.fromTo( $('#fix-it'), .25, {css:{top:'40%'}, immediateRender:true, ease:Quad.easeInOut}, {css:{top:'4'}, ease:Quad.easeInOut}), 
            scrollDuration);    
    });

</script>

任何帮助都会非常感激！这让我非常疯狂！

谢谢！

罗布

SuperScrollorama：逆转动画

0 个答案: