[Release] Loading Screen With Background Fade

FiveM Resource Development & Modding Releases
, , , ,
1

Loading Screen With Background Fade

The code below is just used for someone to build off of, I gave an already configured version of how your background can fade into different images for you FiveM server loading screen.

btw, you are going to need to know some HTML and CSS, if you need any help just reply to the post and I could probably help set it up for you.

Preview

Things you can config:

  • Fade effects
  • Fading length
  • Images
  • Text
  • Logos
  • And way more!


Version History

V1. Fade effect and background photos
V2. Logo customization in front of background, FiveM install

Github Download


How to install

  1. Download the latest file

  2. Extract it

  3. Drag “loadscreen” into your servers resource folder

  4. Add “start loadscreen” into your servers server.cfg


    Rules

  5. NEVER EVER EVER re-upload scripts without permission.

  6. Always give credit.

My Other work

Customizable Response Commands

Customizable Map Blips

Police Training Center

FD Training Center

2 Likes
2

Moved to #development:scripts

This is a snippet as opposed to a full fledged loading screen. This does nothing in FiveM by itself.

4

Great Script

1 Like
5

Do not move a topic back when a moderator has moved it to the right category.

Thanks.

6

You said the script was not meant for FiveM so it was not a release, I made it ready FiveM which means it should be a release?

1 Like
8

Is there a way to have more than 4 images? And maybe even to randomize them?

1 Like
9

Yes. Just add a new <li> <span>Slide One</span> </li> for every photo you add, along with a new:

.slideshow li:nth-child(3) span {
  background-image: url(3.png);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}

You will also have to change some of the animation times to get them to match, but it’s not that hard.

And to make them randomized you can probably add some PHP scripting to get it to pull from a database and randomly select.

1 Like
10

I have this issue and its driving me nuts, when I add 6 or 7 pictures it won’t loop back to the first you can kinda see it but it fades away real fast then it skips to some other pics and fades faster any help or suggestions I did what you said

11

Let’s say I want to add ten pictures what would I need to do

12

You need to change these sections:

    <li> <span>Slide One</span> </li>
    <li> <span>Slide Two</span> </li>
    <li> <span>Slide Three</span> </li>
    <li> <span>Slide Four</span> </li>
  </ul>

  background-image: url(4.png);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

And if you are having issues with the fading you are going to have to switch around the keyframes.

13

Okay i have tried im at a dead end how can I randomize my pictures I have used php and can’t figure it out please help me

14

You could do something like this:


<div class="mySlides fade">
  <img src="http://i.dailymail.co.uk/i/pix/2017/03/01/14/3DD766C300000578-4271496-image-a-39_1488378897470.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://hips.hearstapps.com/roa.h-cdn.co/assets/16/30/1469467513-01-2016-aston-martin-db9-gt.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-811" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="http://www.lexus.com/byl2014/pub-share/images/series/lc.png" style="width:100%">
</div>

</div>
<br>


<script>

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 5000); // Amount of time to change each photo (set to 5 seconds)
}
</script>

PHP

$rand = rand(1,10);  // number of images 
echo ('<img src="/imgages/random/IMG_' . $rand . '.jpg" alt="Random Image number ' . $rand . '" />');
?>

This will make it so that when the page loads it will choose a random photo between 1-10.

15

If there’s a chance to keep images visible longer than 5 sec? and fade into black not white.