Hi I am creating Scroll effect Like this website https://durimel.io/nel and For this I am using a GitHub repo https://github.com/corentinfardeau/horizontal-scroll#container-node-dom-null, I have two Concerns the Primary Concern is that How can I change the direction of scroll in horizontal Scrolling {Means Like when I am moving my scroll wheel of mouse Forward the Text is going From left to right "But How can I change it from Right to Left"} Pretty much same like in the reference website when we are scrolling one line is going from right left and two vice versa. Today I spent a lot of time surfing through the internet for find the answer How we can change the direction of Scroll in Horizontal Scrolling?
The second Concern is the How can I make the horizontal scrolling infinite? Means Like When I am scrolling to the end (till item 12 {you will get that when you will see the codepen}) the scrolling Stops But I do not want scrolling to be stopped instead the item 1 have to come again Pretty much same like the reference website I have given in the first line .
Here is the Code Pen <!-- https://codepen.io/shayan-kanwal/pen/RwZdvmw -->
Thanks For help Advance
Related
Is there a github or open source project which is a horizontal slider/swiper like on the google Films page?
Live Demo: https://www.google.at/search?q=films
I did a research but could not found the same behavior because this swiper does not force you to drag, on the desktop, you also can use the vertical scroll wheel and if you use the next button, it jumps to the next x elements and calculates how much it can skip depending on the screen size. Also the elements does not snap in place which is great I think, if you swipe. The cover is under your fingertip and moves as you swipe and does not do an animation or moves and snap in place, you just can swipe along.
and if you have js disabled, at least you can use the scroll wheel :)
Thx for help and tips.
The wording in the title is weird, apologies. It's hard to explain the effect.
I currently have this, it works best on Chrome:
http://mattluckhurst.com/dev/
My client wants each panel to slide up as the user scrolls down, covering the previous panel. I am currently accomplishing this by setting the "current" panel to have position:fixed and top:0 as soon as the page scrolls to it. The panels each have a z-index that corresponds to their vertical position on the page. So ideally:
You scroll down. when the next panel is halfway up the window, the scroll animates to get you all the way there, then that panel is snapped to the top so the next one can come in over it.
It's working pretty well in Chrome, but I am getting a lot of flickering and stuff elsewhere. Also on mobile it's a mess, but we really want a nice smooth swipe up down.
I know fixed elements can get pretty funky on mobile, so I am wondering if that is the problem, or if I should be using something other than just window scrolling for the animation / effect.
I see more complex parallax stuff all the time, so this should be pretty doable, I'm just not sure where to start.
Thanks for any help! Let me know if you need more info.
A few libraries that might help you:
https://github.com/dirkgroenen/jQuery-viewport-checker
https://github.com/janpaepke/ScrollMagic
https://github.com/matthieua/WOW
https://github.com/jlmakes/scrollReveal.js
https://github.com/Prinzhorn/skrollr
I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.
What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.
Here's an example diagram for those who need to visualize:
I think I have a solution that could work:
Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).
Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.
Check out the code here: http://jsfiddle.net/jPzqj/1/
I know how to pass a function at the end of the "scene"...currently I'm using:
$('#main').scroll(function(e)
{
if($(this).scrollLeft()>1430)
{
}
});
My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...
Could anyone give me any advice on this at all?
Thanks.
You are totally off the right path, no vertical scrollbars are involved.
That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.
It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).
The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.
This effect is called PARALLAX SCROLLING .
A good javascript library you could start looking at for Parallax effects is Stellar.js
You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.
Hope this answer saved you some time,
good luck on your studies ;)
EDIT
this is what you want: Jquery Parallax Scrolling effect - Multi directional
open the fiddle from the bounty-awarded answer and keep the right arrow key down.
I've seen one or two sites lately that take over the default scrolling in browsers.
When scrolling down, it will animate a scroll down to the next content section (stopping any scroll events during the animation.
When scrolling up, the same thing happens, but to the previous section.
The site I currently have is here: http://cirkut.net/sub/proven/parallax/
I've got the parallax down, but I can't think of an easy way to takeover the scroll and animate this. I'm fairly certain there must be a js/jQuery plugin to do this (I'm currently using stellar.js).
I've been searching for hours to find the example of what I want, but I can't find anything. If I find one, I'll come back and edit this.
Thanks for any leads or help!
Thanks a lot for all ur supports...Now I've a problem to resolve..I want to scroll the vertical bar and show the items in the page to appear as the scroll will go down(the way it happens in facebook page..It keeps on adding lists,items,comments,images as u keep on dragging the vertical scroll bar down)...Right now I don't have any code segment to use..and I've least idea regarding this..Please help me out..Preferable language/script could be asp.net,html,javascript,css,C# as I don't have any knowledge on PHP and MySQL..
This is called infinite or continuous scrolling, and it's mostly done in combination with jQuery.You can find some links below - though i couldn't find a working demo (and i know nothing about asp.net).
http://www.eggheadcafe.com/tutorials/asp-net/b8381915-06d9-4538-b4bb-5ac2a8e73f34/implementing-continuous-scrolling-ui-pattern-in-aspnet.aspx
http://weedallaboutit.wordpress.com/2011/10/13/infinite-scrolling-with-an-asp-net-webform-jquery-and-a-little-bit-of-code/
http://studentguru.gr/b/xinarisc/archive/2011/05/29/infinite-scrolling-with-jquery-amp-asp-net.aspx