Help me a little bit. Help it The Parallax, can work normally. YY

Using JavaScript with Hype
1

Help me a little bit.
Help it The Parallax, can work normally.
I do not understand the operation of it.

2
2.png1057×919 117 KB
1
1.png947×532 13.3 KB
3
3.png966×812 69.7 KB

Parallax Eror.hype.zip (64.2 KB)

2

@book.ratthanan

I am not familiar with “parallax.js” but a quick reading of the hits I received with an Internet search indicated it is a jQuery plug-in and I am not seeing jQuery installed in your Hype project.

1 Like
3

Also you are calling functions like document.getElementById in the <head> script, but the element will not exist at this point. You would need to call at a later point, like using the On Scene Load handler to Run JavaScript….

However making these two changes (the other being adding jquery), it doesn’t appear to work; as far as I can tell the parallax.js library you included is creating a <body> element for some reason and that is interfering with the page. You may want to try a different library or lazily loading.

There’s probably other solutions on the forums for what you’re trying to do; a quick search shows this one by @MarkHunte: Mouse Move Parallax

4

Now I put in Html Widget looks like it will work within the confines of the Widget, only
I wanted it to work in all areas. When moving the mouse around in my window.

45
452118×1760 525 KB

Untitled

Test.hype.zip (25.2 KB)

1 Like
5

The tips from above probably still apply; the main thing is that the script creating a body element is pretty weird; you’ll need to remove the <script> tag from the <head> for this to work right and put it at the end of the body. I’d probably just try adding it to the HTML after an export and see if that works (you’ll also need to change the ${resourcesFolderName} with the actual export folder name to reference it).

6

00

51
Screen Shot 2561-08-02 at 18.11.51.png1984×1648 1.6 MB

I would like to refer to the Group Name_123
order to give the Group Name_123 movement
, please help me to do Hype4
Sorry to waste your time.

Test.hype.zip (24.8 KB)

7

First, you cannot add the <body> code to the <head>; if you need to add something to the body you must do so after export.

I got parallax loading by adding code like this to an on scene load handler:

	var setupParallax = function () {
		var scene = document.getElementById('scene');
		var parallaxInstance = new Parallax(scene, {
		  relativeInput: true,
		  selector: ".HYPE_Element",
		});
	};
	
	if(typeof Parallax == "undefined") {
		var headElement = document.getElementsByTagName('head')[0];
		var scriptElement = document.createElement('script');
		scriptElement.type = 'text/javascript';
		scriptElement.onload = setupParallax;
		scriptElement.src = "https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js";
		headElement.appendChild(scriptElement);
	} else {
		setupParallax();
	}

But it just moved all elements to the 0,0 position and didn’t seem to work. I’m not sure that it is a compatible library with Hype elements.

(I also checked what I assume would be required Position with CSS left/top and unchecked Protect from External Styles, but neither of these helped)

You may want to either use the iframe method, or use a more Hype-native way to do the effect.