ScrollReveal（）遇到一些问题
[英]ScrollReveal() is having some problems
问题描述
so I'm trying to make a website for this local restaurant and right now I'm working on the pull out animation for the nav ul(menu). 
因此，我正在尝试为这家当地餐厅创建一个网站，现在我正在为nav ul（menu）制作出动画。 Previously, I just got done adding some scrollReveal animations to animate the navbar button and a intro message. 以前，我只是添加了一些scrollReveal动画来对导航栏按钮和介绍性信息进行动画处理。 It worked fine to... that's when I started working on the pull out menu, when I finished I noticed the scrollReveal animation for the navbars wasn't working. 效果很好……那是当我开始使用拉出菜单时，当我完成时，我注意到导航栏的scrollReveal动画不起作用。 The animation for the intro message works fine though?? 简介消息的动画效果很好，但是吗？ I pasted my code into codePen and it was working there but not here and not in my sublime editor, any ideas? 我将代码粘贴到codePen中，并且可以在其中运行，但不在此处运行，也没有在Sublime编辑器中运行，有什么想法吗？
window.sr = ScrollReveal(); sr.reveal('.b1', { duration: 2000, origin: 'top', distance: '80px' }); window.sr = ScrollReveal(); sr.reveal('.b2', { duration: 1500, origin: 'top', distance: '80px' }); window.sr = ScrollReveal(); sr.reveal('.b3', { duration: 1000, origin: 'top', distance: '80px' }); window.sr = ScrollReveal(); sr.reveal('.w1', { duration: 3000, origin: 'right', distance: '200px' }); window.sr = ScrollReveal(); sr.reveal('.w2', { duration: 3500, origin: 'right', distance: '150px' }); window.sr = ScrollReveal(); sr.reveal('.w3', { duration: 4000, origin: 'right', distance: '150px' });
html, body { margin: 0; padding: 0; } /*.side-menu { position: fixed; top: 134.5px; background-color: white; width: 299.5px; padding: 10px; transition: all 2s ease; left: -330px; } .side-menu ul { list-style-type: none; text-align: center; } .side-menu li { color: grey; font-size: 1.8rem; margin: 6px; margin-left: -35px; margin-bottom: 35px; font-family: 'Ubuntu'; } .side-menu li:hover { color: orange; cursor: pointer; }*/ .menu-bars{ position: fixed; left: 50px; top: 80px; } .b1, .b2, .b3 { width: 60px; height: 8px; background-color: red; margin:.8rem; border-radius: 5px; transition: all 2s ease; } .b1 { background-color: lightgreen; } .b2 { background-color: white; } .b3 { background-color: #ff4d4d; } /*.b1-animate { position: relative; background-color: lightgreen; left: 157px; top: 41px; border-radius: 0; width: 100px; } .b2-animate { background-color: white; position: relative; left: 35px; top: 21px; border-radius: 0; width: 122px; height: 7.5px; } .b3-animate { position: relative; background-color: #ff4d4d; right: 65px; border-radius: 0; width: 100px; }*/ .intro { background-image: url("img/mex-9.jpg"); width: 100%; height: 100vh; background-attachment: fixed; background-size: cover; margin-bottom: 0; } h1 { font-family: 'Cedarville Cursive'; position: absolute; left: 700px; top: 50px; color: white; font-size: 3rem; } h2 { text-align: center; margin-bottom: 300px; font-family: 'Cedarville Cursive'; font-size: 2.5rem; padding: 30px; } .about-us { margin-top: 0; background-color: lightgrey; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>El Metate | Mexican food</title> <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <!-- <div class="side-menu"> <ul> <li>Home</li> <li>About</li> <li>Menu</li> <li>Contact</li> <li>Location</li> <li>News</li> </ul> </div> --> <div class="menu-bars"> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> </div> </nav> <div class="intro"> <h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1> <img src="" alt=""> </div> </header> <section class="about"> <div class="about-us"> <h2>About Us</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam itaque aperiam porro temporibus saepe pariatur ad, asperiores cumque recusandae provident aliquam nulla, ex, explicabo eos suscipit culpa sapiente nesciunt quas!</p> </div> </section> <script src="https://unpkg.com/scrollreveal"></script> <script src = "script.js"></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2018-09-24 11:44:15
Remove the "transition: all 2s ease;" 删除“过渡：所有2s缓解；” from your .b1, .b2 and .b3 CSS. 从.b1，.b2和.b3 CSS中获取。 It's interfering with the scrollreveal library. 它干扰了scrollreveal库。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.