具有垂直视差效果的滑块
Slider with vertical parallax effect
我为我的客户创建了一个简单的滑块,以便能够使用 Flexslider 进行更新,并且在他们网站的其他地方有垂直滚动视差效果。现在他们想要一个带有垂直滚动视差效果的滑块...
Here's an example of the desired effect
对于我的视差效果,我使用了 Parallax.js,这在我只需要一个图像来产生效果时非常好,但现在用处不大,我需要滑块来获得它。
上面的示例使用了 Avia Slider,但视差效果似乎是由其他东西完成的(因为 Avia 没有我能看到的任何此类效果)。
如何为现有的 Flexslider 滑块(或任何其他滑块)创建简单的视差效果?看起来应该是一个简单的效果,不一定需要 jQuery 插件。
一种方法是将元素放在绝对位置。视差效果发生的有效距离必须在 overflow: hidden
范围内。这意味着,如果你想要一个完全固定的背景,这张图片的宽度必须是 width: 100vw
.
然后您所要做的就是触发一个滚动事件并使用 translateX()
或通过更改 background-image
的位置来转换您的图片,并将该值乘以实际速度。
由于滚动事件经常触发,并且浏览器不会在您每次使用 requestAnimationFrame()
.
时重新呈现
var translate = function() {
$('#object').css('transform','translateX('+($(window).scrollTop()*.4)+'px)');
}
$(window).on('scroll', function() {
window.requestAnimationFrame(translate);
});
这里有一个小原型,让你有一个更好的主意。
$(document).on('ready', function(){
var $outerWrapper = $('#outerWrapper');
var $innerWrapper = $('#innerWrapper');
var $innerWrapperWidth = $innerWrapper.outerWidth();
var $slides = $('.slide');
var slideWidth = $slides.eq(0).outerWidth();
var effective = slideWidth * 0.5;
$outerWrapper.on('scroll', function(e){
for (var i = 0; i < $slides.length; i++) {
$element = $slides.eq(i);
var s = $element.offset().left;
if (s < slideWidth && s > 0) {
var percent = s/slideWidth;
var translate = effective * percent;
if ($element.hasClass('parallax')){
$element.css('background-position', '-' + translate +'px 0');
}
}
}
});
});
.slide{
width: 298px;
height: 148px;
background-color: #dadada;
border: 1px solid #ccc;
float: left;
background-image: url('http://www.technocrazed.com/wp-content/uploads/2015/12/Landscape-wallpaper-7.jpg');
background-size: 100%;
}
.slide.parallax{
background-size: 150%;
}
#innerWrapper{
width: 1500px;
height: 150px;
}
#outerWrapper{
width: 300px;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerWrapper">
<div id="innerWrapper">
<div class="slide"></div>
<div class="slide parallax"></div>
<div class="slide"></div>
<div class="slide parallax"></div>
<div class="slide"></div>
</div>
</div>
我是这样解决的:
我将 transform: translate3d(0,0,0)
添加到滑块元素,然后在用户向下滚动时修改它(例如 transform: translate3d(0,10px,0)
)。一个简单、干净的解决方案:
$(window).scroll(function() {
if($(window).scrollTop() > 0) {
var parallaxDistance = ($(window).scrollTop()/2),
parallaxCSS = "translate3d(0, "+ parallaxDistance +"px , 0)";
$('.slides').css('transform', parallaxCSS);
} else {
$('.slides').css('transform', 'translate3d(0, 0, 0)');
}
});
我为我的客户创建了一个简单的滑块,以便能够使用 Flexslider 进行更新,并且在他们网站的其他地方有垂直滚动视差效果。现在他们想要一个带有垂直滚动视差效果的滑块...
Here's an example of the desired effect
对于我的视差效果,我使用了 Parallax.js,这在我只需要一个图像来产生效果时非常好,但现在用处不大,我需要滑块来获得它。
上面的示例使用了 Avia Slider,但视差效果似乎是由其他东西完成的(因为 Avia 没有我能看到的任何此类效果)。
如何为现有的 Flexslider 滑块(或任何其他滑块)创建简单的视差效果?看起来应该是一个简单的效果,不一定需要 jQuery 插件。
一种方法是将元素放在绝对位置。视差效果发生的有效距离必须在 overflow: hidden
范围内。这意味着,如果你想要一个完全固定的背景,这张图片的宽度必须是 width: 100vw
.
然后您所要做的就是触发一个滚动事件并使用 translateX()
或通过更改 background-image
的位置来转换您的图片,并将该值乘以实际速度。
由于滚动事件经常触发,并且浏览器不会在您每次使用 requestAnimationFrame()
.
var translate = function() {
$('#object').css('transform','translateX('+($(window).scrollTop()*.4)+'px)');
}
$(window).on('scroll', function() {
window.requestAnimationFrame(translate);
});
这里有一个小原型,让你有一个更好的主意。
$(document).on('ready', function(){
var $outerWrapper = $('#outerWrapper');
var $innerWrapper = $('#innerWrapper');
var $innerWrapperWidth = $innerWrapper.outerWidth();
var $slides = $('.slide');
var slideWidth = $slides.eq(0).outerWidth();
var effective = slideWidth * 0.5;
$outerWrapper.on('scroll', function(e){
for (var i = 0; i < $slides.length; i++) {
$element = $slides.eq(i);
var s = $element.offset().left;
if (s < slideWidth && s > 0) {
var percent = s/slideWidth;
var translate = effective * percent;
if ($element.hasClass('parallax')){
$element.css('background-position', '-' + translate +'px 0');
}
}
}
});
});
.slide{
width: 298px;
height: 148px;
background-color: #dadada;
border: 1px solid #ccc;
float: left;
background-image: url('http://www.technocrazed.com/wp-content/uploads/2015/12/Landscape-wallpaper-7.jpg');
background-size: 100%;
}
.slide.parallax{
background-size: 150%;
}
#innerWrapper{
width: 1500px;
height: 150px;
}
#outerWrapper{
width: 300px;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerWrapper">
<div id="innerWrapper">
<div class="slide"></div>
<div class="slide parallax"></div>
<div class="slide"></div>
<div class="slide parallax"></div>
<div class="slide"></div>
</div>
</div>
我是这样解决的:
我将 transform: translate3d(0,0,0)
添加到滑块元素,然后在用户向下滚动时修改它(例如 transform: translate3d(0,10px,0)
)。一个简单、干净的解决方案:
$(window).scroll(function() {
if($(window).scrollTop() > 0) {
var parallaxDistance = ($(window).scrollTop()/2),
parallaxCSS = "translate3d(0, "+ parallaxDistance +"px , 0)";
$('.slides').css('transform', parallaxCSS);
} else {
$('.slides').css('transform', 'translate3d(0, 0, 0)');
}
});