[Release] Glitch Loadingscreen FiveM

FiveM Resource Development & Modding Releases
, ,
1

This topic has been closed as the resource’s author has been caught adding malicious code to his resources.
If you’re using this resource, please remove it AS SOON AS POSSIBLE.

The Cfx.re Team.

9 Likes
2

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

1 Like
3

hi no it will be v2 i will release it soon

1 Like
4

Ahh okey thank you :slight_smile:

1 Like
5

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

1 Like
6

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:

7

is it possible to have more than 4 images?

8

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

9

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
10

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

1 Like
11

.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.

12

hi i just updated i post with the v3 video version

1 Like
13

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
}
}

14

Merci :smiley:

1 Like
15

image
image549×653 18.4 KB

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.

16

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

17

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

18

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

19

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

20

which version did you take V1 or V2 or V3?