search

bcoo201 / thehunger

https://bcoo201.github.io/thehunger/
0 stars 0 forks source link

Build plan #1

Open ellysmlly opened 3 years ago

ellysmlly commented 3 years ago

There will be 3 layers to consider in your build plan:

Intro layer

This is working currently

Background layer

Top interactive layer

ellysmlly commented 3 years ago

First step: Focusing on the background layer ONLY

First comment out your intro layer for now

When you do this all of them will be on top of each other so you will only see 1 at a time

An idea of class names could be: <div class="th-background-image th-background-image--frame-1"></div> <div class="th-background-image th-background-image--frame-2"></div> <div class="th-background-image th-background-image--frame-3"></div> etc

ellysmlly commented 3 years ago

Second step: Focusing on the top layer ONLY

First comment out your intro layer and your background layer

An idea of class names could be: <div class="th-col th-col--frame-1"></div> <div class="th-col th-col--frame-2"></div>

ellysmlly commented 3 years ago

Third step: Adding the interaction using Javascript

Goal is something like, when you hover on th-col--frame-1 then th-background-image--frame-1 will show using JS to add class th-show on th-background-image--frame-1

bcoo201 commented 3 years ago

Hey I followed the steps laid out and updated the files, only thing i couldn't seem to figure out is how to make the background slides mimic the sizing of the browser window when you resize (forgot what that's called) like what the column layers do. Could you tell me how to do the javascript as well as a mouse click function that goes to other pages of my movie stills please? Thanks! @ellysmlly @sehsarah

sehsarah commented 3 years ago

make the background slides mimic the sizing of the browser window when you resize (forgot what that's called)

I think the word you're after is responsive - so using % widths or media queries

Will take a look at the site now to check out what you're after with click JS - above weren't you meaning to use hover/mousemove?

This step ->

When you hover on a certain column the matching background image will show

@bcoo201

bcoo201 commented 3 years ago

yup, this is done with JS right? @sehsarah

sehsarah commented 3 years ago

From the above issue and looking at the code in the repo i've worked out this is what you're after:

Is that right?

@bcoo201

Because you've said

how to do the javascript as well as a mouse click function that goes to other pages

So where are the other pages? do u mean other images?

bcoo201 commented 3 years ago

Yeah correct, the other pages part I'm meaning like what they have done on this site where you click the screen and it goes to another set of images http://www.kindhauser.com/ @sehsarah

bcoo201 commented 3 years ago

the other images aren't on there yet was just wondering how i go about doing it

sehsarah commented 3 years ago

Oh i see, so you're asking about the hover first, and then linking to page 2 etc can be next and is a separate thing. Got ya

sehsarah commented 3 years ago

Have added a comment here https://github.com/bcoo201/thehunger/pull/2#issue-761935699 - using that JS that "sets current frame" you should be able to pair CSS to achieve this desired interaction:

because you now know via the body class, which column is currently being hovered

bcoo201 commented 3 years ago

cool thanks! seems a lil confusing at first glance but i'll see how i go haha

sehsarah commented 3 years ago

All the JS does is set frame 1 if column 1 is hovered by adding hg-frame--1 on the body (and making sure no other frame class is on the body either)

and then that's just repeated for all 13 columns

What you need to do now is nothing in JS

It's purely CSS that does this:

but 13 times for each column/frame