主页 / 问题 / 1110108
Accepted
word
Asked:2020-04-14 16:50:16 +0000 UTC2020-04-14 16:50:16 +0000 UTC

滚动文本动画

  • 772

css滚动时，使用-property隐藏文本transform:translateX(-100%)（您也可以使用其他方法）。
向下滚动时，文本离开，向上滚动时，文本返回是必要的。
事实证明，您需要将文本的位置绑定到滚动条。
告诉我怎么做对吗？ 

$(window).scroll(function(e){
	var offsetTop = $(window).scrollTop()
  console.log('offsetTop - '+offsetTop);
})
$('span').waypoint({
  handler: function(direction) {
    var $el = $(this.element);
    $el.addClass('visibled');
    console.log('direction '+direction);
    
  },
  offset: '90%'
})
section{
  height: 400px;
  border:1px solid;
}
span{
  transform:translateX(-100%);
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<section class="section1">section1</section>
<section class="section2"><span>section2</span></section>
<section class="section3"><span>section3</span></section>
<section class="section4"><span>section4</span></section>
<section class="section5"><span>section5</span></section>

https://jsfiddle.net/0zqmLdb1/2/

jquery

2 个回答

  1. StackOverflow 是一个巨大的独特数据库。您可以使用搜索找到很多不同的示例，或者获取类似的内容并自己修改代码。这是一个例子：

    var parallax = document.querySelector('.parallax');
window.addEventListener('scroll', () => {
  var {
    top,
    bottom
  } = parallax.getBoundingClientRect();
  var size = 0;
  if (top < 0 && bottom > window.innerHeight) size = Math.round(-top / (parallax.scrollHeight - window.innerHeight) * 100);
  if (bottom < window.innerHeight) size = 100;
  document.querySelector('span').style.left = `${size}px`;
});
    html,
body {
  margin: 0;
  padding: 0;
}

.header,
.footer {
  position: relative;
  z-index: 1;
  background-color: pink;
  height: 100vh;
}

.parallax {
  position: relative;
  z-index: 0;
  background-color: beige;
  height: 2000px;
}

span {
  text-align: left;
  font-size: 25px;
  position: fixed;
  top: 50%;
  left: 0%;
  height: 2px;
  line-height: 2px;
  margin-top: -1px;
  transform: translateX(-100%);
}
    <div class="header"></div>
<div class="parallax"><span>Parallax</span></div>
<div class="footer"></div>

    • 5
  2. Best Answer

    JSFIDDLE

    每个成功值的动画选项isIntersecting

    const targets = document.querySelectorAll('section');

const options = {
	threshold: 0.7
};

const callback = (entries, observer) => {
	entries.forEach(entry => {
		const span = entry.target.querySelector('span');
		const method = entry.isIntersecting ? 'add' : 'remove';
		span.classList[method]('focus');
	});
};

const observer = new IntersectionObserver(callback, options);

targets.forEach(target => observer.observe(target));
    * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.1);
	margin-bottom: 10%;
}
section:last-child { margin-bottom: 0; }

.text-wrapper {
	overflow: hidden;
	font-size: 24px;
	font-family: Arial;
}

.text-wrapper span {
	transition: all 1s;
	display: block;
}

.text-wrapper.visibility span { visibility: hidden; }
.text-wrapper.translateX span { transform: translateX(-100%); }
.text-wrapper.translateY span { transform: translateY(100%); }
.text-wrapper.translateX.invert span { transform: translateX(100%); }
.text-wrapper.translateY.invert span { transform: translateY(-100%); }
.text-wrapper.opacity span { opacity: 0; }

.text-wrapper.visibility span.focus { visibility: visible; }
.text-wrapper.translateX span.focus { transform: translateX(0); }
.text-wrapper.translateY span.focus { transform: translateY(0); }
.text-wrapper.opacity span.focus { opacity: 1; }
    <div class="container">
	<section>
		<div class="text-wrapper visibility">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper translateX">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper translateX invert">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper translateY invert">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper translateY">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper opacity">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
</div>

    一个方向的动画选项。

    在屏幕上显示元素后添加跟踪删除。

    const targets = document.querySelectorAll('section');

const options = {
	threshold: 0.7
};

const callback = entries => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			observer.unobserve(entry.target);
			const span = entry.target.querySelector('span');
			span.classList.add('focus');
		}
	});
};

const observer = new IntersectionObserver(callback, options);

targets.forEach(target => observer.observe(target));
    * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.1);
	margin-bottom: 10%;
}
section:last-child { margin-bottom: 0; }

.text-wrapper {
	overflow: hidden;
	font-size: 24px;
	font-family: Arial;
}

.text-wrapper span {
	transition: all 1s;
	display: block;
}

.text-wrapper.visibility span { visibility: hidden; }
.text-wrapper.translateX span { transform: translateX(-100%); }
.text-wrapper.translateY span { transform: translateY(100%); }
.text-wrapper.translateX.invert span { transform: translateX(100%); }
.text-wrapper.translateY.invert span { transform: translateY(-100%); }
.text-wrapper.opacity span { opacity: 0; }

.text-wrapper.visibility span.focus { visibility: visible; }
.text-wrapper.translateX span.focus { transform: translateX(0); }
.text-wrapper.translateY span.focus { transform: translateY(0); }
.text-wrapper.opacity span.focus { opacity: 1; }
    <div class="container">
	<section>
		<div class="text-wrapper visibility">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper translateX">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper translateX invert">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper translateY invert">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper translateY">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
	<section>
		<div class="text-wrapper opacity">
			<span>Анимация текста при скроллинге</span>
		</div>
	</section>
</div>

    • 4

相关问题