Mouse Move Parallax

Here is the file I am working on…

I would like to move the characters as well as background using that parallax demo script.

When I add that external .js file Hype my stage seems to disappear.
Do you get that too?

Happy New Year Daniel. Was wondering if you could perhaps let me know how I can get this working with Hype?

Since the JavaScript library (parallax.js) controls the images using its own methods, it would conflict with how Hype positions elements – I don’t think they can be made compatible without rebuilding the parallax library so that it takes into account Hype’s own element positioning…

No problem, thanks anyway… will see if there is maybe another one out there that is more compatible with Hype.

This is only a proof of concept type of thing to give you a possible direction to go in.

It would need a lot more work and finessing and for this particular set of images I am not sure the Parallax works well with the foreground gunslinger in comparison with the rio example.

I have not set any limits to the movement distances and at the last minute added the gun arms and movement ( so don’t laugh )

The example uses JS and the cursor position.

para.hypetemplate.zip (8MB)

1 Like

The gun hand/arms may work better with increment of 5

hypeDocument.setElementProperty(gunHands, 'left', Number(gunHandsLeft) -5, 0.4, 'linear')

---------- and

hypeDocument.setElementProperty(gunHands, 'left', Number(gunHandsLeft) +5, 0.4, 'linear')

Wow, thanks mark for all your effort! Its fantastic and I really appreciate what you have done.
Something about it that does not quite feel right compared to the parallax.js method.

I found the gitHub for it - https://github.com/wagerfield/parallax
Here they describe how it is used.

When I first attempted, it would render my scene blank. I looked at the .js file and noticed the first line

;(function(window, document, undefined) {

I am no programmer but the first bit “;(” looked a bit strange so I deleted it and now when testing I can see my scene. I am guessing it might be usable now. My next step is how to make it all work? I think I need to add a class name to my elements and then add a data attribute to them as well. And then something to initialize it all. I have absolutely no clue though :frowning:

Hi! Were you able to integrate the parallax.js into Hype?

Thank you,

-Felix

Thanks Mark, Ive taken a look at your example and it does look cool. Though looking at the one below where the effect is much more pronounced making it a jaw dropping experience. I can almost hear the the theme of stranger things through this ad - weird, its that good being an audiophile and all :stuck_out_tongue_winking_eye:

Netflix Stranger Things S1

Jurassic World

2 Likes

That banner is just amazing… I want a 3d camera/position in Hype.

4 Likes

Tell me about it… :stuck_out_tongue:

This online web app editor tool which is where those and number of ads that are being made in now has it and hype has drawing capabilities :slight_smile:

https://gallery.primo.design
https://gallery.primo.design/custom
Custom has a 3d Phone.


1 Like

Those are indeed the nuts

How about this?
http://s.visarity.com/xmas2018peter and it’s responsive.

Yep, they’ve given me special access to the builder though It did take me sometime to figure out how animate since it is a different app/platform I must admit it was weird coming from Hype. The interface is somewhat cumbersome to adapt to and it could’ve been done better. Anyways, my holiday wish for hype to bring 3d import and allow animation natively. @Jonathan?

1 Like

That’s pretty nifty! 3D webgl is a very different stack than Hype’s tech so don’t hold your breath :slight_smile:.

2 Likes

inhales and exhales :grin:

3 Likes

It did make me look at this as a tutorial to WebGL

https://www.tutorialspoint.com/webgl/webgl_quick_guide.htm

Which kinda reminds me of something else I have been looking at p5.js which uses a canvas and seems to be aimed at making Javascript/animation simple for newbies. ( not to sure about that )

3 Likes

Thanks for sharing Mark,

Omg lol wow he’s quite spiffy! That said, Id like nothing more than what he had. Seriously, he speaks with his hands and his face. Yes, his face, its when he does these wacky facial expressions.

2 Likes

So true, he is one of my favourite people to watch on youtube. Awesome guy.
Check out the rest of his channel including his code challanges where he is challanged to create an animation in said number of minutes from scratch… whacky fun.

2 Likes

While this is a very old thread, I am facing the same questions right now and I too found that parallax.js script. Eventually I was able to make it run with Hype:
TEST_parallaxJS.hype.zip (122.2 KB)

But even the oficial examples wont run on android smartphones, but seems to be working fine on desktop.