Hi there, first post in here.
I've just finished a 15 month college course in web developpement and now doing an internship at a non for profit organization that catters to artists and helps women get involved in the world of the web.
They are using Drupal for the past few years for their websites and I am now learning how to use it myself (been at it for 2 weeks now) Their sysadmin just installed AEGIR on their server to manage all of their different websites done with Drupal.
For an upcoming event due in next fall, they need to create a specific website dedicated to that event.
The theme for this event is Risky Business and one design style we looked at for this site is with a parallax effect, much like the now famous Nike Better Wolrd site.
Now, these guys have limited resources and their sysadmin, who's quite knowledgable in Drupal, is only available a few jours a week so they can't rely on him to work on their website.
So it is up to me to figure out if and how to make a parallax effect within Drupal.
We've just installed D7 and their "webmaster" knows her way in using D6 but doesn't do much coding.
I still need to learn how to use Views and properly configure Blocks and Content Types and, basically, fully understand Drupal's way of working.
So, my question is, how should we go about using a home page with parallax effect?
From this home page, there would be links pointing to sections of the site that would be created Drupal's way.
Mind you, I still need to learn how to program the parallax effect but from what I've read so far it shouldn't too much of a hassle.
My main concern is how to integrate it within a Drupal home page.
Any help, insight, link, or otherwise helpful comment will be greatly appreciated.
Thanks in advance,
Yves
Comments
Some thoughts
I've not had a chance to try this effect out for myself yet, though based on briefly skimming a few Parallax effect tutorials (this one on Smashing Magazine is very cool), it looks like it should be possible in Drupal. How difficult it would be is likely tied to how much dynamically changing/editable data you need to integrate in (in which case I imagine you might choose from a variety of techniques ranging from directly embedding nodes or blocks in a page--front.tpl.php or similar, using Panels, Context, Views, or other methods of listing a variety of pieces of content together). Or if dynamic/editable content doesn't need to be part of it, you could use a more "finished/set presentation" method that wouldn't really be dynamic or editable within Drupal itself (you'd edit the HTML), where you could create it pretty much any way you want as a standalone page, which you can set as your Drupal home page in a variety of ways.
I just came across http://www.foofighters.com/us/discography which is a Drupal 6 site, and uses the Parallax effect on this section of the site. I'd have to thoroughly study the HTML, JS, and CSS to get a good grasp on how they probably did it in this particular case. There are differences between Drupal 6 and 7 of course, but the general idea would be similar. The Parallax-specific javascript is found in this file: http://www.foofighters.com/sites/foofighters/themes/ff/js/discography/script.js
So far as HTML5, most likely you'll want to go with a good HTML5 Drupal base theme... my current favorites are Omega and AdaptiveTheme... or there are also a variety of simpler ones if you prefer, such as Boilerplate, Framework, or Boron.
I'd advise you to sketch and storyboard out on paper what you hope to create on screen before you proceed.
Hope this helps!
Thanks David for your
Thanks David for your reply.
I also looked at the Foo Fighter's parallax page. (found it while googling "parallax in Drupal")
Though I didn't really know what to look for. Your link to the script will most likely be helpful.
When I started to tackle Drupal, 2 weeks ago, and since I was asked to install D7, I figured I might as well look for HTML5 ready themes. So I started playing around with AdaptativeTheme.
I created a sub-theme and am currently making my Drupal teeth on it.
But then again, as I mentionned, doing the actual parallax isn't my main concern right now.
You said, "... which you can set as your Drupal home page in a variety of ways."
THIS is my main concern. I have no idea right now how I should go about doing this.
I still have to wrap my head around the blocks, views, panels, etc...
What I've been learning for the past 15 months is how to create a website from scratch.
I can literaly create my own "CMS" (though not as complex as Drupal is. Well, not in a weeked's time anyways.)
But the way Drupal is working, sort of throw all this linear thinking out of the box.
Articles
I wrote a good bit about this a while back, though it may be outdated in various ways for Drupal 7... in any case this could at least get some ideas across to help you: Drupal home page creation techniques
Something I don't believe I mention back then in the articles is a module called Empty Page ... I've used this a few times since then when I needed to have a blank slate page which I could then set blocks or other content to display on (in these cases Panels wasn't used... if you're using Panels, this is probably not the module you want, since it can make standalone pages for itself to use). If your site uses a custom module (which I find in almost any non-basic site to be essential if you want to fully bend Drupal to your will), then you can skip on this and simply use hook_menu yourself to do the same thing (Empty Page just gives a quick UI to create these blank pages at will). You can open up many Drupal core or contributed .module files and search for "hook_menu" for examples of how these modules "make pages to put their stuff on". Basically copy and paste that and customize to suit your needs.
Do you know if the content on your home page will need to be dynamic/changing, editable through Drupal's UI, etc? Or will your home page be more like a presentation, which you make and perfect once initially, and rarely if ever change (and when you do, you change directly in the HTML)? That point may affect the best route to take for you.
Your tuts gave me some food
Your tuts gave me some food for thoughts, for sure.
About that home page, it will most likely be static.
The idea is to have an image follow a somewhat zigzaging line and when at the top, or the extreme, of the line, that image becomes clickable to another "section" of the site. The image changes as it moves along the line to represent the next point to click.
Or something to that effect. We're still at the design stage.
Based on this new wealth of information I now need to find out where, or which file(s) I need to modify/create to achieve all this.
I have yet to find suitable information explaining the Drupal files hierarchy and what file does what.
I might not have looked properly though as so far I looked for specific info for a specific situation.
I've only been at it for 2 weeks so far and Drupal is a monster to master. It'll take much more time to get all of it.
You mentionned "custom module", I wouldn't be able to know where to look or what needs to be done for a custom module.
I may be in over my head with this project but I beleive there's no better way to learn than to jump right in and start making mistakes.
Regarding the Drupal file
Regarding the Drupal file hierarchy... the first thing to keep in mind is that you never edit "anything" in Drupal core or in contributed modules. Everything you edit will be either in your theme, or in a custom module - no where else. If you edit anything anywhere else, you'll be in a world of hurt when it comes time to upgrade the site (which happens at least once every few months). Other than perhaps robots.txt and .htaccess which you'll find in your Drupal root directory, you'll never edit anything unless it is under the /sites directory.
Your theme should be installed within: /sites/all/themes
Contributed modules get installed in: /sites/all/modules
If you'd like to see how easy it is to make a module (it really is easy "to start" a module... of course it can get as complex as you like after that)... http://drupal.org/node/416986 .... this guide is for Drupal 6, but almost identical for Drupal 7. I'll update that page for Drupal 7 soon if I get the chance. Point being, have a look and see how simple it is.
Maybe this will help:
Maybe this will help: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-pa...
You might also google for "HTML5 parallax" and "jQuery parallax"
Thanks for your reply and
Thanks for your reply and link.
But again, creating the actual parallax efect is not my main concern.
It is how to intergrate it within Drupal that is.
I haven't looked at how the
I haven't looked at how the parallax script works, so I can't give you specifics on that, but basically when incorporating something like this into Drupal, you have to do the following:
1) Create a method to get the data into Drupal. This can be a content type, a custom coded entity, or a simple custom form. Or you could even hard code it into some files if you don't need it to be dynamic.
2) Create a method to get the data out of the database and on to the page. This could be done using Drupal API functions, for example node_load_multiple() for nodes, or entityFieldQuery() for entities, or you could use your own SQL queries, or Views. It depends on how you've created the data, and how you want it to be displayed when it comes out.
3) Create a page that will hold the data removed in part 2. hook_menu() is your best bet for this.
4) Add the javascript on that page. Tweak the outputted HTML and the Javascript to work together.
Contact me to contract me for D7 -> D10/11 migrations.
Thanks for your input
Thanks for your input Jaypan.
The initial idea is to have static contents.
Though, having dynamic content within a parallax page is quite interesting.
But for now, simply getting it to work staticaly and within Drupal is a big enough project.
I'm still a novice with Drupal.
I wouldn't know where to look for" ... node_load_multiple() for nodes, or entityFieldQuery() for entities".
Well, you mentioned above
Well, you mentioned above that you don't know where to start with developing for Drupal, you can start here:
http://drupal.org/documentation/develop
What you will want to do is register a path with hook_menu(). This creates a path on your domain that shows a page. In hook_menu(), you will register a callback function that will provide the contents of the page. You can return straight HTML from this callback function (though as you learn more about Drupal, you will find out this isn't necessarily the best way to build a page, but it's good for when you are starting.
To find out about functions, and what to do with them, you can look at the api at http://api.drupal.org
I also recommend using the firefox plugins (if you are using firefox) that I mention here: http://www.jaypan.com/tutorial/drupal-api-firefox-search-add
Contact me to contract me for D7 -> D10/11 migrations.
I've been reading about parallex for the last few days
Here is what I am planning to try out:
1) Install Views and Views Slideshow
2) Create Content Type "Parallex slide" (or whatever you want to call each slide for the slideshow)
3) Within that content type, create a bunch of different fields for images and/or text. Start thinking of these as "layers".
4) From there, you'll need to work in Photoshop with some images to create several different layers that you'd want on top of each other.
5) You'll need to tweak the z-index CSS for each one of the "layers/fields" so that they are actually layered on top of each other.
6) You'll need to write some jquery to have some of these layers react differently. You can add some custom classes into views so that each slide has unique classes that you can style differently or the same. For instance, give all the background slides a class that would move it slowly horizontally right instead of left. Then call those classes with the jquery.
If you don't know jquery, then you're probably out of luck here.
subscribe - will be
subscribe - will be interested in finding out how you got on :-)
Edge
You know you could use Adobe's free Edge Animate tool for generating the HTML, CSS and js for the paralex panning effect. Then you could use the excellent Edge Suite module to place the interactivity in a block.
A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com
This worked pretty well
I had to end up doing some tricky php and javascript to get the z-index number to change for each layer I added.
The CSS and Jquery really controlled everything else.
Each layer was a content type and I just animated the background using jquery and the scrollto plugin.
Let me know if you have questions. I can certainly try my best to answer them.
Share your code!
Would you mind sharing your code, please?
Following this
I definitely wanted to implement this for "special pages" or for projects in a portfolio for example when I redo parts of my website.
Something similar to this newstory from NPR: http://apps.npr.org/unfit-for-work/
I was hoping there might have been a way to do this via simply a content type (each field pre-set as a "layer") though this probably *would* be easier as a Views Slideshow.
I could do this manually, though the interest is in automating this in Drupal (perhaps being creative with the Rules module, though I am not that well versed in Drupal. Also looked up Entity Views Attached http://drupal.org/project/eva )
I can't wait to see progress on this, however if I do this myself once I get to know Drupal more strictly I'll post a tutorial myself because this is definitely something I want to do.
I would use views or panels
I would use views or panels and this, https://github.com/IanLunn/jQuery-Parallax
Oh, maybe this will help
Oh, maybe this will help https://drupal.org/project/2008296
Link is broken
Yep, link's broken
Here you go;
Here you go; https://drupal.org/node/2008296
Benjamin Kiyita Lutaaya | www.lutaaya.net | +256 794 600 025 | me@lutaaya.net
I know this is a long running
I know this is a long running topic, but earlier this year we worked with National Theatre Wales (http://www.nationaltheatrewales.org) to develop their website with similar effects to the core of the Paralax sites. For this we used Views and some Jquery+CSS its quite robust and responsive too.
Thanks
Andrew
-------------------
www.hoffi.com
Write Up
A write up on how acheived this would be really great.
Cheers Dan
Follow
follow
Follow
follow
follow
follow
Try this
Try this https://drupal.org/project/views_fractionslider
------
GiorgosK
Web Development
Nice, will defiantly try it
Nice, will defiantly try it to create my next parallax project :)
Http://www.reloadmedia.com
Just wanted to share with you
Just wanted to share with you all our new website at www.sreyas.com. Its latest drupal 7 website with whole lot of things in frontpage with parallax effect, responsive etc.. Let me know your valuable comments on this..
------------------
Ciril Sreedhar
Sreyas IT Solutions
Server Administration | Web Designing | Web Programming
Follow up
What modules did you use? The site looks great...
follow
follow
There's a module for that
Using the github project mentioned in this thread
https://drupal.org/project/parallax_bg