自定义滚动动画 - 暂停部分和水平滚动元素
Custom scrolling animations - pausing sections and scrolling elements horizontally
有一些单页应用程序,用户可以在其中继续垂直滚动——但页面看起来暂停并水平滚动——然后清除一个部分。
- https://color-of-the-year.com/
- https://highline.huffingtonpost.com/articles/en/poor-millennials/
- https://ascc.bornfight.com/
- https://kubrick.life/clockwork11/
我不确定他们是如何做到这一点的 -- 我已经看到应用了转换样式,但不确定如果用户正常滚动则自然存在的元素会发生什么情况。
我添加了 jquery 任性函数来检测何时显示嵌套展开。
像这样:
这是 HTML 片段。幻灯片 1 是整页元素,幻灯片 5 和 6 也是。它们可以是菜单的锚点。我有兴趣在此处创建的行为 - 当用户接近嵌套单元时 - 它锁定在幻灯片 2 的顶部,然后转换幻灯片 3 和 4。
$win.on('scroll', function() {
var top = $win.scrollTop() / 3;
console.log("top", top);
$nested.css('transform', 'translate(' + -top + 'px, 0)');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">slide 1</div>
<div class="nested">
<div class="section first">slide 2</div>
<div class="section second">slide 3</div>
<div class="section third">slide 4</div>
</div>
<div class="section">slide 5</div>
<div class="section">slide 6</div>
我想出了这个解决方案,它会在幻灯片到达页面顶部时激活水平滚动粘滞。
https://jsfiddle.net/zny0c8s6/
当嵌套的幻灯片到达页面顶部时,会在嵌套中添加一个粘性 class。这固定了批处理位置并将嵌套转换为松散的旋转木马。当用户继续向下滚动时,嵌套会水平移动。清除最后一张嵌套幻灯片后,我删除了粘性 class - 并让用户出现在正常旅程中,尝试将嵌套固定为幻灯片的高度和计数。虽然需要解决反向问题 - 如果有多个嵌套。
$nested.waypoint(function(direction) {
var distance = $nested.offset().top;
var $nestedHeight = $nested.height();
var $nestedCount = $nested.find(" > .section").length;
var $nestedSectionWidth = $nested.next(".section").eq(0).width();
var clearNestedWidth = $nestedSectionWidth * $nestedCount;
var $window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
// Your div has reached the top
$nested.addClass("sticky");
var $nestedCompactWidth = $nested.width();
var $win = $(window);
$win.on('scroll', function() {
var top = $win.scrollTop() / 3;
$nested.css('transform', 'translate(' + -top + 'px, 0)');
if (top >= clearNestedWidth) {
console.log("cleared slides - now clear sticky")
$nested.removeClass("sticky");
$nested.css('height', $nestedHeight);
//set scroll to end of slide 2
}
});
} else {
//$nested.removeClass("sticky");
}
});
}, {
offset: '50%'
});
这只是为了让您了解如何实现它。你需要一个占位符容器
当您的幻灯片成为固定元素时,它会保留垂直 space。
下面的代码可以处理同一个页面中的多张幻灯片,你也可以实现
一旦你有了想法,你自己的。
$('.nested').each(function() {
let $window = $(window), $body = $('body');
let $nested = $(this), $nestedPlaceholder = $nested.parent();
let verticalScrollRange, upperMargin, lowerMargin;
$window.resize(function(){
$nested.removeClass("sticky").css({left: 0});
let placeholderHeight = $nestedPlaceholder.css({height: ''}).height();
verticalScrollRange = placeholderHeight - $window.height();
upperMargin = $nestedPlaceholder.offset().top;
lowerMargin = upperMargin + verticalScrollRange;
$nestedPlaceholder.height(placeholderHeight);
});
$window.scroll(function() {
let scrollTop = $window.scrollTop();
if (scrollTop > upperMargin && scrollTop < lowerMargin) {
$nested.addClass("sticky");
let horizontalScrollRange = $nested.width() - $body.width();
let verticalScrollPosition = scrollTop - upperMargin;
let horizontalScrollPosition = verticalScrollPosition / verticalScrollRange * horizontalScrollRange;
$nested.css({left: -horizontalScrollPosition});
} else {
$nested.removeClass("sticky");
}
});
$window.resize();
});
body {
background: linear-gradient(to bottom, #ffcb77 0%, #deaaff 100%);
}
.section {
height: 100vh;
font-size: 5em;
text-align: center;
position: relative;
border: 1px solid red;
}
.nested .section {
width: 100vw;
}
.nested-placeholder {
overflow: hidden;
}
.sticky {
position: fixed;
z-index: 1;
top: 0;
height: 100vh;
white-space: nowrap;
}
.sticky .section {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">Start scrolling down!</div>
<div class="section">slide 1</div>
<div class="nested-placeholder">
<div class="nested">
<div class="section first">slide 2</div>
<div class="section second">slide 3</div>
<div class="section third">slide 4</div>
</div>
</div>
<div class="section">slide 5</div>
<div class="section">slide 6</div>
有一些单页应用程序,用户可以在其中继续垂直滚动——但页面看起来暂停并水平滚动——然后清除一个部分。
- https://color-of-the-year.com/
- https://highline.huffingtonpost.com/articles/en/poor-millennials/
- https://ascc.bornfight.com/
- https://kubrick.life/clockwork11/
我不确定他们是如何做到这一点的 -- 我已经看到应用了转换样式,但不确定如果用户正常滚动则自然存在的元素会发生什么情况。
我添加了 jquery 任性函数来检测何时显示嵌套展开。
像这样:
这是 HTML 片段。幻灯片 1 是整页元素,幻灯片 5 和 6 也是。它们可以是菜单的锚点。我有兴趣在此处创建的行为 - 当用户接近嵌套单元时 - 它锁定在幻灯片 2 的顶部,然后转换幻灯片 3 和 4。
$win.on('scroll', function() {
var top = $win.scrollTop() / 3;
console.log("top", top);
$nested.css('transform', 'translate(' + -top + 'px, 0)');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">slide 1</div>
<div class="nested">
<div class="section first">slide 2</div>
<div class="section second">slide 3</div>
<div class="section third">slide 4</div>
</div>
<div class="section">slide 5</div>
<div class="section">slide 6</div>
我想出了这个解决方案,它会在幻灯片到达页面顶部时激活水平滚动粘滞。
https://jsfiddle.net/zny0c8s6/
当嵌套的幻灯片到达页面顶部时,会在嵌套中添加一个粘性 class。这固定了批处理位置并将嵌套转换为松散的旋转木马。当用户继续向下滚动时,嵌套会水平移动。清除最后一张嵌套幻灯片后,我删除了粘性 class - 并让用户出现在正常旅程中,尝试将嵌套固定为幻灯片的高度和计数。虽然需要解决反向问题 - 如果有多个嵌套。
$nested.waypoint(function(direction) {
var distance = $nested.offset().top;
var $nestedHeight = $nested.height();
var $nestedCount = $nested.find(" > .section").length;
var $nestedSectionWidth = $nested.next(".section").eq(0).width();
var clearNestedWidth = $nestedSectionWidth * $nestedCount;
var $window = $(window);
$window.scroll(function() {
if ($window.scrollTop() >= distance) {
// Your div has reached the top
$nested.addClass("sticky");
var $nestedCompactWidth = $nested.width();
var $win = $(window);
$win.on('scroll', function() {
var top = $win.scrollTop() / 3;
$nested.css('transform', 'translate(' + -top + 'px, 0)');
if (top >= clearNestedWidth) {
console.log("cleared slides - now clear sticky")
$nested.removeClass("sticky");
$nested.css('height', $nestedHeight);
//set scroll to end of slide 2
}
});
} else {
//$nested.removeClass("sticky");
}
});
}, {
offset: '50%'
});
这只是为了让您了解如何实现它。你需要一个占位符容器 当您的幻灯片成为固定元素时,它会保留垂直 space。
下面的代码可以处理同一个页面中的多张幻灯片,你也可以实现 一旦你有了想法,你自己的。
$('.nested').each(function() {
let $window = $(window), $body = $('body');
let $nested = $(this), $nestedPlaceholder = $nested.parent();
let verticalScrollRange, upperMargin, lowerMargin;
$window.resize(function(){
$nested.removeClass("sticky").css({left: 0});
let placeholderHeight = $nestedPlaceholder.css({height: ''}).height();
verticalScrollRange = placeholderHeight - $window.height();
upperMargin = $nestedPlaceholder.offset().top;
lowerMargin = upperMargin + verticalScrollRange;
$nestedPlaceholder.height(placeholderHeight);
});
$window.scroll(function() {
let scrollTop = $window.scrollTop();
if (scrollTop > upperMargin && scrollTop < lowerMargin) {
$nested.addClass("sticky");
let horizontalScrollRange = $nested.width() - $body.width();
let verticalScrollPosition = scrollTop - upperMargin;
let horizontalScrollPosition = verticalScrollPosition / verticalScrollRange * horizontalScrollRange;
$nested.css({left: -horizontalScrollPosition});
} else {
$nested.removeClass("sticky");
}
});
$window.resize();
});
body {
background: linear-gradient(to bottom, #ffcb77 0%, #deaaff 100%);
}
.section {
height: 100vh;
font-size: 5em;
text-align: center;
position: relative;
border: 1px solid red;
}
.nested .section {
width: 100vw;
}
.nested-placeholder {
overflow: hidden;
}
.sticky {
position: fixed;
z-index: 1;
top: 0;
height: 100vh;
white-space: nowrap;
}
.sticky .section {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">Start scrolling down!</div>
<div class="section">slide 1</div>
<div class="nested-placeholder">
<div class="nested">
<div class="section first">slide 2</div>
<div class="section second">slide 3</div>
<div class="section third">slide 4</div>
</div>
</div>
<div class="section">slide 5</div>
<div class="section">slide 6</div>