Jquery 整页卷轴 整页（垂直）滑块

我想创建一个完整的页面滑块（上下）。 我的意思是，您可以使用鼠标滚轮滚动，但不是滚动，而是将整个页面滑动到下一个页面div:

我提问的原因：我想了解更多关于矩阵和优化动画/过渡的知识

---

»»«

回答

所以。。。22个小时后，我学到了很多，感谢你们的一些批评意见和建议

一些stackoverflow助手，再次感谢：

无论如何。。这是我的代码：

//jQuery
$（文档）.ready（函数（）{
//---变量
var fullAnimation=false；
var currentSlide=0；
var lastSlide=$（'.page'）。长度-1；
var=”；
//---功能
功能幻灯片页面（滚动方向、当前幻灯片）{
fullAnimation=false；
如果（滚动方向=“向下”）{
$（'.current slide animating'）.toggleClass（'current-slide-animating prev slide'）；
$（'.page'）.eq（当前幻灯片-1）.addClass（'prev-slide'）；
如果（当前幻灯片！=最后一张幻灯片）{
$（'.page'）.eq（currentSlide+1）.addClass（'next-slide'）；
}
}否则{
$（'.current slide animating'）.toggleClass（'current-slide-animating next slide'）；
$（'.page'）.eq（currentSlide+1）.addClass（'next-slide'）；
如果（当前幻灯片！=0）{
$（'.page'）.eq（当前幻灯片-1）.addClass（'prev-slide'）；
}
} 
}
//---事件
$（窗口）.bind（'mousewheel'，函数（事件）{
scrollDirection=event.originalEvent.wheelDelta>0？“向上”：“向下”；
if（fullAnimation==false）{
//如果向下滚动
如果（当前幻灯片！=lastSlide&&scrollDirection==“向下”）{
fullAnimation=true；
电流滑动+=1；
$（'.current slide'）.toggleClass（'当前幻灯片当前幻灯片动画'）
$（'.next-slide'）.toggleClass（'next-slide当前幻灯片'）；
$（'.page.prev-slide'）.removeClass（'prev-slide'）；
$（'.page.next-slide'）.removeClass（'next-slide'）；
setTimeout（函数（）{
幻灯片页面（滚动方向，当前幻灯片）
}, 600);
}
//如果向上滚动
如果（currentSlide！=0&&scrollDirection==“向上”）{
fullAnimation=true；
电流滑动-=1；
$（'.current slide'）.toggleClass（'当前幻灯片当前幻灯片动画'）
$（'.prev-slide'）.toggleClass（'prev-slide当前幻灯片'）；
$（'.page.prev-slide'）.removeClass（'prev-slide'）；
$（'.page.next-slide'）.removeClass（'next-slide'）；
setTimeout（函数（）{
幻灯片页面（滚动方向，当前幻灯片）
}, 600);
}
}
});
});
/*CSS*/
@导入url(https://fonts.googleapis.com/css?family=Roboto:100，300斜体，300400400斜体，500）；
*，*：之后，*：之前{
保证金：0；
填充：0；
框大小：边框框；
单词包装：打断单词；
-webkit用户拖动：无；
-webkit点击突出显示颜色：透明；
}
html{
背景色：#FFF；
身高：100%；
宽度：100%；
字号：1.125em；
文本呈现：优化易读性；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
身体{
背景色：#333；
颜色：#333；
填充：当前颜色；
身高：100%；
宽度：100%；
最大高度：100vh；
最小宽度：16.666667em；
溢出：隐藏；
字体系列：“Helvetica Neue”，Helvetica，无衬线；
字体系列：“Roboto”，无衬线；
字体大小：正常；
字体风格：普通；
字母间距：1px；
线高：1.65em；
}
主要{
显示：表格；
宽度：100%；
垫底：33px；
填充顶部：20px；
}
.main，.page{
宽度：100%；
身高：100%；
}
梅因先生{
溢出：隐藏；
}
.第页{
位置：绝对位置；
不透明度：0；
溢出：自动；
}
.page.current-slide{
不透明度：1；
z指数：2；
-webkit转换：translateY（0）；
变换：translateY（0）；
过渡：
不透明度350ms立方贝塞尔（.4,0,2,1），
-webkit变换600ms三次贝塞尔（.4,0,2,1），
变换600ms三次贝塞尔（0.4,0.2,1）；
}
.page.current-slide-animating{
不透明度：0；
z指数：1；
-webkit变换：缩放（.9）；
变换：比例（.9）；
过渡：
不透明度350ms立方贝塞尔（.4,0,2,1）100ms，
-webkit变换500ms三次贝塞尔（.4,0,2,1），
变换500ms三次贝塞尔（0.4,0.2,1）；
}
.page.prev-slide，
.第页.下一张幻灯片{
不透明度：1；
z指数：2；
}
.page.prev-slide{
-webkit转换：translateY（-100%）；
转换：translateY（-100%）；
}
.第页.下一张幻灯片{
-webkit转换：translateY（100%）；
转化：translateY（100%）；
}
.第一页{
背景色：#4bffc5；
}
.第二页{
背景色：#a497ff；
}
.第三页{
背景色：#ff5152；
}
.第四页{
背景色：#3d98ff；
}
回答

所以。。。22个小时后，我学到了很多，感谢你们的一些批评意见和建议

一些stackoverflow助手，再次感谢：





无论如何。。这是我的代码：


//jQuery
$（文档）.ready（函数（）{
//---变量
var fullAnimation=false；
var currentSlide=0；
var lastSlide=$（'.page'）。长度-1；
var=”；
//---功能
功能幻灯片页面（滚动方向、当前幻灯片）{
fullAnimation=false；
如果（滚动方向=“向下”）{
$（'.current slide animating'）.toggleClass（'curren