滑动div查看端口与jquery滚动事件 - 不工作

我试图让英雄部分滑出视图端口时，用户滚动一次。页面的默认状态隐藏了滚动条，但是我想要在.content部分中的滚动条。滑动div查看端口与jquery滚动事件 - 不工作

我发现了一个网站，不正是我要找的http://www.ryanedy.com/

这里是我到目前为止已经试过... Code Pen Here

//1. User scrolls 
$(document).one("scroll", function() { 
    $(".website-wrapper").animate({ 
    bottom: "1000", 
    opacity: 0.25, 

    },300,function(){ 

    }); 
});

来源

2017-07-10 StinkyTofu

这是两个答案我收到的组合版本。谢谢你的帮忙。 https://codepen.io/stinkytofu3311/pen/VWqYvY – StinkyTofu

要实现该效果，网站正在将内容部分应用translate3d(0, 100%, 0)，将其转换出屏幕。

事件处理程序将变换设置为translate3d(0, 0%, 0)以将其转换回屏幕上。

要动画风格的变化转变被用于transition: all 0.7s ease;

由于内容设置为100％的高度，并且没有滚动条，它实际上是一个点击处理程序触发动画。

//1. User clicks the element 
 
$('.website-wrapper').click(function() { 
 
    $(".content-section").css("-webkit-transform","translate3d(0, 0%, 0)"); 
 
    $(".content-section").css("-ms-transform","translate3d(0, 0%, 0)"); 
 
    $(".content-section").css("transform","translate3d(0, 0%, 0)"); 
 
}); 
 
//2. Height of Hero-Section goes to 0px with a transform.

html, body { 
 
    min-height: 100%; 
 
} 
 

 
.hero-section { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color:red; 
 
} 
 
.content-section { 
 
    -webkit-transition: all 0.7s ease; 
 
    transition: all 0.7s ease; 
 

 
    -webkit-transform: translate3d(0, 100%, 0); 
 
    -ms-transform: translate3d(0, 100%, 0); 
 
    transform: translate3d(0, 100%, 0); 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color:green; 
 
}

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="website-wrapper"> 
 
    <div class="hero-section"><h1>Hero Section</h1></div> 
 
    <div class="content-section"><h1>Content Section</h1></div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-07-10 22:33:10

这实际上使很多敏感，现在看起来很简单。你知道我可以如何让滚动条只显示在.content-section内吗？ – StinkyTofu

Ope - 没关系，我想通了。 – StinkyTofu

而不是你的JavaScript试试这个，而不是

$(document).on('DOMMouseScroll mousewheel', function() { 
    $(".hero-section").slideUp(2000, function(){ 
    $("body").css('overflow','scroll'); 
    }); 
});

Try it

来源

2017-07-10 22:21:10

谢谢你的建议。我已经尝试过.hide功能。我喜欢淡入淡出效果，但我更喜欢将部分向上滑出视图然后淡入淡出或同时像我的示例一样。 – StinkyTofu

试过我更新的答案？ –

我刚看到你的更新答案。这更接近我的想法。我认为这是因为身体溢出而隐藏起来：隐藏？我将如何减缓向上滑动影响，以便您实际上可以看到它向上滑动？ – StinkyTofu

滑动div查看端口与jquery滚动事件 - 不工作

回答

相关问题