- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
嘿,这是我在工作中使用的 Scrollmagic.io 的插件。
但这很慢。如何增加持续时间我想更快地更改内容。
我查看了文档,但在文档中不是很清楚。
请帮帮我
//First the variables our app is going to use need to be declared
//References to DOM elements
var $window = $(window);
var $document = $(document);
//Only links that starts with #
var $navButtons = $("nav a").filter("[href^=#]");
var $navGoPrev = $(".go-prev");
var $navGoNext = $(".go-next");
var $slidesContainer = $(".slides-container");
var $slides = $(".slide");
var $currentSlide = $slides.first();
//Animating flag - is our app animating
var isAnimating = false;
//The height of the window
var pageHeight = $window.innerHeight();
//Key codes for up and down arrows on keyboard. We'll be using this to navigate change slides using the keyboard
var keyCodes = {
UP : 38,
DOWN: 40
}
//Going to the first slide
goToSlide($currentSlide);
/*
* Adding event listeners
* */
$window.on("resize", onResize).resize();
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
$document.on("keydown", onKeyDown);
$navButtons.on("click", onNavButtonClick);
$navGoPrev.on("click", goToPrevSlide);
$navGoNext.on("click", goToNextSlide);
/*
* Internal functions
* */
/*
* When a button is clicked - first get the button href, and then slide to the container, if there's such a container
* */
function onNavButtonClick(event)
{
//The clicked button
var $button = $(this);
//The slide the button points to
var $slide = $($button.attr("href"));
//If the slide exists, we go to it
if($slide.length)
{
goToSlide($slide);
event.preventDefault();
}
}
/*
* Getting the pressed key. Only if it's up or down arrow, we go to prev or next slide and prevent default behaviour
* This way, if there's text input, the user is still able to fill it
* */
function onKeyDown(event)
{
var PRESSED_KEY = event.keyCode;
if(PRESSED_KEY == keyCodes.UP)
{
goToPrevSlide();
event.preventDefault();
}
else if(PRESSED_KEY == keyCodes.DOWN)
{
goToNextSlide();
event.preventDefault();
}
}
/*
* When user scrolls with the mouse, we have to change slides
* */
function onMouseWheel(event)
{
//Normalize event wheel delta
var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;
//If the user scrolled up, it goes to previous slide, otherwise - to next slide
if(delta < -1)
{
goToNextSlide();
}
else if(delta > 1)
{
goToPrevSlide();
}
event.preventDefault();
}
/*
* If there's a previous slide, slide to it
* */
function goToPrevSlide()
{
if($currentSlide.prev().length)
{
goToSlide($currentSlide.prev());
}
}
/*
* If there's a next slide, slide to it
* */
function goToNextSlide()
{
if($currentSlide.next().length)
{
goToSlide($currentSlide.next());
}
}
/*
* Actual transition between slides
* */
function goToSlide($slide)
{
//If the slides are not changing and there's such a slide
if(!isAnimating && $slide.length)
{
//setting animating flag to true
isAnimating = true;
$currentSlide = $slide;
//Sliding to current slide
TweenLite.to($slidesContainer, 1, {scrollTo: {y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this});
//Animating menu items
TweenLite.to($navButtons.filter(".active"), 0.5, {className: "-=active"});
TweenLite.to($navButtons.filter("[href=#" + $currentSlide.attr("id") + "]"), 0.5, {className: "+=active"});
}
}
/*
* Once the sliding is finished, we need to restore "isAnimating" flag.
* You can also do other things in this function, such as changing page title
* */
function onSlideChangeEnd()
{
isAnimating = false;
}
/*
* When user resize it's browser we need to know the new height, so we can properly align the current slide
* */
function onResize(event)
{
//This will give us the new height of the window
var newPageHeight = $window.innerHeight();
/*
* If the new height is different from the old height ( the browser is resized vertically ), the slides are resized
* */
if(pageHeight !== newPageHeight)
{
pageHeight = newPageHeight;
//This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
TweenLite.set([$slidesContainer, $slides], {height: pageHeight + "px"});
//The current slide should be always on the top
TweenLite.set($slidesContainer, {scrollTo: {y: pageHeight * $currentSlide.index() }});
}
}
body, div, p {
margin: 0;
padding: 0;
}
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
letter-spacing: 0.0625em;
}
a {
text-decoration: none;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
nav ul {
list-style: none;
text-align: center;
margin-top: 30px;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
#back-to-tutorial {
margin-left: 100px;
}
nav a {
position: relative;
top: 0;
padding: 10px 20px;
font-weight: normal;
font-size: 20px;
text-align: center;
border-radius: 4px;
background-color: #FFFFFF;
color: #83C78E;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
nav a.active {
top: -4px;
background-color: #69C773;
color: #FFFFFF;
-webkit-box-shadow: 0 4px 0 0 #51a65f;
-moz-box-shadow: 0 4px 0 0 #51a65f;
box-shadow: 0 4px 0 0 #51a65f;
}
.slides-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10;
}
.slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide .centered {
width: 60%;
margin: 200px auto 0;
}
.slide .centered h1 {
text-align: center;
}
.slide .centered p {
text-align: center;
margin-top: 20px;
font-size: 20px;
}
#slide-1 {
background-color: #FFFFFF;
}
#slide-2 {
background-color: #45959b;
}
#slide-3 {
background-color: #778899;
}
#slide-4 {
color: #FFFFFF;
background-color: #291F37;
}
.go-prev, .go-next {
cursor: pointer;
font-weight: bold;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/ScrollToPlugin.min.js"></script>
<nav>
<ul>
<li><a href="#slide-1">Slide 1</a></li>
<li><a href="#slide-2">Slide 2</a></li>
<li><a href="#slide-3">Slide 3</a></li>
<li><a href="#slide-4">Slide 4</a></li>
</ul>
</nav>
<div class="slides-container">
<div class="slide" id="slide-1">
<div class="centered">
<h1>Fullscreen slides with GSAP</h1>
<p>Let's go to the <span class="go-next">next slide</span>.</p>
</div>
</div>
<div class="slide" id="slide-2">
<div class="centered">
<h1>It is so easy to navigate through slides</h1>
<p>You can go back to <span class="go-prev">previous slide</span> or go to the <span class="go-next">next slide</span>.</p>
</div>
</div>
<div class="slide" id="slide-3">
<div class="centered">
<h1>Use mouse wheel</h1>
<p>No, really. Try to scroll up and down with the mouse wheel to switch between slides.</p>
</div>
</div>
<div class="slide" id="slide-4">
<div class="centered">
<h1>... Or use keyboard arrows</h1>
<p>You go to previous and next slide, using up and down keyboard arrows.</p>
</div>
</div>
</div>
这是 scroll.io 文档的链接 http://scrollmagic.io/docs/ScrollMagic.Scene.html#duration
如何应用这个我有点迷茫请看
最佳答案
其实是一个TweenLite参数:https://greensock.com/tweenlite
改变
TweenLite.to($slidesContainer, 1, {scrollTo: {y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this});
到一个较低的值,例如:
TweenLite.to($slidesContainer, 0.2, {scrollTo: {y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this});
关于javascript - 如何提高scrollmagic的速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51706520/
我对 scrollmagic 很陌生,我希望在整个页面中多次使用单个类来在它进入 View 时进行动画处理。 这可能吗? see pen 欢迎任何指点。 $(function() { cont
我想做的就是在 div 第一次滚动到 View 中时向其添加一个类,然后将其保留在那里。 (所以,我不想切换它 - 只需触发一次)。我有一个基于向父 div 添加类的动画,即使我指定了一个方向,当我在
我正在使用 ScrollMagic 来获取一些滚动动画。问题是我需要使用偏移量,以便动画在滚动的某个点触发,但这完全取决于窗口高度。 所以在我提供的示例中 https://jsfiddle.net/5
我以前使用过 superscrollorama 并开始使用scrollmagic,但我无法设法让一些 div 正确地设置动画。前 2 个 div 很好,但最后两个,一旦我向下滚动,就不会动画。我还想向
我正在尝试固定 ul全尺寸屏幕上的侧边栏,然后取消该图钉并将其更改为父图 nav ul的在半尺寸屏幕上。所以基本上从一个触发器、目标和偏移开始>当屏幕尺寸改变时取消它们>(并)用新的设置固定一个新的选
我正在尝试将图片暂停一段时间。滚动一点后,图片(第 1 部分)应该淡出并显示下面的图片。再滚动一段时间后,两者都应该滚动出来。 我正在使用http://janpaepke.github.io/Scro
我想使用scrollmagic 在我的页面上添加效果。我的滚动场景已定义并且可以工作。现在我希望页面在场景未完成时停止滚动。 我尝试将场景放入带有 overflow-y:scroll; 的容器中,但这
我正在尝试使用 ScrollMagic 的这个特定动画 http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sectio
我在需要显示进度条的站点上使用 scrollMagic 库。该栏将显示用户在页面上的位置。进度条的宽度会随着用户向上或向下滚动而改变。我似乎无法让它与 scrollMagic 库一起使用。这是我在其他
我是 ScrollMagic 的新手,所以不确定我是否忽略了一些明显的东西。 我设置了一个 codepen这说明了我正在努力实现的目标,以及一个 alternative version 几乎做我想做的
我是第一次使用 ScrollMagic,据我了解如何根据起始元素和持续时间触发我的动画 是否可以设置结束触发器而不是持续时间? var smcontroller = new ScrollMagic.C
有这样的事情。 https://jsfiddle.net/j6u6wp7x/1/ var scene; var controller; $(document).ready(function() {
我正在试验视差和滚动魔法。在 scrollmagic demo 的视差示例中我正在尝试在第一个视差部分中制作动画内容。 这是 a fiddle of my experiment . 我无法让 #box
在我的网站上,ScrollMagic 场景触发器 Hook 位置存储在一个数组中 slideOffsets = []这是在使用初始化时填充的 var scene; for (var i=0; i元素滚
我正在使用 ScrollMagic 在这之后进行视差部分滚动 tutorial .我让它在视觉上工作,但现在使用鼠标滚轮或触控板时页面已停止滚动。它滚动的唯一方法是拖动右侧的滚动条。 main.c
所以我在构建垂直视差滚动网站时遇到了问题。 目前我正在使用 ScrollMagic 来创建视差部分,并且效果很好。当我尝试将内容放在上面时,问题就来了。对于我的情况,我正在使用 Bootstrap 的
我有一个Scrollmagic问题:我正在使用triggerElement,但它说它在页面顶部进入triggerElement,但triggerElement却在页面中间。这是我的 ScrollMag
我在使用 scrollmagic 时遇到问题,因为我试图在 scrollmagic 中创建自然部分删除的演示,但我遇到了上述问题。看起来我在 querySelector 中出错了,但我不知道我在这里做
我正在使用 ScrollMagic 插件,发现 here 。我在尝试跨多个屏幕尺寸固定对象时遇到问题。问题是我在引脚的“持续时间”属性中进行硬编码,但持续时间设置为像素。由于像素根据您使用的设备而不同
伙计们,我正在使用 scrollmagic 来实现其视差部分删除视差效果。我一直在完全按照发现的方式关注演示 here而且我尝试的任何事情似乎都没有用。这让我发疯我已经在这里待了几个小时了。我在这里遗
我是一名优秀的程序员,十分优秀!