[英]Initial top position changes when scrolling stellar.js parallax element
I have three div elements to scroll with parallax effect relative to their parent div. 我有三个div元素,以相对于其父div的视差效果滚动。
<div class="section" id="social">
<div data-stellar-ratio="0.6" class="w-line"></div>
<div data-stellar-ratio="0.7" class="b-line"></div>
<div data-stellar-background-ratio="0.5" class="il"></div>
</div>
The .il div has a background which is scolled well in parallax. .il div的背景视差很好。 The .w-line and .b-line divs have their dashed borders which are also scrolled well in parallax.
.w线和.b线div的虚线边框也很好地以视差滚动。 BUT these two divs have initially top 500px and 400px in the css file but when i start to scroll, these initial top values change and the elements jump to another top value starting the scroll from that new top point.
但是,这两个div最初在css文件中具有最高500px和400px,但是当我开始滚动时,这些初始最高值发生了变化,并且元素从该新的最高点开始滚动,并跳转到另一个最高值。
CSS 的CSS
#social {
position: relative;
overflow: hidden;
min-height: 100vh;
background: url(../uploads/parallax.jpg) no-repeat fixed center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.il {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
z-index: 3;
width: 100%;
height: 100%;
background: url(../uploads/il.png) 0px 0px no-repeat fixed;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-ms-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
.b-line {
position: relative;
left: -50px;
top: 400px;
width: 150%;
border-bottom: 2px dashed #333333;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}
.w-line {
position: relative;
left: -50px;
top: 500px;
width: 150%;
border-bottom: 2px dashed #f0efeb;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
The jquery jQuery的
<script type="text/javascript">
$(document).ready(function() {
// run parallax
$('#social').stellar();
$.stellar({
// Set scrolling to be in either one or both directions
horizontalScrolling: false,
verticalScrolling: true,
// Set the global alignment offsets
horizontalOffset: 0,
verticalOffset: 0,
// Refreshes parallax content on window load and resize
responsive: true,
// Select which property is used to calculate scroll.
// Choose 'scroll', 'position', 'margin' or 'transform',
// or write your own 'scrollProperty' plugin.
scrollProperty: 'scroll',
// Select which property is used to position elements.
// Choose between 'position' or 'transform',
// or write your own 'positionProperty' plugin.
positionProperty: 'position',
// Enable or disable the two types of parallax
parallaxBackgrounds: true,
parallaxElements: true,
// Hide parallax elements that move outside the viewport
hideDistantElements: true,
// Customise how elements are shown and hidden
hideElement: function($elem) { $elem.hide(); },
showElement: function($elem) { $elem.show(); }
});
});
</script>
If you can tell me how to avoid jumping to another top value and start scrolling from the initial top point... 如果您能告诉我如何避免跳到另一个最高值并从初始最高点开始滚动...
First post on Stack Overflow hello! 关于Stack Overflow的第一篇文章你好!
If you get this issue try: 如果遇到此问题,请尝试:
$(window).load();
$(window).load();
上激活恒星 These have always fixed it for me 这些总是为我解决
As nobody gave me direction, i have choosen a not so nice solution, if someone has the same problem, i suggest for alternative solution wwhich is very simple : 正如没有人给我指示的那样,我选择了一个不太理想的解决方案,如果有人遇到同样的问题,我建议您选择一种非常简单的替代解决方案:
Now, nothing jumps after starting the scroll, everything starts from its initial point just like at the load... 现在,开始滚动后没有任何跳跃,一切都从其初始点开始,就像加载时一样...
HTML 的HTML
<div class="section" id="social">
<div data-stellar-background-ratio="0.6" class="w-line"></div>
<div data-stellar-background-ratio="0.7" class="b-line"></div>
<div data-stellar-background-ratio="0.5" class="il"></div>
</div>
CSS 的CSS
.il,
.b-line,
.w-line {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-ms-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
.il {
background: url(../uploads/il.png) left top no-repeat fixed;
z-index: 3;
}
.b-line {
background: url(../uploads/line-b.png) left top no-repeat fixed;
z-index: 1;
}
.w-line {
background: url(../uploads/line-w.png) left top no-repeat fixed;
z-index: 1;
}
The change of my script at the beginning : 一开始我的脚本更改:
$('#social').stellar();
$(function(){
$.stellar({
// Set scrolling to be in either one or both directions
horizontalScrolling: false,
verticalScrolling: true,
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.