Vanilla javaScript: Text Reveal Effect On Scroll
Вставка
- Опубліковано 15 кві 2023
- Hi Guys,
Back with another video where we will be creating a text reveal on scroll effect using vanilla javascript seen in many modern websites.
Many thanks for watching.
Conor - Наука та технологія
I have been looking for this all over youtube thanks for sharing!!
Another great tutorial, thanks Conor !
Thanks man for sharing your knowledge! 🚀💥
Thanks for sharing ❤
so nice
Thank you so much for this tutorial, such a great animation. But I'm having trouble because it slows my website a lot, it seems like lagging when reach the point with the animated paragraph. Do you have any suggestions to make it lighter?
EDIT: I solved the problem by splitting paragraphs by words and not by a single character. Much lighter!
To do that just change
→ let pArray = paragraph.textContent.split('');
to this
→ let pArray = paragraph.textContent.split(' ');
And I added padding-right to span style, to simulate blank spaces between words.
Hope this will be useful to someone stuck in the same situation I was.
thank you for this great work!
Can you help me, I'm having trouble changing the opacity of the text lower in the screen (top position about 50%) because it causes reading problems. (I don't know what values to change)
THANK YOU
What is your theme ? Thanks for the tuts very useful stuff as usual
Thanks! its GitHub Dark theme in VS Code..
thanks a lot man! what's that vscode theme btw?
Thanks. Its GitHub Dark theme
@@ConorBailey much appriciated, keep your awsome tuts coming 🙏
So u can now do this only using CSS.
Use animation timeline view
Nice! Will look into this!
what about mobile devices? does it work on mobile?
Hi. Yes I’ve tested this on mobile and it works great!
Can you create a tutorial on webgl image hover effects without using plugins?
is there any code link
my this code is not working
let paragraphs = [...document.querySelectorAll('p')]
let spans = [];
paragraphs.forEach(paragraph => {
let htmlString = '';
let pArray = paragraph.textContent.split('')
for(let i = 0;i 1 ? 1 : opacityValue.toFixed(3);
spans[i].style.opacity = opacityValue;
}
}
}
window.addEventListener('scroll', () => {
revealSpans();
})
revealSpans();
I can post it later. What error are you receiving? I can try to help.
@@ConorBailey Drop us the code, bro!
@@ConorBailey post it! don't be shy
@@evanmatthews4097 let paragraphs = [...document.querySelectorAll('p')];
let spans = [];
paragraphs.forEach(paragraph => {
let htmlString = '';
let pArray = paragraph.textContent.split('');
for (let i = 0; i < pArray.length; i++) {
htmlString += `${pArray[i]}`;
}
paragraph.innerHTML = htmlString;
});
spans = [...document.querySelectorAll('span')];
function revealSpans() {
for (let i = 0; i < spans.length; i++) {
if (spans[i].parentElement.getBoundingClientRect().top < window.innerHeight / 2) {
let { left, top } = spans[i].getBoundingClientRect();
top = top - (window.innerHeight * 0.2);
let opacityValue = 1 - ((top * 0.01) + (left * 0.001));
opacityValue = opacityValue < 0.1 ? 0.1 : opacityValue > 1 ? 1 : opacityValue.toFixed(3);
spans[i].style.opacity = opacityValue;
}
}
}
window.addEventListener('scroll', revealSpans);
revealSpans();