MAJOR PROJECT: AUDIO SCROLL FADE

designicon

Now I had my parallax Javascript working I decided to begin implementing the scroll audio fade, which will make the experience a lot more immersive for the user, and bringing more life to my illustrations and the experience over all.


 

How It Works

HTML

The first step of this process is to create a folder containing all audio files, and then adding in audio within the HTML its incredibly important to add attributes such as loop and autoplay these attributes allow for the audio to play over and over again, and autoplay allows for the some to automatically play once the audio files has been reached on the page.

scrollaudio

Once this has been achieved the next step is to add ID tags to the audio files, that links directly to the javascript file.

Javascript

Once the html elements have been added, the javascript must be added to add the audio scroll fade. The ID tags are selected, next to the selected tags is the fade effect depending on the pixels scrolled.

scrollaudiojavascript.pngBy setting the digits within the selected ID tags you can set how many pixels it takes to scroll until the audio:

  • Fading Out
  • Duration Of Audio
  • Fading Out
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s