newseed Posted September 22, 2014 Report Posted September 22, 2014 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. Quote
falkencreative Posted September 22, 2014 Report Posted September 22, 2014 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? Quote
newseed Posted September 22, 2014 Author Report Posted September 22, 2014 Thanks Ben. I will take that approach. Quote
administrator Posted September 22, 2014 Report Posted September 22, 2014 Yep. I would agree. Stef Quote
newseed Posted September 22, 2014 Author Report Posted September 22, 2014 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. Quote
kralcx Posted September 27, 2014 Report Posted September 27, 2014 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 Quote
administrator Posted September 28, 2014 Report Posted September 28, 2014 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 Quote
newseed Posted September 28, 2014 Author Report Posted September 28, 2014 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. Quote
kralcx Posted October 3, 2014 Report Posted October 3, 2014 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. Quote
MobioSolutions Posted July 15, 2022 Report Posted July 15, 2022 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 . Quote
Recommended Posts
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.