Menu icon Foundation
Parallax / One Page Designs

Example: http://getdirections.es/

Are there any resources on how to do this with the foundation grid? I know we are limited to padding on the grid which makes it very frustrating to develop custom "div" slides, as seen here in the parallax design.

Any help on expanding the grid to full width, no gutters/padding would be helpful.

Also, can we customize the HEIGHT of each grid item?

parallaxone page designgrid

Example: http://getdirections.es/

Are there any resources on how to do this with the foundation grid? I know we are limited to padding on the grid which makes it very frustrating to develop custom "div" slides, as seen here in the parallax design.

Any help on expanding the grid to full width, no gutters/padding would be helpful.

Also, can we customize the HEIGHT of each grid item?


Brandon Arnold gave the most helpful answer for this post
Brandon Arnold almost 6 years ago

We wrote some stuff for how we did it with the ZURB Manifesto here:

Site
http://zurb.com/manifesto

Post
http://zurb.com/article/983/the-css-source-code-behind-our-manifesto

I also recently had some good luck with some scroll based parallax for some client work using Skrollr
https://github.com/Prinzhorn/skrollr

Clayton Allen almost 6 years ago

$(document).foundation();

$(window).scroll(function(e){
  parallax();
});

function parallax(){
  var scrolled = $(window).scrollTop();
  $('#mobley-header').css('background-position','center ' + -(scrolled*0.35)+'px');
}

Brian Martin almost 6 years ago

Is that CSS?

Clayton Allen almost 6 years ago

www.MobleyTek.com

This is a site that I have been working on and uses the above code in the app.js file. If you view the page you will see that the parallax works (even though it is a simple approach). I am certain you will have some more efficient replies as well.

Be sure to view the source code and css using the developer tools of your choice.

Cheers,

Clayton Allen

Jamie almost 6 years ago

I'd like to see this too.

We've been experimenting with Stellar.js and Ian Lunn's Jquery Parallax, but it appears there's a conflict with the Foundation 5 CSS. We're getting really jerky movement in IE and Safari. When we disable foundation.min.css the scrolling issues are resolved.

Any help/recommendations appreciated!

Brandon Arnold almost 6 years ago

We wrote some stuff for how we did it with the ZURB Manifesto here:

Site
http://zurb.com/manifesto

Post
http://zurb.com/article/983/the-css-source-code-behind-our-manifesto

I also recently had some good luck with some scroll based parallax for some client work using Skrollr
https://github.com/Prinzhorn/skrollr

Melisa moeyer over 5 years ago

Parallax website pros
A creative way to tell story
Attractive look
Easy to visit one frame to another

Cons of the Parallax website
These websites are not seo friendly
- Only single code is generated with sitemap
- Only one or two keywords are optimized for single domain name
- blog is necessary
- Take more load time
- It is difficult to maintain them at top of SERP

Think what you do if stay with parallax website or use another creative responsive web design services to enjoy the business benefits.

In my opinion created stories with parallax website, but maintain less load time. This no doubt work as additional benefits, but a good website is necessary which is in the HTML5 like http://www.technocrab.com/web-design.html

Nathaniel Flick over 5 years ago

I get around the SEO/content issue by creating a separate HTML include for each section then adding those pages to the sitemap.xml file.

James Wilson over 5 years ago

Nathaniel,

Do you have any examples of this?
Thanks,

Jim W.

Ryan Conway over 5 years ago

@Jamie

I just ran into the same issue. I started commenting out bits of the css and it didn't take me long to find the problem.

html,body{height:100%}

As soon as I commented it out, the parallax worked. I have not done any browser of device testing yet, so not entirely sure what will be affected, but works fine in chrome.

Manmeet Singh about 5 years ago

The benefits of a Single Page website are that – they can easily been adapted to mobile devices, are less costly over what one would normally pay for an entire website and – are easier to create since all they really depend on is vertical or horizontal scrolling, and parallax effects.Incorporating a sliding parallax effect by adding animation into a website, one is able to a create unique experience for the end-user. Albeit, a parallax interface can be hard coded from the ground up – however, there are several free open-source plugins which will enable you to get the job done much quicker and easier.

There are several jQuery plugins which are open source and available to assist you in this undertaking, and they offer many features in terms of fixed navigation menus, parallax content, animations as well as other advanced features.

Several of these plugins are available for free and can be implemented quickly and easily onto any type of platform. We will review 15 of the most popular and feature-rich open source jQuery plugins which can be used in creating a single-page website.

Manmeet
http://www.yoginetindia.com

Elles pallin almost 4 years ago

Parallax scrolling website the name which simply implies in everyone's minds for a fancy website it was like a complete website on a single page for visitors to scroll through. I m sure everyone's gone through this but firstly let puts up some of its pros.

1.Visitors takes up a complete journey.
2.Flow of information is in our control using id navigation.
3.Great for mobile use.
4.Looks unique and give more descriptive view using images.

Now lets took over to disadvantage too.

1.They are quite long so make us too feel lazy by scrolling each time.
2.Sharing for a specific content is difficult.
3.Not great for ranking factor.
4.Engagement points are hard to understand.

In my opinion its better to look-over for a simple website with less parallax that is with HTML5 Just like i provide you with the link http://www.xtreemsolution.com/

Nathaniel Flick almost 4 years ago

Hi James

Yes used the technique on this website in particular:

http://www.the-briefing.co.nz

Basically you have your page that's a collection of the includes that has the parallax, and each include is an html file with the seo content therein. The sitemap.xml file points to those includes as well as the page itself so all sections are counted toward SEO.

Hope this helps!

Brian Martin almost 4 years ago

Nathaniel, your site looks pretty amazing, but it renders the back button somewhat useless. I got pretty confused when I looked at my "history" and was loading each individual section of the page based on the scroll position.

Was this a mistake? Would love to see this work without all the strange "back button history" problem.

Nathaniel Flick almost 4 years ago

Why are you using the back button on a single page website?

Brian Martin almost 4 years ago

Am I crazy to think from a UX perspective that hitting the back button (to return to search results or whatever the user was previously on) is a bit of a confusing experience if you have to scroll through 10+ History results just for simply scrolling up and down a page?

Trust me I'm down to use this technique if its truly, widely accepted, but it logs EVERY individual section of the page as a seperate history event when you scroll up or down which REALLY clogs up my history.

Just my two cents, if there's a better SEO option for Single page websites I'm all ears!

:)

AnneCarton almost 4 years ago

Hi,

I have a website at where you can found some paradox work i.e designhill.com
if you need any help then see all the pages of this website.

Brian Martin almost 4 years ago

Any takers?

Rafi Benkual almost 4 years ago

@Brian Martin Any takers for what?

Infinite scrolling pages have their pros and cons. On the con side is this interaction of going to another link then returning only to see the scroll position is lost.

You can do some tricks with html5 local storage https://www.browseemall.com/Blog/index.php/2015/05/06/3-ways-to-handle-the-back-button-on-infinite-scroll-pages/

Hope that gives you a path!

susanquillin4 over 3 years ago

Please try to disable few CSS which are used for animation and check and I am sure it would work as we had he same issue on http://kilobytes.in/services/web-design-mumbai-india/ but we had got it solved in the same way..

 

Do let me know..

Vashishtha Kapoor over 3 years ago

You can see

The front page of this site http://www.zedzoom.com is in parallax mode. 

How does it seem to be?

There are so many parallax wordpress themes are available for FREE and bucks both. You can google it easily.