How do I make my images or Elements work in Parallax format without having to use the HTML widget?

iframe

(bookwsm) #1

Hello I am a Thailand man who is not good at English. Will try to communicate with you. Thanks for reading my message.

How do I make my images or Elements work in Parallax format without having to use the HTML widget?

Parallax Edit 1.0.zip (200.1 KB)


(strmiska) #2

you can put your code and styles into the head. create a rectangle and put there your “div” only.

<div id="scene" class="scene"> <div id="scene" class="layer" data-depth="0.15"> <img src="${resourcesFolderName}/iphone2.png"> </div> </div>

create a function onSceneLoad:

      $('#scene').parallax();

You might want to check out this blog entry:

Tumult Company Blog – 6 Aug 14238

Tutorial: Create Parallax effects and single-page scrollable experiences in…

Our good friends at Survey Legend have shared a great tutorial with us on creating a single-page website built for navigating by scrolling. If you’d like a quick demo on how this works, visit…


(bookwsm) #4

Is there a sample of. Hype file to see or solve the fever from the file I gave it to. Thank you very much


(bookwsm) #5

I put it on the head section, it does not work. It does not show up in my Artboard Layout, but when I put the Code into Elements Text, it shows up in my Artboard Layout, but the code does not work. I want to put Code on Elements rather than to see Layout and Code work.

Help me thank you
Parallax Edit 1.1.zip (172.9 KB)


(strmiska) #6

i think it would be good to show a working example to the forum.
i cannot imagine, what exactly you want to achieve.
your example is not working for me. what should the image do?
is there text to scroll? should i click on it?
if you want to use this:
https://www.w3schools.com/howto/howto_css_parallax.asp
you also can achieve that effect, if you use persistant symbols within hype.