I need to create parallax floating gallery - when I scroll the page, images move relative to each other and the parent container, from bottom to top of the page visible area. Here's an example on another site (section - sockstagram). Basically, I need to create exactly the same effect. I've already tried to do this using the same library the mentioned example uses - Skrollr. However, it's buggy - causes issues in Safari desktop and mobile (breaks layout of some other elements on the page). Can someone point me in right direction? jQuery plugin or some custom code to achieve this. Thanks ahead.
You can use parallax.js or even a framework like MaterializeCSS which has one implemented and adds also the benefits of having a grid-based framework to design your web.
Related
Our team already develop a web page using custom div, css and Split.js the to produce the following layout. There are 3 panels in the layout with each panel can be resize (notice the gutters).
Problem is, when using mobile the layout is not responsive - and we still do a lot of r and d for this.
I'm looking for alternative, which is Bootstrap framework. But so far, still don't figure out how to do this. Is there something I miss, or bootstrap is not the right choice?
I know this JQuery Resizable Plugin works for this purpose on mobile:
https://github.com/RickStrahl/jquery-resizable
I built a component for this purpose a while ago. The concept is to split any view (html element) into two, one has a fixed width/height and the other consumes the rest of the parent. If you put an optional divider in between the two views, you are able to drag and drop it to resize.
https://www.npmjs.com/package/split-view
Let me know if it works for your case.
As you can see right here: https://www.sequoiacap.com/
I'm trying to mimic its scrolling behavior right here, and its implementation really baffles me. Is it scrolling to another section? Or is it scrolling the background? Is there a name for this specific website style?
I have a one page parallax theme that I would like to auto scroll for user, so that each scroll gives the user a new fullscreen section. I would like to know how many plugins I would need to use. Some basic examples or directions for research would be greatly appreciated.
Thank you.
Here's 2 possible ways out of many, for how you could implement this:
jump.js which is a dependency-free library (meaning it does not require jQuery or similar)
fullPage which is a full page slider plugin for jQuery. This might be more of what you want, because it does not introduce a scrollbar.
I've been trying to figure out how to create a sticky scroll effect on two images, basically like this: http://www.nationalgeographic.com/americannile/
(scroll down to see you will see the four images with sticky scroll effect)
I have tried some jQuery plug-ins but still couldn't figure out how to create the effect I wanted.
Any help would be greatly appreciated, or just a point in the right direction.
Many thanks
What You want to do is apply some actions when document scroll position changes. Since You are using jQuery, there is plugin exactly for this functionality called ScrollMagic, and here are the demos.
The link you posted uses the scrollr library:
https://github.com/Prinzhorn/skrollr
I've also used this library and I just can recommend it to you. It is really easy to use, for basic animations you don't need any javascript, everything is done via data- attributes.
It even supports mobile devices to some extend.
in a project where I need to build something like the famous parallax-powered Mario Kart Wii Experience site, which also comes with horizontal and vertical scroll (if you haven't seen it, here it is: http://www.nintendo.com.au/gamesites/mariokartwii/#home)
For the scrolling effect, I grabbed the JQuery Scroll Path plugin (website here: http://joelb.me/scrollpath/), and it seems to suit my needs concerning the free scrolling.
The problem comes when I try to include some plugin to generate the parallax effect. I tried several plugins (including Stellar.js, jInvertScroll, Parallax.js, Parallax-JS), but none of them seem to work properly. I assume that there's some kind of relationship between the custom scroll that comes with the Scroll Path plugin and the need of the parallax plugins of working with the navigator scroll to make the effect work.
I searched in Google for some similar situation (i.e., implementing Scroll Path with some parallax plugin) but I didn't find anyone in my current situation, and it seems that the Scroll Path plugin isn't maintained anymore.
Any idea for making it work would be appreciated!
PS: Sorry for the grammar mistakes, I'm still in process of learning english.
To make 2 plugins working together you should understand how they work. Parallax effect is achieved with few layers that are moved with different speed - the closest to you moves fastest, the most distant moves slowest. Most of the parallax-effect plugins are based on scrollTop calculation - i.e. layers are moved depending on current scroll offset multiplied by delta-value (which differs depending on layer position).
In your case you should connect jQuery ScrollPath scroll event to parallax plugin. In ScrollPath you should generate scroll event (that will be handled by parallax plugin) in function scrollToStep (look at row 490 in jquery.scrollpath.js). To make calculations simplier you can use 'top' value applied to scrollbar * some delta (you should pick out delta value by yourself). Then in parallax plugin you should modify event handler that applies parallax effect from scroll/mousewheel to event you generate in ScrollPath plugin.
To connect 2 plugins together you should modify their code which means that you won't be able to easily update these plugins to newer version. You should make comments to all your changes in order to reapply them if plugins will be updated in future.
I am currently developing a site and have a need for a javascript-based carousel/slider hybrid on the home page that fades between 3 or 4 different images automatically, giving the user the chance to click on one and go to another page on the site. I also need the different slides to have some sort of navigation, denoted either by names for each slide (like in the Coda slider effect) or by symbols (such as dots for each slide), to allow users to review their options before clicking on the slide to visit the particular highlighted section.
I have seen this done in many ways with flash , but the only javascript approach I have seen that meets my needs is the one used by Apple on the new iLife page (link). Does anyone have any ideas what they are using or if there is a project that is similar to their implementation?
Thanks in advance.
Unless I'm missing something, the navigation on iLife looks like a photo gallery where the large photo links to the destination. I've used the jQuery Galleria for photo galleries because the animation effects are superb. Also the forum provides helpful community-based support.
If you wanted a carousel-style animation with the images sliding left and right, might try the jQuery Carousel library. I have not used it myself though so cannot comment on its ease-of-use or quality.
jQuery animate or jCarousel
The YUI Carousel Control would be another starting point to have a look at. (Note as of writing it is currently in beta.)
Hey I am not sure how helpful this will be but check out this slider. It is super simple and has the navigation thumbnails i think you are looking for
http://codetutorial.caroshaw.com/jquery_image_slider.php