Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Using Javascript animation as a background

Hi,
I would like to use various javascript animation as a background such as https://maroslaw.github.io/rainyday.js/demo012_3.html
Is this possible ? I have just started learning twine, css and html5

Comments

  • Yes, it is possible to add animation to a Twine Story.

    I would strongly suggest that you downloading and and install one of the versions of the SugarCube story format, it is feature rich and is the only Twine 1 story format that is still being actively developed/maintained.

    Information about Twine 1 Story Formats and how to install one.

    SugarCube 2.x website
    SugarCube 1.x[ website/url]
  • So i have downloaded and installed sugarcube and twine 1. How do i add the the background animation ?
  • The following solution has two major issues, which you will need the help of a more experienced Javascript / CSS coder than myself to solve:

    1. The background image needs to be displayed before the Rainyday code can use it, which results in the background image briefly appearing on the screen before it is moved to the background.
    This is because Rainyday needs to know the visible dimensions of the image and although there are a number of tricks around this issue (like displaying the image off-screen) web-browsers are becoming smarter about not actually rendering images that the end-user wont actually see.

    2. The solution does not work for Story HTML files that are not hosted on a web-site.
    This is due to a "Cross-Origin Resource Sharing policy" issue which the demo you linked to also suffers from if it is run as a local file.

    The solution consists of the following steps:

    1. Add a Script passage to your story via the Story > New > Script menu items, you can name it whatever you like but I named mine Scripts.

    2. Add the contents of the dist/rainyday.min.js file to the start of the Scripts passage.

    3. Add the following Javascript code to the end of the Scripts passage, it must appear after the code added in point 2.
    It adds the background image to the screen, runs RainyDay which converts the image in to a canvas element, forces the canvas to appear behind the passage's contents and then hides the original image.
    $('<img id="background" src="background.jpg" style="width: 100%; height: 100%;">')
    	.appendTo(document.body)
    	.load(function() {
    		var engine = new RainyDay({image: this});
    		engine.rain([ [0, 2, 200], [3, 3, 1] ], 100);
    		// Force the canvas created by RainyDay to appear in the background.
    		engine.canvas.style["z-index"] = -1;
    		// Hide the original background image.
    		this.style["display"] = "none";
    	}
    );
    

    4. [optional] If you also want the rainy background to appear behind the side-bar then create a Stylesheet passage via the Story > New > Stylesheet menu item and add the following CSS to it:
    #ui-bar {
    	background-color: transparent;
    }
    
Sign In or Register to comment.