Jump to content
Killersites Community
newseed

Parallax With Responsive Design

Recommended Posts

I fixing to start on a small but important project that requires a couple of small parallax effects.  My question is how to tackle this in the proper order. Do I code the page so that it lays down for desktop first and then make it responsive before I even apply the parallax effects?

 

Secondly, I think the client wants to use Wordpress. My thought is that I could use WP's default 2014 theme which is responsive. I could then apply the design to it and then add the parallax effects.

 

What do you think? Suggestions?  I have already went thru a number of articles but I have to find one that gives you a guideline on what you should do first and then thereafter.

Share this post


Link to post
Share on other sites

I probably would focus on the overall responsive layout first, then the parallax effects second. I'd consider the overall layout more important than the effects, which while important, are just visual effects and don't really change the layout that much?

Share this post


Link to post
Share on other sites

Well after spending a better part of my afternoon, I think I am in over my head about how it works.  I have done a tad of jquery before with bootstrap usally with no problem but is using hover, click or toggle events and not scroll events which I have no clue.  I have yet to find any resources that explains what each function does, how and why it coded that way.  Here's an example in which I am trying to understand which is using skrollr.js

 

<div id="foo" data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

 

Bascially this tells it to transition the background from blue to red.  I assume the data-0 is the beginning of the event and it last until 500 pixels later(?). So I figure it would be easy enought to start out with transparancy and then go to red. You will notice the addition I've made in bold below:

 

<div id="foo" data-0="background-color:rgb(0,0,255,0);" data-500="background-color:rgb(255,0,0,1);">WOOOT</div>

 

Well that didn't work. As a matter of fact it rendered it useless.  So, I thought maybe I was going about it the wrong way and so I tried using data-opacity="0" but that didn't work.

 

The scroll of background images seems easy enough but it's not what I want. I need a top nave to change color gradually when scrolling up.  The other one is a profile image appearing on that page in a fixed position when first loaded and when some content comes up  (after about 400 pixiels) to just right under the profile image it would then move up together.

 

Need a tutorial on this Stef. My hair is becoming thin.

Share this post


Link to post
Share on other sites

I fixing to start on a small but important project that requires a couple of small parallax effects.  My question is how to tackle this in the proper order. Do I code the page so that it lays down for desktop first and then make it responsive before I even apply the parallax effects?

 

Secondly, I think the client wants to use Wordpress. My thought is that I could use WP's default 2014 theme which is responsive. I could then apply the design to it and then add the parallax effects.

 

What do you think? Suggestions?  I have already went thru a number of articles but I have to find one that gives you a guideline on what you should do first and then thereafter.

 

Try cool kitten it is a parllax responsive framework that may help you, however I'm not sure how you would get the code into wordpress

Share this post


Link to post
Share on other sites

Ouch! Don't thin out the hair!!

 

:)

 

I will need a few days ... I am actually going to be digging deep into Bootstrap later this week. If I come up with something I will let you know.

 

Stef

Share this post


Link to post
Share on other sites

Looks like it will be done NOT using Wordpress. I found a guy that will do the parallax portion of the design but it would be nice to see a few tutorials that shows how to do different types of parallax. One (most we all know about) is scrolling but the others like pinned and then scroll, move in or out, scroll up then stop(pause) and then scroll again. fade in and out, and so forth...yeah I know it's a lot to ask but I am in no hurry now but it is something I like to know more about.

Share this post


Link to post
Share on other sites

Looks like it will be done NOT using Wordpress. I found a guy that will do the parallax portion of the design but it would be nice to see a few tutorials that shows how to do different types of parallax. One (most we all know about) is scrolling but the others like pinned and then scroll, move in or out, scroll up then stop(pause) and then scroll again. fade in and out, and so forth...yeah I know it's a lot to ask but I am in no hurry now but it is something I like to know more about.

 

Find example sites of what you're looking for and study the code; that usually works for me.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×