代码之家 › 专栏 › 技术社区 › Paul

基于滚动位置的元素渐进变换方法

css html jquery javascript

Paul · 技术社区 · 7 年前

我尝试使用两个特定功能的航路点。

我想知道的第二件事不一定和航路点有关。我想弄清楚的是如何让代码片段中的图像逐步转换:基于滚动进程的translateX。我不知道怎么做。我在片段中加入了translate来显示动作。

基本上,如果你向下滚动,我希望图像移动到左边逐步根据多远向下滚动相比,该节/容器举行。这同样适用于向上滚动时,除了图像向右移动。

Check out this site 向下滚动到“Nike和Snapchat”部分,您将看到勒布朗的手机图像。当您逐步向上或向下滚动时,图像会相应地移动。这就是我试图复制的。

var homeMainSec = 	$('#homeMainSec');
	
homeMainSec.waypoint(function(direction) {
  if (direction === 'down') {
    $('#homeBoxGridRight img').addClass('slideLeftDisplay');
    console.log('Left Slide');
  }
}, {
  offset: '25%'
});
homeMainSec.waypoint(function(direction) {
  if (direction === 'up') {
    $('#homeBoxGridRight img').addClass('slideRightDisplay');
    console.log('Right Slide');
  }
}, {
  offset: '25%'
});

#homeMainSec {
	width: 100%;
	height: 95vh;
	position: relative;
	margin-top: 70px;
}
.homeMainBlock {
	height: 100%;
	width: 50%;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}
/*- HomeBoxGridRight Section -*/
#homeBoxGridRight img {
	display: block;
	width: 40%;
	height: auto;
	margin-left: 50%;
}
.slideLeftDisplay {
	transform: translateX(-100px);-webkit-transform: translateX(-100px);
	transition: 1s;-webkit-transition: 1s;
	opacity: 1;
}
.slideRightDisplay {
	transform: translateX(100px);-webkit-transform: translateX(100px);
	transition: 1s;-webkit-transition: 1s;
	opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<section id="homeMainSec">
  <div class="homeMainBlock" id="homeBoxGridLeft">
  </div><div class="homeMainBlock" id="homeBoxGridRight">
    <img src="https://slidesjs.com/examples/standard/img/example-slide-1.jpg" alt="Image">
  </div>
</section>
<br><br><Br><br><br><br><br><br>

勒布朗的通用电气。当您逐步向上或向下滚动时,图像会相应地移动。这就是我试图复制的。

1 回复 | 直到 7 年前

Schokokuchen Bäcker 7 年前

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // Do something with the scroll position
  document.querySelector('img').style.transform = 'translateX(' + scroll_pos + '%)';
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前