[Release] Glitch Loadingscreen FiveM

V1 (Background image)

Download link : Github
Presentation video : Youtube

V2 (Slideshow Image)

Download link : Github
Presentation video : Youtube

V3 (Vidéo Background)

Download link : Github
Presentation video : Youtube

V4 (Background image Logo Version)

Download link : Github
Presentation video : Youtube

V5 (Slideshow Image Logo Version)

Download link : Github
Presentation video : Youtube

V3 (Vidéo Background Logo Version)

Download link : Github
Presentation video : Youtube

6 Likes

Nice one! Can we add there more Pictures and make “Slide-Effect” to the new Picture?

1 Like

hi no it will be v2 i will release it soon

1 Like

Ahh okey thank you :slight_smile:

1 Like

hi i just updated the post you can find v2 this is the one you requested :wink:

1 Like

Really nice! Thank you so much :slight_smile: Could you explain me how i can add there more Song’s? So that you have everytime a other Song ?

EXAMPLE:
I add 6 Song’s … and the Loadingscreen plays everytime a other Song? :slight_smile:

is it possible to have more than 4 images?

hi yes it’s possible you just edited the index.html and the style.css

think ive worked it out. for anyone wondering the same go into style.css, find and copy
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url(’…/img/background-4.jpg’);
}
then just change the number to 5, animation delay to 12 and so on

not sure if required but i also changed the number in animation: imageAnimation 12s linear infinite; to the last delay i added.

then you also need to add ‘img/background-5.jpg’, and so on, to the resource lua

1 Like

Hello, can we put video instead of images ? :stuck_out_tongue: Thankssss

1 Like

.crossfade > figure:nth-child(1) {
background-image: url(’…/img/background-1.jpg’);
}
.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url(’…/img/background-2.jpg’);
}
.crossfade > figure:nth-child(3) {
animation-delay: 6s;
background-image: url(’…/img/background-3.jpg’);
}
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url(’…/img/background-4.jpg’);
}

@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
opacity: 0.5;
}
17% {
animation-timing-function: ease-out;
opacity: 0.5
}
25% {
opacity: 0
}
}

What would I change this code to so that the background image isn’t slightly dark when it’s revealed and how would I make the images stay on screen for longer.

hi i just updated i post with the v3 video version

1 Like

hi you need to adjust the time you have to modify the delay animation

.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url(’…/img/background-2.jpg’);
}

and that for all the images
and you will also have to change the percentage 25%

@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
opacity: 0.5;
}
17% {
animation-timing-function: ease-out;
opacity: 0.5
}
25% {
opacity: 0
}
}

Merci :smiley:

1 Like

After making the suggested changes the images still look dark when shown. I’m also still confused on how to make the images stay on screen for about 10 seconds. Edit : I’d also like to mention that I appreciate the help.

there are several things to adjust it takes time and can be complicated if you don’t know html and css very well

Would it be possible for you to take a quick look into the background image being dark. Thats all I need. I can try and do the rest. Whenever you have the chance

Is there a way to put a logo where the text is

turns out 7 is the max. any more and it starts wigging out. images dont fade in time and overlap each other and sometimes the whole thing lags

which version did you take V1 or V2 or V3?