Анимация текста при скроллинге
При скроллинге текст скрыт с помощью css-свойства 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/
Ответы (2 шт):
Автор решения: Sevastopol'
→ Ссылка
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>
Автор решения: MoloF
Вариант анимации при каждом успешном значении
→ Ссылка
Вариант анимации при каждом успешном значении 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>