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
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
I have been looking for this all over youtube thanks for sharing!!
Thanks man for sharing your knowledge! 🚀💥
Another great tutorial, thanks Conor !
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.
Thanks for sharing ❤
Can I make it one word at a time, instead of one character at a time?
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..
so nice
where does span added in html
So u can now do this only using CSS.
Use animation timeline view
Nice! Will look into this!
thanks a lot man! what's that vscode theme btw?
Thanks. Its GitHub Dark theme
@@ConorBailey much appriciated, keep your awsome tuts coming 🙏
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();