Jump to content

Parallax With Responsive Design


newseed

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.

Link to comment
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.

Link to comment
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

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

  • 7 years later...

Parallax scrolling is a computer graphics method utilized by web designers to create a faux-3D effect. As users scroll down a webpage, additional layers of content or backgrounds move at different speeds, and this creates an optical illusion.

It is a website trend where the background content is moved at a separate speed from the foreground content while scrolling.

Parallax graphics are perfect for storytelling. Good design is all about communication—and when we design websites, we want to communicate with our visitors and convey a convincing narrative about our product, service, or brand. Parallax scrolling permits us to engage our website visitors in exceptional online experiences.

For wordpress, there are many sites providing Parallax scrolling wordpress themes .  

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...