Visual effect in vanilla javascript tutorial
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2018
- Check out my courses and become more creative!
developedbyed.com
We are going to keep this vanilla javascript tutorials going. For today we are going to explore how to do visual effects in vanilla javascript. A modern and simple way to do animations on scroll.
~-~~-~~~-~~-~
Follow my Twitter:
/ deved94
Please watch: "Should You Become A Software Engineer?"
• Video
~-~~-~~~-~~-~ - แนวปฏิบัติและการใช้ชีวิต
Feel free to ask for any kind of tutorials for the future :)
Hi Ed, can you please show us how to create scroll effects like this - www.minelli.fr/campagne.html. Thanks!
@@muralidollar123 you find many other tutorials on this scroll animation when you search for 'parallax'
Please make a tutorial for how can i give your tutorials more than 1 like
not working for me
Can we create video effects like after effects in browser
Amazing tutorial! I really wanted to add this to my portfolio page which I am building using vanilla JS so thank you so much! Out of all the tutorials this one is the simplest to follow and easiest to implement. Great work
Seriously this right here is the stuff for us new developers and those like me having issues with Javascript. Thank you for bringing some excitement to it!!!
these are awesome. perfect for bridging the gap between learning the concepts and huge projects. Keep up the good work man
This is the reason I Love your videos.. Vanilla JS 😍.. Thanks Ed for these kinda videos !!
Thanks Dev Ed, you make difficult things fun and easy. Thank You!
thanks man i really appriciate that i love the way you are explaining the stuff here man
Thanks a lot. I've been wanting to learn this effect for a while now. Thank you
Thanks man, I learn web development 1.5 mouth, and your channel best for study awesome animations, week ago I started learn JavaScript or just 'js'. And I already love this
Thanks for this! So easy to follow and was able to apply it to slide elements in from the side. Thank you!
Not sure how TH-cam knew I wanted to learn this … but I’m glad the algorithm made Ed pop up !! I’m literally gonna try this later .
great!! I was look for this effect. thanks Dev
What an extraordinary tutorial! Thank you for explaining everything so clear.
I will do my best!
Wow, you made everything plain and simple. Thanks for sharing, keep it up God Bless.
Great work around! Can’t stop watching your videos Ed. I would like to see you creating a reusable modal using vanilla JS please. Thank You
Amazing tutorial! I really wanted to add this to my portfolio page! Thank you very much :)
omg same!
thank you very much dev ed... got this now
amazing bro, I'm happy I found your channel
Way cool! Thanks for the good work, super appreciate you!
Thanks for this osm and fun tut!
Really nice tutorial, Ed! Everything really well explained. And the good part about making mistakes is that every new Dev is gonna make mistakes, it's part of the job. But the way you react to it is awesome! You're funny guy. Again, thanks for one more nice tutorial! Peace and keep up the good work! :)
Thanks for the lovely comment man!
Great video!
Wow best explanation ever... great tutorial
great tutorial !
Thank you so much. Great tutorial.
great tutorial ! keep it up!
Man some of the things you say are really hilarious
Should consider to start a one-man-show something like that
Good stuff friend. Thank you.
i really like your channel uh have all tutorials which i always want to learn ..... love ur channel
Thanks! Worked great :)
thank you!! your video is soooo useful;)
the best tutorial !
Cool.... Want some video like this.. Awesome and easy.. And with great explanation..
Feels very good when you do stuffs that are cool in vanilla JS, that way, you can do it in any machine.
#thanx_dev
You are a great person
nice short and useful tutorial, easy to follow! Thanks! P.s should be great to have documentation :D
Thanks, I've been thinking for months that I wanna add this kind of simple wow factor to my websites. One question: does this work properly if I have several intro-text class elements on the same page? Or will it animate them all when the first intro-text comes into view?
Nice video!
thanks for your time
You are an amazing teacher Ed, please complete your tutorial for React. I am an absolute beginner.
Best Teacher Ever. Thanks a Tonne :)
Aww thanks so much!
Just implementing it !
#love
the real content 👌
Love you ! :D
great video sir
Exactly what I was looking for. xD
Wow sir .. Amazing... Thank you so much...love from india... 🙋😍
You have every thing What i want to study!!!!!!
Pls upload many vedios .
Thanking You!!!!!!!!!!!!!!!!!!
9:39 the struggle! lol thanks for the tutorial!
you saved my project😂 thank you
Thanks for a great tutorial. I was looking for something like this example. I have a question. How can a make the picture to appear one time on the right and the other time on the left if for a sample I have few horizontal cards that have the text in half part and the picture in the other half?
Thank you ! ^^
Quality content tbh
Hey! Brother,
I love your videos and I have a request please make a video on
" How to use window width and height in a percentage(%) and
how to use it dynamically on scroll in any CSS animation with Vanilla Javascript ".
I don't know why, but the way you speak just help me a lot to focus
with this method could you attach another class to the elements so as to use querySelectorAll ? by this i mean if you wanted to animate the text to fade up and the image to fade down would it make sense to attach another class to the elements so they could animated seperately ? not sure if that question made sense:)
Thanks
Ed, you've been one of the bigger influences in my recent undertaking of learning JavaScript. You make it fun and light, and always give super clear explanations. Keep up the great work!
Also, I saw in this down further in the comments, so thought I'd leave thoughts here. Here are my tweaks to run on multiple elements individually, as well as re-hiding them after they leave the screen. I added the class of "hidden" to the elements I want to animate in the html (this lets me run on multiple elements via QuerySelectorAll, and define initial styles like opacity on every included element) and replace it with the "fade-in" class.
CSS:
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
}
}
.fade-in {
animation: fade-in 1000ms ease;
}
.hidden {
opacity: 0;
}
______________
JS:
const elements = document.querySelectorAll(".hidden");
const triggerMultiplier = 1.5;
const windowHeight = window.innerHeight / triggerMultiplier;
scrollAppear = () => {
elements.forEach(element => {
// get each element's distance from top of screen & computed height
let positionFromTop = element.getBoundingClientRect().top;
let elementHeight = parseInt(window.getComputedStyle(element).height);
// trigger animation on scroll down
if (positionFromTop < windowHeight) {
element.classList.replace("hidden", "fade-in");
}
// re-hide elements after leaving the screen
if (
positionFromTop > windowHeight * triggerMultiplier ||
positionFromTop < -elementHeight
) {
element.classList.replace("fade-in", "hidden");
}
});
};
// run function when scrolling
window.addEventListener("scroll", scrollAppear);
yay! thank you!
Thanks so much for sharing! I was having a hard time figuring out how to get it to apply to multiple elements.
Thank you very much. Its very understandable. I would like to ask for some help. For me its load much before I would scroll there to the element( that I want to fade in ). I changed this value: "const triggerMultiplier = 1.5; " , but its still not working, do you know why?
SERIOUSLY AMAZING!!!! I have been working on becoming an developer and have been struggling with Javascript. I finally started understanding it and able to read it but when creating I still am having trouble creating things like this!!! I was able to read the process easily and applied. My new goal is to be able to learn from this and adjust the styles as needed and apply multiple types of animations!!! Again thank you!!!!
ED just give us the link of codes in description u r not showing the html code completely
If you want to remove the class you could use
else{
introText.classList.remove('intro-appear');
}
Hi Ed, Do you know if I can do this in GSAP without the need to write vanilla JS codes?
hey, when i apply this animation the text invades my navbar, why does it happen? without animation it does not extrapolate
U r funny ! And I like the video it was help full ❤
Who's this
I knew that ED says "Hey there my gorgeous friends on the Internet" 🤨🤔🧐
Yo man..thanks a ton..
Hey, brotha I'm new to building projects in js so the code you provided for us is absolutely great but 2 things that I'm trying to find out for my situation since my functionality isn't popping up... is my layout with CSS is a little different then your as far as the design so I wanted to find out if that would affect the feature of the js and also when I make a change in my CSS and change it back the text shows the functionality but does continue to keep that feature when I scroll from the top down... is there any way you can check out my code or give me some advice on my problem?.
what if you have multiple div tags with similar class name, how to animate them individually?
Plz upload more effects like that but easy coding ...thanks
Dev Ed, esti tare. Am ras la faza cu getBendingClientRect, dar uite ca face minuni.😂
Please come back soon man. We are waiting...
"if it's not working, just refresh" - my go-to method
I just wonder how this works with multiple objects (like three or more boxes which each e.g. changes backgroundColor when inView)?
A bit confusing. You delete something in the CSS-file and say we gonna begin here. But you are on like row 40 in the document. Is there code above?
Hey, thank you for this video. How do I make this work for multiple elements?
yes it doesn't work
The event listener on scroll causes a lot of problems, I suggest using IntersectionObserver! It only gets called when it passes a certain point (in your case the innerHeight). It's really really cool!! Check it out on mozilla docs
it has no support for IE.
Hi how would I be able to change content if I was to link to it as well?
Great content. Would you be able to share your files?
Hello, Dev Ed, I'm a new js developer, I built a project from scratch and took your snippet of code on this video but currently, I'm stuck on using it for multiple div elements is there any way I can email you the snippet of code and help lead me in the right direction pls!!. I have been stuck on this problem for a few days now!.
i loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooove you
great job!
How to make this with "querySelectorAll"?
Thanks)
How i can use for multiple divs with the same class name ???
how about there's another section below same content, same class, how would you animate that. This way it won't work. anybody help
I get " Cannot read properties of null (reading 'getBoundingClientRect') " error anyone could help
wow is mezing
i get the error:
getBoundingClientRect in each: undefined is not a function
anyone know a fix?
Can you please do a quick demonstration on how to apply this effect to multiple text elements within the same page as you scroll down.
Great content as always, you have really helped me so far 👍🏼
Add to all elements the same class and define them with querySelectorAll().
@@gerwinkuijntjes4738 doesnt work
getBoundingClientRect() is not working in my system it gives error
Before we became gorgeous friends on the internet
Sorry Ed!! ,
I didn't get that why we have use (introPosition < screenPosition).
Can you help me plzz.
The intro position measures the top of intro-text style, and also we will let screen position know how big our screen is, so if the intro position is less than screen position then the class of the intro-text will be changed to be intro-appear which has opacity of 1
Someone can fix my demonstration, and sorry for my english :)
Hi i'm Ananth from india , nice to meet ,I'm a MS software engineer graduated , I have firm desire to learn programming and programming languages
android , ios , frontend , backend , data structures & algorithms ,full stack development and object oriented programming . Its my dream and wish to work as remote developer and freelancer also would like to keep learn more in software field.
Nice as always. I asked myself if I could make it reusable for more elements on page, and this is what I came up with:
function animateOnScroll(target, triggerPosition, activeClass, reversible = false){
let targetEl = document.querySelectorAll(target);
targetEl.forEach(el=>{
let targetElTop = el.getBoundingClientRect().top;
let windowHeight = window.innerHeight;
if (targetElTop = windowHeight && reversible) {
el.classList.remove(activeClass);
}
})
}
Than you call it like this:
window.addEventListenter('scroll', ()=>{
animateOnScroll('.elementClass', 0.8, 'fade-in', true)
})
reversible true means that effect can go both ways. So Dev Ed, you inspire me :D
thanks a lot, I try it and it works
Nice 🤗
BRO THANK YOU SO MUCH YOU SAVED SO MUCH OF MY TIME 😭😭😭
@@vibhorsharma6432 I am glad that you found it helpful! :)
I was looking for you bro... Thanks a lot man🫂
You really should start posting your code on github.
I’m glad I hit the like button on this video at 999 to make 1k likes. I even liked before I watch lol.
I just can't get the if statement ,any help with that my gorgeous friend on the internet 😅♥️ thankyou so much for this amaizing tutorials really appreciated 🌹🌟
Can someone tell me what the CSS looks like for the rest of the page?
What do you mean?
yes, i also had doubts regarding the same.
Baguus
감사
it's not working in document.querySelectorAll method
Please upload video about lazyload images.🙏🙏🙏
I'm a JS noob - can I ask why you didn't include the parenthesis at 11:00 when you said "not gonna invoke it here" ?
Right there I don't add the parenthesis because I am only adding the functions reference. Adding the parenthesis would invoke/run the function. So just add the reference and on scroll it will be invoked for us. Hope that it's clear enough :)
Thank you :)