Streaming live at 10am (PST)

Loading Sections on top of sections?


#1

Hello

So the principle of what im trying to achieve is to load sections that are off screen, on screen when you click a button. The idea is for all the sections to load into one space...so for illustrative purposes here's a basic illustration of what im trying to achieve.

So the question is.

  1. Is this possible?
  2. There are about 40 sections, all of which contain text and images... is that too intense for webflow to load?
  3. If it is possible, how would i structure those sections off screen? As Divs or Sections each with their own Class ID? And then load them on screen with Triggers and Interactions? Would i need any custom code? I'm really not a coder so the simpler the better.

I guess the overall impression i'm trying to achieve is that by clicking certain buttons you are loading and unloading sections of content into one space, rather than loading separate pages. This also needs to work well on mobile.

I'd appreciate any insight you can provide...or let me know that i'm smoking my socks and i should just load separate pages.

Thanks in advance!


Here is my public share link: LINK
(how to access public share link)


#2

Like this?
https://preview.webflow.com/preview/explainer?preview=b2f4adf4804edd1c3a8c43e8e438cf71


#3

Well the process would be like.

Step 1 - Click on button currently on screen...like a navbar
Step 2 - That would Load content thats off screen...on screen
Step 3 - Would be either clicking a button on that section thats now been loaded on screen and loading another section or going back to the previous section....and therefore unloading the current section....by either fading to 0% opacity or move left back off screen.

Am i making sense?


#4

If i understand you correctly that's exactly what's happening in the link i sent you :smiley:

It starts off with a red div, as soon as you hover over the blue button the blue div's opacity gets set to 100%.


#5

Haha...in theory yes...Maybe im not thinking laterally on this.

I'm relying on an entire section of content, that would contain images, buttons, text...all contained in one section that i would need to load.

So Step 1 - would be like a home page...with a button called 'media arts'

Step 2 would be this. Which would be a Div? Thats off screen...it has 4 buttons on it (I'd also want this to be a dynamic list item)

Step 3...You would then click on Photography in Step 2...and it would unload 'Media Arts which is Step 2' and then load 'Photography' which is this.

So through all of this...you can click on other menu items which are constantly running on the top which you can't see in that graphic....or click back and go back to Step 2....

Is that following the same principle of what you showed me?...because i can't see the relation? Sorry im a visual guy haha...

My thing is that there are like 40 courses...so its not just one or the other...im relying on loads of Divs being loaded on and off screen


#6

I think that would be done the same as i showed you. it's a lot more cluttered than the usual pages but it's definitely possible.


#7

Ok cool. So if i understand your theory correctly.

I'd create all my divs and have them on screen.

I'd make the trigger 'click' instead of hover....and then 'affect different items' would be just inserting the names of the 40 Divs.

First click would be opacity 0%

Would that be correct?

Thanks very much for this!


#8

Yes, and you could also, allong with the opacity change, have the display setting change from none to block once clicked.

No problem! :smiley:


#9

Awesome! Thanks so much.

This is my first site with webflow i have no doubt i'll get better at this, but i really appreciate the help i get on this forum, if it weren't for members like you i'd be so lost haha.


#10

Hello guys, @DharmaNode and @AMDD,

Why would not try Webflow Tabs widget? Same functionality but much easier interactions involved?

I have been using this kind of "effect" on one of my sites http://saevskaya.webflow.io (main page)
Languages are tab links, content appears by sliding, but really you can use many other options.

Cheers,
Anna


#11

Thanks Sabanna

I didn't actually think of that...i could maybe use a combination of both of those techniques. The Tab widget for the over head nav and loading the general categories and then the other interactions for loading the Divs within that Widget.

I'll play around with that as well.

Thanks for the suggestion!


#12

Aah yes!

I guess the best thing is to combine both of these techniques.


#13

SOLVED....just using tabs for everything.


#14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.