Creating A Simple Website Intro Screen (Splash Screen) Using HTML / CSS / Vanilla JavaScript
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Hi Guys,
Another quick video where I show how to build a simple website introduction splash screen using vanilla JS. As always if you have any questions then please do not hesitate to contact me.
Thanks
Conor
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 69 [ซับไทย]](http://i.ytimg.com/vi/QuodflInQT8/mqdefault.jpg)
so for those that have problems with having the splash screen removed. I gave an id of "splash" to the splash screen in the html file and replaced the splash.classList.add with - document.getElementById("splash").style.opacity = 0; . Also add an alert("asdasda"); in the function to make sure that everything works up to that point. Thank you for the tutorial
I had that problem...and i did what you said....but now the website is not clickable...do you had that same problem?
@@samirfelisberto6404 I had the same problem. I fixed it with document.getElementById("splash").style.display = 'none'; I wrote separately the same function, only change that
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
document.getElementById("splash").style.display = 'none';
}, 2000);
})
@@jordan_gon Thanks bro. God bless you
Noob here..
So what’s happening is you style the splash screen, then use the javascript to manipulate it (2 seconds of it made visible)
then go back to css to hide that screen … thank you so much. Gonna spend some time going over the function you created. This video was so helpful!!
ejactly what i was looking for
NOTE* there is a difference between 0 and 0px, i don't know how but some CSS properties like (background, transition) will simply go wrong or not work at all.
For example: in my case transition property will not define the fading duration but the animation time!
So pay attention to these little details.
Great content, thanks!
my splash screen does not disappear, what should I do?!?
thank you very much Conor! this video helps me on building my portfolio website!
Awesome Muhammad! Thanks for watching! Glad it helped mate.
No GSAP or other library! Fantastic!
Is it possible if you could maybe release the source code to the video? I'll help out a lot. Thanks. :)
+1
+2
Hello i really like your tutorial. But how do i make it so that the "welcome to my website" fades out and then my logo pops out?
And is this mobile responsive?
Thanks in advance!
Very useful tutorial, starting rock bottom, thank you
thanks a lot man :-) creating a little learning app in Cordova for my daughter and needed a little splash :-)
Awesome! Glad it helped! And good luck with the app! Post a link here when you’re done 😀
Hey Conor! everything worked well but the splash screen is not removing to the main page
Hi, Conor! Thank You for this tutorial. What about another pages of site? This intro screen will load every time other pages are loaded, right?
Dennis Dovziy Hi Dennis. Thanks for watching and for your comment. Yes the splash will load for every page as long as you include the splash screen code from this video in every html file.
Any way to display this splash only once?
Don’t see the rest of the css code, it starts at line 33, what about the rest of it ?
Yea, would really want to know how to
Great tutorial, easy to follow. Subbed
helped me a lot with my project. Thanks :)
Such a big help mate,, you're a really clear and good teacher. Keep up the good work... ps. would this work for a PWA app when checking on google lighthouse?
REMARKABLE!!! Thank you
what about a title drop down animation? could you do a video on that?
Thank you!!! Awesome explanation
Great explanation!!
Thanks for the nice tutorial. I am no CSS wizard, so I need some help. I tried your code and got exactly everything similar to yours except the text which in my case is displayed at the top of the splash screen, how do I center it vertically?
Hi Amine. Would you be able to share your css on here? I’ll take a look for you
@@ConorBailey Thank you Conor. When I wanted to share the code with you via CodePen, it worked there (codepen.io/aminemarref/pen/OJMQdKK)... In my website, I use bootstrap. Could it be doing something against the splash CSS?
@@ConorBailey .. and it's actually Bootstrap. When I removed it, I got your code working perfectly.
Awesome, thanks :D
Hi! Thanks for sharing your knowledge, very useful! subscribed :)
Awesome! Cheers Victor! Glad it helped mate!
How can we make the splash screen appear only once per session? Thanks!
How can I make this not load the animation on subsequent loadings of the page? When my users click the logo in the top left to return home, the animation plays again. Can I tell the browser not to load the script a second time?
I know I'm a bit late to this and it may have already been asked.
Thankyou for this Tutorial.
Anyway, I cannot make my "Welcome" word in the center of my page. It just appeared in the top center of my page. What should I do ?
Is there a way to make the splash screen full screen. My nav bar and footer still show and allow me to scroll.
I just followed your steps after completion it stopped on "welcome to my website"only it will not go to next conor baley page.please help me out from this situation...
venkatesh nani k hi mate. Can you comment your js code and I’ll take a look. Cheers
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentloaded',(e)>={
setTimeout(()=>{
splash.classList.add('display-none');
},2000);
})
const header = document.querySelector('.header');
window.onscroll=function(){
var top=window.scrollY;
console.log(top);
if (top >= 50){
header.classList.add('active')
}
else{
header.classList.remove('active');
}
}
venkatesh nani k hi mate. Maybe its the ‘l’ in DOMContentLoaded. Should be a capital L.
Replaced it, am not getting
Index.html line number 6 one link is there
Hi thanks for the tutorial, but please can I have the beginning of the css code? I don't have the beginning of the code so it stays on the fade-in page so I can't see the lorem ipsum page.
Hi, everything is good on my own but cant see the welcome text at all, from the beginning et to the end
Hi is there a way to make te splash appear only on the first visit?
Muito legal, gostei!
How does it work if I wanna use a picture instead of a text for app design in cases of splash screen?
just make a div and set the picture's url on it in css
Thank you very much
Glad it helped parme. Thanks for watching!
Would I be able to code this into shopify or wix?
Instead of words, may be an image ? How to do that?
Thank you!
Thanks Luca. I made an updated version of this splash screen in this video if you need further inspiration 👍
After completing code my main page doesn't show up . Screen remains on splash screen. Please help 🙏.
Can you post your code? Any errors in the console?
hello Conor, i using IPS ( invision community ). can i use this method in forum ? i must upload app.js in public_html ? andd how to add styles in temaplate ?
hi, connor i like the video but i was wondering how you would change the background to an image instead
Hey thanks for watching. Use the following css under .splash
background: url(‘link to image here’);
background-size: cover;
background-position: center;
@@ConorBailey that didnt work for some reasons
Can you paste your css here?
How can I add this to shopify?
hello i tried to set intro by ites not done that way i need scrouce code
if y dont mind can you give me a scrouce code
the flash screen isn't going.
js code:
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e)=>{
setTimeout(()=>{
splash.classList.add('display-none');
}, 2000);
})
----------------------------------------------
I even put the script file at the end (before closing the body) but it still didn't work.
Kindly revert asap.
Mr. Nobody hey js looks good. Can you post your css for ‘display-none’?
@@ConorBailey sure thing (thanks for the quick reply)
--------------------------------------------------------------
css code:
.splash{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: black;
z-index: 200;
color: lightyellow;
text-align: center;
line-height: 90vh;
font-family: helvetica;
font-weight: 80;
}
@keyframes fadeIn{
to{
opacity: 1;
}
}
.fade-in{
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
.splash.display-none{
position: fixed;
opacity: 0
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: black;
z-index: -10;
color: lightyellow;
text-align: center;
line-height: 90vh;
transition: all 0.5s;
}
--------------------------------------------------------
@@ConorBailey hey I rectified it, apparently I forgot to put a semicolon after opacity (in the css file)
Thanks for this video!
(subbed)
Mr. Nobody nice one mate. Those pesky semi colons! 😂
How could u do a video not a image or text?
Hey can you share the source code. For me it's showing error
Thank youuuu.
Thanks for watching! 😁
@@ConorBailey I have a multi screen html file I added the animations, they were working well but the links and buttons were not working. How can I fix this? Please tell.
For some reason the text in white isn't coming for here, ps i am not too good at coding '. .
---
why doesn't it go away?
But what if instead of text or photo I will add a video on splash screen, Is it okay?
yes that will work. just add a video tag or image tag to the splash screen div.
Thank youuuu😊
Can i have some more questions?😅
exactly styles.css codes
Anyone have the full source code?
Hey bro. I'm having an error in javascript. It said classList is null. How to fix it? Thank you.
Hi mate. Have you selected the element correctly. Are you using document.queryselector ?
Yes bro. I created exactly in the video. Can you explain why i am having an error? A big help for me bro.
@@jecsayno1339 sure paste your JavaScript here mate. I’ll take a look.
@@ConorBailey
JS:
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e)=>{
setTimeout(()=>{
splash.classList.add("display-none");
}, 2000);
})
HTML:
E-BRIDGE
i'm having an error bro. even though i used your code exactly
Hmm that’s really odd. Your code is working for me on code pen. Have you tried it on there?
If it doesn't work, look closely at how he linked his css and it should work.
Doesn't work. It just shows black screen
It does work. Your code just has a bug in it.