Can element size controlled by CSS or JS?

scrolling

#1

Hello guys, I am a newbie with Hype and codes. I created a Navigation, which is a group “element” of text. How would I control the “Height of that element” by css or javascript? I would like to interact it with scrolling, like it is disappear while start, but gradually appear from button to top triggered by the user to scroll the page. (ps: not just made by timeline, opacity change or css clip property.)

like the left bottom navigation element of https://daoustlestage.com/en/

menu.hype.zip (17.8 KB)

Thanks a lot!!!


#2

Hi @motchiual,

I’m not quite following what you’re after, but I’ll throw this on the wall to see if it sticks.

Under Tab 3, you can set the Overflow to scroll:

cap

Here’s an example file:

scroll.hype.zip (203.6 KB)


(Jonathan Deutsch) #3

Hype element position/sizing can be controlled in JavaScript via the hypeDocument.setElementProperty() API. Please see this section of the documentation. There are keys for "top", "left", "width", and "height".

Example usage:

var myElement = hypeDocument.getElementById("myUniqueID");
hypeDocument.setElementProperty(myElement, "left", 100);

#4

Hello O, thanks, it’s good for inspire… ^^


#5

Hi Jonathan, it’s work! Thanks! However I find out it seems not the right way to make the parallax effect that I like to, haha, I am trying another method… Thanks anyway!!


(Rick) #6

Maybe this will help:

https://forums.tumult.com/search?expanded=true&q=%20parallax%20effect


#7

woo, thanks Rick, such a cool kit would be useful in someday ^^