How to make the site scroll smoothly with the mouse? - javascript

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;
}

Related

Smooth scrolling behavior on Elements

Hello people I have found on this page (https://www.couleecreative.com/) A nice effect which I would like to Eibauen on my page. And that is the scrolling verhhalte of the text and other Contenst... But I didn't figure out how to solve it. Does anyone have an idea?
This kind of effect can be made using css property "background-attach".
There are few examples available on w3school, which can help :
https://www.w3schools.com/CSSref/tryit.asp?filename=trycss_background-attachment_fixed

Fade images in and out based on scroll position

I'm trying to recreate the same effect used here: http://www.chylak.com/en/bags where the images will fade in/out based on scroll position.
I've had a look at the source and can see that "data-centre-centre" and "data-top-bottom" both have opacity values so it looks like a CSS transition?
Thanks for the help anyway :)
here you are a little example in this fiddle
For anyone interested, I ended up using skrollr.js https://github.com/Prinzhorn/skrollr
Super easy to use and works great if you're trying to achieve a similar effect to the one referenced in my original question.

Unable to get skrollr parallax effect on header image

everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/

smoother scrolling using scrollbar and mouse wheel

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.

horizontal scroll - like github

Is there a javascript library which lets me do the horizontal scrolls effect kind like github does when you click on a file/folder.
Preferrably jQuery plugin.
thanks
Looking at the source for github, it seems they use jQuery.animate to slide the content to the left.
$("#id").animate({
marginLeft: "-1200px"
});
Example on jsfiddle
For a more in-depth answer, GitHub actually wrote about how they've assembled their directory structure on their blog.
But yes they're using jQuery for the actual effects themselves. They mention using slideTo() in that post, but in the end it's really just an $.animate() effect.
maybe you want to look into jQuery.ScrollTo, a jQuery plugin really usefull for this kind of effects.
You could have like github a div with a overflow:hidden containing your slides or pages and above the same kind of links than in the jQuery.ScrollTo example page.

Categories