I am trying to do a smoother scrolling on my single webpage. It is easy to do it when I click on a link or button, but I don't know how to do it when I use the mouse wheel or the scrollbar. I've seen this in many pages. Next there is an example of what I am talking about:
http://icscreative.com/
I hope being clear enough.
Do you have some clue of how to do it?
Thanks a lot!
https://github.com/victa/curtain.js is a great library that accomplishes a similar effect
Are you looking for something that decelerates the scrolling after flicking the scroll wheel?
If you are check this one out: http://areaaperta.com/nicescroll/
The site itself is an example.
Related
I found a smooth scrolling site. All elements move very smoothly. I googled for a long time, but did not even find a similar example. Any ideas how this can be repeated? https://www.sweetpunk.com/en/
The site is likely using a library similar to locomotive-scroll to achieve this effect. See here for a demo: https://locomotivemtl.github.io/locomotive-scroll/
There is a css property that's does something similar
*{
scroll-behaviour:smooth;
}
I'm currently working on a website. I want to have a fixed text (I know how to do that) that changes if you scroll.
So if you're on top of the page it shows '0' and then, while scrolling, the number goes up and up and when you scrolled one viewport-height it should be '10000'.
I think this should be done with javascript, but I'm just a beginner with it. Could you please help me? Thank you very much.
edit
Thanks Ajay for the tip with the onscroll function. But this always just adds a number on scrolling. I want something like this (look at the top left hand corner). Where the size is relative to the position on the site and not the scrolling wheel.
Try using the onScroll event of javascript.
Here is a useful link to learn.
I found this page http://www.wanderworld.io/ when you scrolling its start animation on scrolling and scenes are changing. how to create something like this? Please help me, any example on jsffidle or codepen?
To point you in the right direction, this is called parallax scrolling and can be accomplished using CSS, but is most commonly done in Javascript / jQuery.
This library is great for parallax animation and would probably accomplish most, if not all, of what the example site does: http://prinzhorn.github.io/skrollr/
Basically the idea is to have a page scroll listener that tracks the window.scroll position. At certain ranges, elements move in and out of the screen. The concept behind it is relatively simple, but it can be difficult to implement and can be as complicated as you choose to make it.
I'm working on horizontal website. I would like to create 2 buttons (left button and right button) which can help users to scroll to left and right.
The site that I'm working on
The functionality that I wanted to create is, when I mouseover the button the page will start and continue the scrolling action until the mouse move away from the button then the page stop scrolling.
I found something from codepen "http://goo.gl/uTQdzD" that is similar to what I looking for but that is not function in the way I wanted. It's required to keep clicking it only it can continue scroll, once it clicked then it only move a certain pixels distances and stop then have to click again... even I tried to change to mouseover, the same thing... I have to moving the mouse in and out the button only it can continue to scroll the page.
I'm not a professional web coder or developer but just a new guy. I Hope someone out here could help me out.
Thanks in advance.
Here you go: http://codepen.io/caseybaggz/pen/uBysA?editors=001
I changed the .click to a mouseenter event which is what you are looking for. Additionally, the increments that you noticed were happening because of the step variable being assigned 400. So, I just replaced the 400 with wWidth and within the mouseenter function, told it to scroll the bodyWidth.
I'm not totally sure why you would want to do this? The natural flow of web design is to design/build sites vertically. To have the user scroll horizontally is a little awkward regarding the UX and could be considered bad design…especially now that devices come into play.
Be sure to learn web-design and UX standards first before you get into a position for developing sites. It not only helps to contribute for bettering the web, but also the UX. ;)
Hope this helps and good luck!
I'm looking for a way to slow down scrolling between two specific pixels, for example 1 to 100 from the top. Would that be possible in any way?
Here's a link to a website that have that feature I'm looking for.
http://goo.gl/isH5o0
When you start scrolling the dark blue overlay div disappears using CSS3 Translate3d, but then the scroll seems to stop or go really slow, which makes the underlying div not scroll to far at the same time the overlay div slides up.
Can someone please give me a hint of what technique to use to accomplish this or maybe help me with some code.
I think that there's nothing special with the scroll on that page, just the divs moving using 3d transforms. But if you want to achieve special effects with scroll, you can use the jQuery animate function:
$('html').animate({scrollTop: position-to-scroll}, 300, 'ease-in');
More about animate.
It may be using disable scrolling. I noticed that if i drag the scroller on the right hand side of the window it is uneffected by the "slowing" however the mouse scroll is. This is similar to the effect of the demo described here How to disable scrolling temporarily? .. at a point you can temporarily disable the scroll and then re enable it to stop them going too far down