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


(bookwsm) #1

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

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.


(Jonathan Deutsch) #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


(bookwsm) #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.

Untitled

Test.hype.zip (25.2 KB)


(Jonathan Deutsch) #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).


(bookwsm) #6

00

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)


(Jonathan Deutsch) #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.