在 div 中添加向上滑动动画

Question

我正在制作一个带有一些 div 的全宽和全高网站。 我在每个 div 的底部添加了一个导航按钮。 如果用户单击该按钮，则会出现下一页/div。 但是我想添加一些向上滑动的动画，以便页面/div 带有动画。 我怎样才能做到这一点？

这是网站链接http://server2020.tk/wordpress/

你会在底部找到一个新闻按钮

Answer 1

看看 CSS 动画或 jquery 效果。

盲人是你在 jquery 中想要的。 http://jqueryui.com/effect/

Answer 2

你可以用 CSS 最有效地做到这一点。 由于您尚未提供任何代码，因此我将给出一般性答案。 搜索 CSS 过渡。 你可以找到很多关于这个主题的片段。

 var fadeOut = function() { return $('.container div').animate({ opacity: 0.25, margin: '+=250' }, 2000); }; var transitionToView = function($view) { // $.when( fadeOut ) // .pipe( $('.container div').removeClass('active') ); var $allViews = $('.view'); var $activeViews = $('.view-active'); $activeViews.removeClass('view-active').addClass('view-deactive'); //$allViews.removeClass('view-active').addClass('view-deactive'); $view.removeClass('view-deactive').addClass('view-active'); //alert('hi'); }; $('#showA').click(function() { transitionToView($('#viewA')); }); $('#showB').click(function() { transitionToView($('#viewB')); }); $('#showC').click(function() { transitionToView($('#viewC')); });

 body { color: white; } .container { /* overflow: hidden; */ position:relative; } .innerContainer{ /* width:100%; */ } @-webkit-keyframes floatOut { from { opacity: 1; -webkit-transform: translate(-200px, 0); } 50% { opacity: 0; -webkit-transform: translate(-500px, 0); } to { opacity: 0; -webkit-transform: translate(0, 0); } } .view{ position: absolute; /* float: left; */ padding:0; margin:0; opacity: 0; left:200px; width:300px; height:200px; } .view-active{ -webkit-transition: all 0.8s ease-out, opacity 0.4s ease-out; -webkit-transform: translate(-200px, 0); opacity: 1; } .view-deactive{ -webkit-animation-name: floatOut; -webkit-animation-duration: .8s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-out; /* -webkit-transition: all 0s ease-in, opacity 0s ease-out; -webkit-transform: translate(0, 0); opacity: 0; -webkit-transition-delay: 0.4s; */ */ /* -webkit-transition: all 0.8s ease-out; -webkit-transition-delay: 0.4s; */ } /* .view-exist{ -webkit-transition: all 0.4s ease-in, opacity 0.4s ease-out; -webkit-transform: translate(-500px, 0); opacity: 0; -webkit-transition-delay: 0.8s; } */ /* -webkit-transition: display 0.8s ease; -webkit-transition: opacity 0.8s ease; -webkit-transition: margin-left 0.8s ease; */ /* -webkit-transition: all 0.8s ease-in-out; -webkit-transition: background 0.8s ease; -webkit-transition-property: background; -webkit-transition: all 0.8s ease-in-out; */ /* -webkit-transition: all 0.8s ease-in-out; -webkit-transition-duration: 0.7s; -webkit-transition-timing-function: ease-in-out; */

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="showA">A</button><button id="showB">B</button><button id="showC">C</button> <div class="container"> <div class="innerContainer"> <div id="viewA" style="background-color:blue" class="view">VIEW A</div> <div id="viewB" style="background-color:red" class="view ">VIEW B</div> <div id="viewC" style="background-color:green" class="view ">VIEW C</div> </div> </div>

您必须最初隐藏该元素，然后通过更改将投射 CSS 过渡的值来显示它。

Answer 3

我不确定您真正尝试做什么，但也许您可以使用 jQuery 动画功能：

$(element).animate({scrollTop: val}, time);

这是一个简单的例子。

 $("a").click(function(e) { e.preventDefault(); var nextSection = $(this).attr("href"); $(".container").stop(true, true).animate({ scrollTop: "+=" + $(nextSection).offset().top }, 500); });

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .container { width: 100%; height: 100%; overflow: hidden; } .section { width: 100%; height: 100%; background: #efefef; position: relative; } .section:nth-child(even) { width: 100%; height: 100%; background: #434343; } .section h1 { margin: 0; padding: 5px 0; text-align: center; color: #434343; } .section:nth-child(even) h1 { color: #efefef; } .section a { display: block; position: absolute; bottom: 10px; left: 50%; width: 100px; height: 100px; margin-left: -50px; background: red; border-radius: 100%; text-align: center; line-height: 100px; text-decoration: none; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div id="section1" class="section"> <h1>Section 1</h1> <a href="#section2">Section 2</a> </div> <div id="section2" class="section"> <h1>Section 2</h1> <a href="#section3">Section 3</a> </div> <div id="section3" class="section"> <h1>Section 3</h1> <a href="#section4">Section 4</a> </div> <div id="section4" class="section"> <h1>Section 4</h1> <a href="#section1">Section 1</a> </div> </div>