Transition text while using sticky javascript


#1

Hey guys, like the tumult forum itself, transition effect when scrolling.mp4 (1020.2 KB) I am trying to apply the transition effect on text and/ or images while using the sticky js, as the elements bump to the top.

Thx


Scrollable text without the box?
(Hans-Gerd Claßen) #2

lock and unlock plus fix an element is always tricky within hype …
but if using just fixed in combination playing timelines i guess it works just fine …
headerswap and footer fixed


#3

Mindblown! Almost exactly what I want to do.
Now to just figure it out…
Thx for posting @h_classen!


(Hans-Gerd Claßen) #4

fixie.hype.zip (2.6 MB)


#5

Thx to you for your courtesy,
This will keep me busy for a pretty minute @h_classen! Hahahahaha

Kind Regards,
Marc


(PB) #6

I really want this too :stuck_out_tongue:

BUT!
I can´t open the file, it says you used a newer version of Hype, but when I search for updates I have the latest one. What could be wrong here?

(running latest OSX)


#7

Cool technique!

I moved this into the beta category since it uses features only in the beta and I don’t want anyone feeling left out.

(But I’ll move it out of the beta once 3.5 is released!)


(Hans-Gerd Claßen) #8

sry my regular version has been replaced while updating the last beta … which doesn’t matter though :slight_smile:


(kerguelen) #9

Thanks Hans Gerd !
Opens a lot of possibilities :slight_smile:


(David Guillermo Escalante Trinidad) #10

I just came across to this and it works amazing, but now I have a question, is it possible to use a class instead of and ID?

Using hypeDocument.getElementsByClassName(’.footer’); is not working for me :frowning:


(Mark Hunte) #11

Try

document.getElementsByClassName('footer');

Remember it will return an Array of results not an element


(David Guillermo Escalante Trinidad) #12

Thanks but it does the same as using hypeDocument, the footer is “sticky” but does not appear on the bottom of the window.


(Mark Hunte) #13

If you can post the project it will help take the guess work out of what you are doing…


(David Guillermo Escalante Trinidad) #14

Sorry I had to clean up and it took some time, but here it is:

Disumel_5.hype.zip (2.1 MB)

The reason I want to use classes is because the footer will appear in multiple scenes and using ID is quite problematic for that purpose.


(Mark Hunte) #15

Gosh… where to start…

There are few errors here…

Firstly you need to look at the code snippet I posted and use that. Hype will not understand the getElementsByClassName call. So you have to use document

The return value from the classname will be an Array not a element because it is getElements, plural
You will need to either specify which item in the array you want by index i.e

document.getElementsByClassName('footer')[0];

[0] indicates the first item

Or iterate over the array.

Next you do not need to specify a class by using the period ". " with the class name.
I.e should be document.getElementsByClassName('footer')[0];

Not document.getElementsByClassName('.footer')[0];

You normally only need to do that with jQuery

You are also missing the closing function bracket in the setFooter() function.

There may be more


(David Guillermo Escalante Trinidad) #16

The [0] at the end did it! Is working now! I can’t thank you enough for your time. And yeah, the missing bracket is a typo I forgot to fix before saving the file, but yeah I fixed that too and everything is working beautifully.

Each time I learn a lot with your comments.