Random load header animation

1

Hi,

I use hype animation widget to animate a the header image in a site. Originally I wanted to animate four different headers after each other. Problem is that that takes to long to build up. Especially with the google page speed restrictions. So now I want to split the animation in four separate parts (so four different OAM's?) and make them load randomly. So the next time a visitor comes to the site he/she sees a different header.

Any suggestions how I do that?

Or is there an option in hype itself to output a file that does that?

For a demo with just one header: https://www.begeesterd.nl/vloww/

Hope you can help, thanks!

2

I own the pro version, but the basic version should do just fine. It offers many triggers.

3 Likes
3

You probably do not need your images so large 22MB ??

I would reduce the size and resample.

There are many ways of doing this.

You could just make sure the images are not on preload.
Place your starter image on the scene and the other images in the resources
And run some JS similar to this on scene load

var randHeader_ = document.querySelector('.randHeader') 
    
  
      function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
    }
     
      var  randomIndex =  getRandomInt(1, 4) //  = 1-3
    	 
    	 console.log(randomIndex)
    	 
     hypeDocument.setElementProperty(randHeader_, 'background-image',  '${resourcesFolderName}/Uits_' + randomIndex + '.jpg')

The getRandomInt(1, 4) assumes I have 3 images

for example:

Uits_1.jpg
Uits_2.jpg
Uits_3.jpg

Random will repeat on a number so you may also want to add a LocalStorage to avoid this.

1 Like