Phone screen image gallery

Animation
1

Hello,

I am new to Hype and I was wondering if someone could give me some advice, I am looking to create a simple image slider with selection buttons. I have attached where I have got to but I think i need to bring the z index of the clicked group to the top and put the previous image back to its original position.

Can some one help? :slight_smile:

Thanks!

!Screen click.hype.zip (636.8 KB)

2

Hi Marcus!

I’ve kept as much to your original file as possible but I did name everything.

The major assumption of my demo is that there will be nothing placed over the top of the cell phone screens.

With this in mind I did not bother with a reset for the z-indices of the screens I just kept adding “+1” to an initial value of “100”. So the first reset of the z-index value for a screen would be “101”; the next reset would be “102” and so on. You can change this initial value of course. The ceiling for CSS z-index value is “2147483647” - i.e. the maximum value of a signed 32-bit integer.

The button that triggers the screen change has an ID similar to the screen name plus a prefix of “Btn_”. So “Btn_Screen_3” is designed to trigger screen “Screen_3”.

The reason for this is I wanted to use the slice() method to strip the button name of its first (4) letters “Btn_” which gives us the ID name for the corresponding screen. (You can create some other set-up with slice() - this is just how I worked it here.)

Timelines do the motion graphics, the “changeZindex” function does the z-index manipulation.

Note: In this demo I did not “correct” for a button being triggered twice in a row… the screen resets itself with every click - this behavior is something You may wish to adjust.


Hype Project: Screen_click_JHSv1.hype.zip (634.2 KB) - Demo here.

The function “changeZindex” function:

        var whatBtn = element.id;

	whatBtn =  whatBtn.slice(4);
	/*strip off the first 4 characters of btn name ("Btn_")
	so we now have the ID of the corresponding screen*/

	var whatScreen = hypeDocument.getElementById(whatBtn);
	topScreenIndex = topScreenIndex +1; // init value set > "Head HTML"
	hypeDocument.setElementProperty(whatScreen, 'z-index', topScreenIndex);
3

@marcus093

“Version 2” prevents the consecutive clicking of the same button from resetting the screen. Also, a clicked button is set to an opacity of 50% (“disabled” effect) and the previously disabled button (if there is one) is set back to 100% opacity.

Hype Project: Screen_click_JHSv2a.hype.zip (634.3 KB) - Demo Here.

Minor Edit (v2a): Added a “pause” to “MainTimeline” so it opens with the black screen instead of “Screen 2” animating.

4

This is amazing!! thank you soo much!!

6

Thanks for the reply :slight_smile: I have one question sorry I’m a noob when it comes to JS. but how do I link css styling to the clicked down button so I can style the depressed button?? :slight_smile:

7

Hi,

Style it in what way that you cannot do the with Hype properties ?

8

I can style the button in the hype propertys the button in general but I want it to have a completely different look when that screen is selected. At the moment the button changes in opacity but I wanted to do more, the opacity is done in the JS so I imagine i need to do the other styling for this in the JS as well?

9

The js is pretty easy. you just need to command the style properties of the element using the javascript css syntax.

In most cases the normal css property names are changed to Camel hump format instead of the hyphen separated formate. this makes it easy to guess what the correct syntax is if you already know the normal css one.

i.e

css:

#fooElement{
 background-color: yellow;
}

Javascript:
element.style.backgroundColor = "yellow";