Hi Conor. I've just discovered your channel today and I'd like to let you know that I've found great contents already. All your contents are awesome. You've been added to my go to list of developers here on youtube :)
If I were making a website on WIX, is this something that could be coded in, or is this only for sites that are entirely made from scratch? Thanks, and sorry if that is a dumb question.
Hi mate. I’ve never used wix so I wouldn’t know to be honest. This should be easy to implement in any no code solution as a splash screen is a pretty popular feature used on a lot of websites. Sorry I can’t be more help.
Hey Conor thanks for the video! great content man! Could you give me an insight onhow can i add a session into my website to only display the splash screen once i get in the website? Thanks and Cheers!
I used a different color for my background in the intro and I'm curious, why does the border around the logo text slightly change color from the rest of the background?
Thank you for the tutorial. Do you have any idea how i could make this mobile responsive (because i have a little bit bigger word :) )? And i would like to add, after the the text "Logo.", a picture with the same affect as the text, and then it would scroll to the main page. Do you have any advice to share since i am a beginner in this new world of web development :). Thank you in advance, kind sir.
Hey Kristian thanks for watching. Re making the text responsive look into adding a media query to your css and adjust the font size when the screen is a certain width: @media screen and (max-width: 800){ .logo{ font-size: .8rem; } }
For the logo image you will need to do the same technique as the video but just a different time out function for the image to appear once the text has faded out
Great video. I'm having some trouble on my end and was wondering if you could post the files of this somewhere. To me my code looks the same as yours, but I could have missed something since I am a beginner in programming. Thanks!
@@ConorBailey I believe my comments are getting blocked because of them containing a link. After the domain the rest of the link is "mrjacobson/details/NWpeBQe". I appreciate you helping me with this.
Ok I figured it out. I accidently type .logo-active instead of .logo.active. I may not be the best at following tutorials but your tutorials are the best I've seen. +1 Subscriber to you my good man.
Hey there I did the whole video and coded the thing but apparently the alphabets aren't swiftly shifting,in the beginning of the splash screening, The name of my logo isn't showing in the black screen area, it's showing only in the white area, Any guess why this is happening
I know this video is from 2 years ago but i was wondering if you could remake this splash screen for react js websites. because i'm having some problems to add it on my website
Because my header when the animation starts is on top of the splash screen and i can't fix it. i want the header tho to be fixed at the top everytime for when user scroll down.
I am pulling my hair out here. I have double checked that every line of code is exactly like yours and even on the same line numbers but when I view in live server its still the same as the very first time that I looked at it. Nothing at all is updating. This is the first time I have ever tried this so maybe it is something simple, but at this point I could use a hand!
@@ConorBailey I have zero errors and when my page opens it looks exactly like when you pulled it up at first. white background with black letters in the top left corner of the screen with "logo." underneath.
@@rticul8862 I have never seen that error before. Looks like a chrome bug issue from searches. Can you pasted your html css and js code here and I can check on my side?
sir I can copy follow okay but i cant click and not working because my laptop visual studio code you send me pls because i have project my group pls i need front for style
logoSpan.forEach((span, idx)=>{ setTimeout(()=>{ span.classList.add('active'); }, (idx+1) * 400) }) This is not working and I get "logoSpan.forEach is not a function" - any suggestions?
It looks like you haven’t correctly selected the span elements. What do you get when you console log logoSpan? Probably undefined? Check your selector 👍
Hi Conor.
I've just discovered your channel today and I'd like to let you know that I've found great contents already.
All your contents are awesome.
You've been added to my go to list of developers here on youtube :)
Thanks so much mate. Just checked you channel out too! Great stuff! Keep up the good work!
Wonderful! Pure vanilla JS. No libraries. That's talent
Man your videos are from another planet. Keep uploading this content. Greetings from Argentina
Thank you for the video it was really helpful and very straightforward, keep up the good work !
thank you for the tutorial. it was extremely helpful and I was able to make my personal website cooler
If I were making a website on WIX, is this something that could be coded in, or is this only for sites that are entirely made from scratch? Thanks, and sorry if that is a dumb question.
Hi mate. I’ve never used wix so I wouldn’t know to be honest. This should be easy to implement in any no code solution as a splash screen is a pretty popular feature used on a lot of websites. Sorry I can’t be more help.
remember the old days when video intros / openers where the cool thing to have. Can you do a video or spin on whats the best way! cheers
HTML CODE
Logo.
Logo.
CSS CODE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier", monospace;
}
header{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 80px;
}
header h4{
position: absolute;
left: 10%;
bottom: 1rem;
font-size: 1.6rem;
}
/* Splash Screen */
.intro{
position: fixed;
z-index: 1;
left: 0%;
top: 0%;
width: 100%;
height: 100vh;
background-color: #2B2D42;
transition: 1s;
}
.logo-header{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: #D9DCD6;
}
.logo{
position: relative;
display: inline-block;
bottom: -20px;
opacity: 0;
}
.logo.active{
bottom: 0;
opacity: 1;
transition: ease-in-out 0.5s;
}
.logo.fade{
bottom: 0;
opacity: 0;
transition: ease-in-out 0.5s;
}
JS CODE
let intro = document.querySelector('.intro')
let logo = document.querySelector('.logo-header')
let logoSpan = document.querySelectorAll('.logo')
window.addEventListener('DOMContentLoaded',()=>{
setTimeout(()=>{
logoSpan.forEach((span,idx) => {
setTimeout(()=>{
span.classList.add('active')
}, (idx+1)*400);
});
setTimeout(()=>{
logoSpan.forEach((span,idx)=>{
setTimeout(()=>{
span.classList.remove('active');
span.classList.add('fade');
}, (idx+1)*50)
})
},2000);
setTimeout(() => {
intro.style.top= '-100vh'
},2300);
})
})
hahahahahaha you saved us a lot of time thanks so much bro!
Once again a great video, never realised this effect is this easy. Cheers 👌
Nice tutorial, you are good on explaining things.
Simple, well explained, nice looking - Perfect!
Cheers
Very easy to follow - you are a great instructor. Subbed!
Very good Sir, thanks for the video. It will help alot here!
Really helped me a lot. Thanks.
Nice one Chirag!
Hey Conor thanks for the video! great content man!
Could you give me an insight onhow can i add a session into my website to only display the splash screen once i get in the website?
Thanks and Cheers!
An absolutely amazing tutorial! +1 sub
Heyy u r just awesome
but
Could pls try re making it somehow like impossible bureau website inro
Again, a short and useful video!
Thanks nicklas! I try to keep them as short as I can haha. I’ve watched a few tutorials myself and can’t stand when people waffle on! 😂
@@ConorBailey hehe, so true :)
@@ConorBailey What is great with small "builds" is that you leave the viewer to come up with own ides. I have one that can use this on :)
My javascript is not working 🤷♂️
I take off my hat to you, Sir.
Thanks serg. Glad you found the video helpful!
I used a different color for my background in the intro and I'm curious, why does the border around the logo text slightly change color from the rest of the background?
Wow thanks for your video and for your content
Great video dude.. Thanks for helping us out...
Great video Conor, please make more of these!
Thanks Jay. Will do mate.
@@ConorBailey (URGENT)Can i plz get the source code (URGENT)
cool, thks for sharing
Hi mate, do you have the code available anywhere? Thanks for a wonderful tutorial! 👍👍
That's nice one. Can you explain me one thing? It loads anytime I'm going to home page , supposed to load once, Can't find solution for this.
Wow! Nice and easy. Big thx!
Close to 1000 man! Congrats!
Thanks dude! Just checked out your channel too! Great stuff! Subbed 👍
@@ConorBailey thanks man! I am subbed to you as well. Keep up the good work. Maybe we can do a collab at some point!
@@TheCodingOdyssey sounds like a plan mate.
@@ConorBailey do you have an email adress?
@@TheCodingOdyssey yes mate conbailey90@gmail.com
great video thanks a lot!
This animation of flash screen is happening after every button i press on my site.. is there a way to solve it?
Appreciate useful content. Thank you
Thanks pal
I copied the code exactly and it doens't transition... my background is just dark grey
You're amazing sir!
You’re a Legend
Amazing tutorial
Thank you for the tutorial. Do you have any idea how i could make this mobile responsive (because i have a little bit bigger word :) )? And i would like to add, after the the text "Logo.", a picture with the same affect as the text, and then it would scroll to the main page. Do you have any advice to share since i am a beginner in this new world of web development :).
Thank you in advance, kind sir.
Hey Kristian thanks for watching. Re making the text responsive look into adding a media query to your css and adjust the font size when the screen is a certain width:
@media screen and (max-width: 800){
.logo{
font-size: .8rem;
}
}
For the logo image you will need to do the same technique as the video but just a different time out function for the image to appear once the text has faded out
I’d be happy to look at your code if you need any assistance. Thanks again.
@@ConorBailey Thank you so much, i really needed that. Especially for making my website mobile responsive. Thumbs up for you man. You got a new sub :)
@@kristianrendic3011 awesome! Thanks mate. Glad to help!
Thank you so MUCHH
thanks man very helpful
amazing!
Great video. I'm having some trouble on my end and was wondering if you could post the files of this somewhere. To me my code looks the same as yours, but I could have missed something since I am a beginner in programming. Thanks!
Hey mate. Can you put your code on code pen and I’ll see where you’re going wrong. I don’t have this code saved on my laptop anymore unfortunately.
@@ConorBailey I believe my comments are getting blocked because of them containing a link. After the domain the rest of the link is "mrjacobson/details/NWpeBQe". I appreciate you helping me with this.
Ok I figured it out. I accidently type .logo-active instead of .logo.active. I may not be the best at following tutorials but your tutorials are the best I've seen. +1 Subscriber to you my good man.
Hey there I did the whole video and coded the thing but apparently the alphabets aren't swiftly shifting,in the beginning of the splash screening,
The name of my logo isn't showing in the black screen area, it's showing only in the white area,
Any guess why this is happening
same here bro
Very nice! Subscribed!
Great work brother ! Bro please can you tell how we can add navigation bar after animation
I realy need to know it too :/
I know this video is from 2 years ago but i was wondering if you could remake this splash screen for react js websites. because i'm having some problems to add it on my website
Because my header when the animation starts is on top of the splash screen and i can't fix it. i want the header tho to be fixed at the top everytime for when user scroll down.
you've got a subscriber bro! 👍
Legend! Thanks mate!
Any tips on how I can implement this with ReactJS?
Muito bom man! continue assim me ajudou demais +1 inscrito.
Obrigado senhor! Obrigado por assistir! 👍
How do I show the home page and the nav bar after the animation??
Please help, JavaScript not working...console message: sign_up_btn.addEventListener("click", () => {
I don´t know what I have to do.
What program are you using for your coding?
Vs code 👍
could u open the screen bothsides
I am pulling my hair out here. I have double checked that every line of code is exactly like yours and even on the same line numbers but when I view in live server its still the same as the very first time that I looked at it. Nothing at all is updating. This is the first time I have ever tried this so maybe it is something simple, but at this point I could use a hand!
Hey mate are you getting an errors in console?
@@ConorBailey I have zero errors and when my page opens it looks exactly like when you pulled it up at first. white background with black letters in the top left corner of the screen with "logo." underneath.
@@rticul8862 I have never seen that error before. Looks like a chrome bug issue from searches. Can you pasted your html css and js code here and I can check on my side?
when i added it to my website it ruined how the base website looked and made it the base color of the splash screen
sir I can copy follow okay but i cant click and not working because my laptop visual studio code you send me pls because i have project my group pls i need front for style
hey please the last part is not working for me
Thanks
It's not working for me. Could u take a look plz??
Can uh please share the source code
Hello sir i want to help fir making website
hey can you give the
scource code
where can i get source code
can i get the files?
i tried it in. html it wont work!
share the source code also conor!
add source code
He doesn`t know what means forEach, help?
its not working......my codes are as follows:
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier", monospace;
}
header{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 80px;
}
header h4{
position: absolute;
left: 10%;
bottom: 1rem;
font-size: 1.6rem;
}
/* Splash Screen */
.intro{
position: fixed;
z-index: 1;
left: 0%;
top: 0%;
width: 100%;
height: 100vh;
background-color: #161616;
transition: 1s;
}
.logo-header{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: #D9DCD6;
}
.logo{
position: relative;
display: inline-block;
bottom: -20px;
opacity: 0;
}
.logo.active{
bottom: 0;
opacity: 1;
transition: ease-in-out 0.5s;
}
.logo.fade{
bottom: 0;
opacity: 0;
transition: ease-in-out 0.5s;
}
html:
RUSTIC FOOD
Logo.
Logo.
js:
let intro = document.querySelector('.intro')
let logo = document.querySelector('.logo-header')
let logoSpan = document.querySelectorAll('.logo')
window.addEventListener('DOMContentLoaded',()=>{
setTimeout(()=>{
logoSpan.forEach((span,idx) => {
setTimeout(()=>{
span.classList.add('active')
}, (idx+1)*400);
});
setTimeout(()=>{
logoSpan.forEach((span,idx)=>{
setTimeout(()=>{
span.classList.remove('active');
span.classList.add('fade');
}, (idx+1)*50)
})
},2000);
setTimeout(() => {
intro.style.top= '-100vh'
},2300);
})
})
Your script tag in your html has a typo. You have put . It should be
Thanku
someone help me
not working
It does work. You just have an error somewhere.
Video was way too fast. Couldn't keep as a beginner. If you're new to coding, this video isn't for you.
you can slow down the playback speed of the video.
TQ mate thats very help me
logoSpan.forEach((span, idx)=>{
setTimeout(()=>{
span.classList.add('active');
}, (idx+1) * 400)
})
This is not working and I get "logoSpan.forEach is not a function" - any suggestions?
It looks like you haven’t correctly selected the span elements. What do you get when you console log logoSpan? Probably undefined? Check your selector 👍
i got the same problem, you got any solutions?
i dont even understand why the transition doesntwork, once you put transition: 1s; the bg fades in while mine doesnt do anythign
Can you post your code here. Will take a look
Can I have your contact email ? becuz im new to this html and I had some confusing question problem about the css codes
in the visual studio code
yo bro i got some problems you got discord or sum?
What’s the issue mate I can try to help here
@@ConorBailey the intro is not working. its just a black screen.
@@ConorBailey nvm got it but how can i put my logo instead of the "logo" text?
@@NoakGT use an image tag: