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.
Related
I've been looking for a library or a solution to implement Tumblr's scroll effect.
I previously worked with libraries like fullpage.js but the thing is Tumbler effect is a bit different.
To be more specified, when you scroll up/down sections cover each other, but in libraries like fullpage.js sections push each other to up and down.
I'll appreciate if you guys have any solution or library to implement this effect.
Update 2018:
There's an article about it here. Which makes use of fullPage.js. instead.
You are looking for pagePiling.js, the small brother of fullPage.js.
You can even use fullPage.js to do exactly the same as long as you use the parallax extension with the offset value set to 100, and then place all your content in the background element. So it will move at the same time that the background.
The advantage of using fullPage.js is that you'll have plenty of more options, methods and callbacks than when using pagePiling.js, which hasn't been updated in a long time.
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.
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
Does anyone know of a javascript scroller that will scroll a bunch of DIVs in a loop automatically and without buttons. I want to scroll about ten images to the left using my current design. Thanks.
Here is a link to quite a few good ones. I have used several of them. If you aren't using jQuery yet, then you ought to:
http://webtoolsdepot.com/30-best-jquery-image-and-content-slider-plugins/
http://jquery.com/