i'm curious about an effect i've seen on a lot of different wordpress powered sites. i think it might be a plugin, but i'm not entirely sure.
it's basically a page of images of different sizes, and they fit together based on how wide your window is. they also rearrange very stylishly when you resize your window.
the images also load as you scroll down, in sort of an infitie scroll way.
here is a perfect example of what i'm talking about... http://www.someoddpilot.com/work/projects/
how are they doing that? i would like to achieve a similiar effect, but i'm not sure where to begin. any insight would be super helpful, i'm somewhat new at this. thanks!
There are several techniques... I didn't look to see what they are using specifically, but since you mention jQuery, there is a plugin you should check out: Isotope
Related
I'm trying to create a page similar to new google calendar landing page http://www.google.com/landing/calendar/
I'm using skrollr(https://github.com/Prinzhorn/skrollr) but I can't get the effect right, on google landing page if you do a small scroll it will send you to the next block and with skrollr I'm not able to get that navigation. Any ideas how I could reproduce that? is it possible to do with skrollr or you would recommend another js plugin?
Thanks!
In case you still haven't found a solution yourself, I've been tasked with doing a very similar thing. There are two ways of achieving this that I researched and choosing the right one mostly depends on the complexity of your design/expected result. Unfortunately I can't provide a link because the site won't be live for next couple of weeks.
This is what worked for me:
I used fullpage.js library to achieve 'full-page' scroll effect. You could also take a look at onepage-scroll.js and see which one fits you most - they don't differ that much in terms of functionality though.
Benefits of using fullpage.js (among other things):
integration is quick and simple
allows a lot of customisation through options hash
provides callbacks when scroll to another section is triggered (before or after it happens)
enables you to manually trigger a scroll via 'methods'
works surprisingly good on iPad/iPhones. Probably on other mobile devices as well, although I can't fully confirm that since that
wasn't a requirement for my project.
Now when you've got section-to-section scrolling in place, what's missing is the animations. Considering that fullpage.js provides you with callbacks, it's as easy as adding a class when a transition to another section/slide happens and then using that class to trigger an animation of your choice through CSS. This is what worked for me without facing major problems.
For more advanced things:
If you're looking to build something more complex, then I strongly recommend that you take a look at tween.js. This is what google used on the landing page that you've provided in your question.
It's a very powerful tool hence it requires quite some setup + it moves animations to javascript, which might be a hassle. I would rather keep them in CSS where they belong and dont use javascript until I really need to.
FYI I also started with skrollr but it won't really work with 'fullpage scroll' because what it really does is disabling scrolling and animating body/html through translate. Skrollr bases it's behaviour on scroll event which will not fire if you use libraries I proposed.
EDIT:
It appears that you can actually use skrollr in par with fullpage.js. You can see the answer on how in it's FAQ site. Thanks to Alvaro for claryfing that! Even then, I wouldn't use skrollr unless you really need it for some advanced parallax scrolling effect - as said before, depends on your needs though. :)
Let me know if you have any doubts or something is not clear in my answer.
Good luck!
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.
I want to make small image browser like the one used on Myfonts.com (link) in the sidebar under "More fonts like this".
I'm wondering if there is a jQuery plugin that could do that.
I know that this is some kind of carousel, but I couldn't find any with this cool resize function on scroll.
I would suggest you take the jCarousel plugin, as it has a very good base, and modify it to your liking. You could combine it with the jquery ui slider to somehow achieve the same effect as on Myfonts.com.
I did come across something similar although not exactly the same. It might help you figure out how the resizing effect is accomplished. See http://www.eogallery.com/ and http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/index.html
As of today I couldn't find any out-of-the-box plugin that does what you are trying to do, but maybe if you build this, you'll post it to the jquery gallery and everyone will live happily ever after :-)