Jump to content

Archived

This topic is now archived and is closed to further replies.

sheilahoff

Can this be done in DMS

Recommended Posts

sheilahoff

I’m about to start a new client project and have a question. The client’s example she wants me to mimic is this site: http://canvas.is

 

It’s not the one-page aspect or all the movement (she doesn’t want either). I know how to do those things. But she LOVES the “transformative” nature of what happens with the initial word, Canvas when you scroll down. I haven’t looked at how that might be possible in PL but I thought someone here MIGHT know off the top of your head.

 

Thanks,
Sheila


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
greenfly

Using parallax scrolling this can be done with DMS 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
sheilahoff

Thanks Martin, I figured as much. But can you go into any detail about how it works? Do I need two different images with a transition effect? or what? I'm clueless.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
greenfly

Yeah i would think two images. 

 

Try inspecting how they have done this using your browser tools. I did this quickly and saw it looks like it's all done with CSS/JS


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
sheilahoff

I've been poking around and chatted with both James Giroux and with ET Cook of the Depth Charge parallax DMS plug-in. He's currently updating DC for DMS2 but he says it will NOT do this effect. Apparently for “paneling” as he called it, I need jquerry way points? I’m not a coder so this is beyond me. In examining the example I can see it’s two slides and as a designer creating those are no problem but I have no idea how to make this happen. I've also started asking on Code Canyon about some of the parallax tools there. But since DMS already has it built in this seems excessive.

 

Any more ideas on how to get there? We're willing to hire someone but I'd love to learn how to do it. Thanks.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
sheilahoff

I'm getting nowhere fast with this. Are there any DMS tutorials on using parallax. I'm not grasping how it works in DMS at all. Is it possible for the nav bar to not appear until after this effect but then become sticky? She wants it JUST like on the example in the OP. I know we can use scrollspy (which I've never used either) but I think that keeps it moving. Since the client does NOT want a one-page site, I'm having a hard time wrapping my head around how to make the initial impression the same as the example but then turn it into a pretty regular DMS site. Thanks for any further pointers.

 

I'm playing with it here: http://sheila.wpstagecoach.com/ in DMS2


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
jmad

sheilahoff

 

 

Cool site for sure.  I messed around with changing the parallax effect on a page of my site (madskydesign.com/about) and looked at your example.  Would it be possible to make two sections the exact same size and have the second section fixed position.  Not sure how the menu effect would work (z-index maybe).  That site seems to be an odd combination of responsive and non-responsive elements at least on desktop and delivering an alternate layout for mobile.  That's what made me think maybe its a fixed photo.

 

I'd like to know if that's all handled via CSS.  I like some of the menu effects of solid and larger converting to opaque and thinner as you scroll.  Being able to have a menu below a section become fixed once it hits the top of page would also be nice. 

 

Good luck!

Share this post


Link to post
Share on other sites
sheilahoff

Thanks for playing with it. I asked a dev friend locally who looked and thought it was all done with html and css.

 

I knew there was something about the example that bugged me. It's not directly responsive! Geez. That's not good.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
wesleymusgrove
I'm working on a page that has several full-width canvas sections with the parallax effect.  It seems that the parallax effect is happening on all 3 background images at the same time, even though I've only just begun scrolling down the page.  I've viewed the CSS background-position-y for each of these background images as I scroll and the y-position for all 3 of them are changing simultaneously.  By the time I scroll down to the 2nd and 3rd image the parallax effect has already "finished" for these images because the background-position-y CSS property has already reached it's maximum value.
 
The layout goes like this:
 
Fixed (disabled)
 
Header
--Scrollspy Nav
--Masthead
 
Home Page Template
--Canvas Area (Parallax)
--Textbox
--Canvas Area (Parallax)
--Textbox
--Canvas Area (Parallax)
--Textbox
 
Footer
--3 columns
 
Has anyone seen this behavior or tried to do multiple parallax effects on one page?
 

Share this post


Link to post
Share on other sites

×