How to do slow scrolling like these website are doing - javascript

There are several websites where I see smooth slow scrolling. I have been looking for plugins for react or vue. I basically want to learn how to do it with vanilla Javascript. Also you can suggest plugins libraries and whatever you want. But I want to know how to do it in pure vanilla js. I want to learn to control scroll speed.
here are the websites:
https://nana-asia.com/
https://pelizzari.com/en
https://loerarchitecten.com/en/projects/republica-short-guy
you can tell me what these websites are using also tell me how to do it using pure js.

Please have a look at following demo, might be helpful.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
There is also an opensource library with name 'Smooth-Scroll', pasting link below. They can be used as a starting point.
https://github.com/cferdinandi/smooth-scroll
Hope it helps.

One approach:
Catch the mousewheel and touch events and prevent their orignal behaviour.
Detect direction and speed of touch events or scroll amount for mousewheel events
Use the event values and map those to the desired scroll level
Apply a CSS translate to your page content

If you want the page to scroll smoothly like the first like here is a good plugin
https://jokertattoo.co.uk/js/SmoothScroll.js
You can mess around with these values till you get a result you want:
frameRate : 150, // [Hz]
animationTime : 2000, // [px]
stepSize : 150, // [px]
and here is a demo of it in action:
https://ui-unicorn.co.uk/my-cv/

Related

Parallax-Animation Scrolling Effect

I've been wanting to implement a similar effect like in these apple sites where the computer animation changes with the scroll.
https://www.apple.com/macbook-pro-16/
https://www.apple.com/imac-pro/
Searching around how to implement the sort of parallax effect Apple does in these websites, I haven't expressly found something quite the same, how is this accomplished?
They propbaly used three.js scripts to achive this. But you can do it in much more easier way but with worse performace for sure. You need to make a lot of photos (you know like in the movie frame by frame) and then on the scroll event you have to replace photo with prevoius one(if you detect scroll top) or with next one (if you detect scroll down). If you detect last or first item then you stop hijacking scroll event and let browser do the job.
If you want to learn more abot three.js you can read more about this here: three.js - Learn
In the end of <body></body> element of this website you can see that they added three.js :
I was also researching what apple use on their website and found out that a tool called Lottie.
Lotttie is a design library by Airbnb you can find it here
"Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images."
Lottie also has a web version available here

How to add sliding page transition in a Single Page App?

I am using Sammy.JS for my routes and I can hide and show my pages with its callback, but the transition isn't good. What I wanted is to show the pages from right to left or when going back, it would be left to right.
var app = Sammy('body', function() {
this.get('#/start', function() {
$('.app_page').hide();
$('#start').show();
});
this.get('#/end', function() {
$('.app_page').hide();
$('#end').show();
});
});
Is there any frameworks or Plugins for this?
I assume that you are looking for something like the android transition between pages, in that case you must know that web is not totally ready for that and although it's possible, but you must consider many problems that happen when animation pages, such as the positioning(you must set the positioning as fixed and that might cause a lot of problem) or the performance of the animation for long and heavy pages.
there is not a mature javascript library that I've encountered and everybody just use their own code cause for different webpages, different css stylings are needed.
the best way to have a nice animation is to keep is simple and light, like a fading effect with a little bit of transform and scaling.
and if you really want to do the animation, it's better that you do it yourself, definitely use css animation(not jquery) and remove the animation after it's done(for performance).
and write a javascript function to check if animation is supported if not do it the old fashion way.
if you need more information let me know.
I did try the page transition in my own javascript framework and it works fine but only after I failed the first 100 time.
I recommended to you to use jquery animation to achieve your goal.
First, you can study css transition(for the page right to left effect.)
Second, you can use jquery animation with .show(), Example
You can combine these tricks to satisfied what you want.

How is this In-browser lightweight animation done?

I see a number of sites have auto-loading animation as soon as you scroll down to the particular part of the site with the animation - apple.com has it, most recently I found it on http://www.bugherd.com/features
I see a number of PNGs loaded in the web inspector but I can't determine how its being done.
it’s Matt (co-founder & designer # BugHerd) here :)
Really glad to hear you like the animations we put together on the features page. In order to achieve the effect we used the transit.js library: http://ricostacruz.com/jquery.transit/
It uses the same syntax as jQuery animations and uses the animation queue as well. I put together the animation by loading up all the images needed and then transitioning, hiding and showing as required.
Happy to answer any other questions you might have about how to implement this on your own site.
Cheers!
Also as an aside the animations on the Apple site are fairly complex, but there’s a pretty detailed run down of the techniques used to achieve their effects. It’s well beyond what we’re doing on BugHerd though :)
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
I'm not sure what you're talking about, but if you are referring to the animations Apple had when presenting the iPad, it's easy to do.
What you do is bind an event listener to the page/container scroll event. Then, check if your element is in view range, by comparing its top offset to the scroll height. If it's in view, call a function to animate the element. This can be done either by a single image sprite animating the background-offset, or an actual image sequence or even a canvas - your call.

Smooth vertical page scrolling using mouse wheel and scroll bar

I am playing around and trying to build a parallax website - yes, I know they are an annoying fad but I would still like to have a go. So, for inspiration, I have been looking at various examples of good parallax websites and came across this one: https://victoriabeckham.landrover.com/INT.
It has smooth scrolling using the mouse wheel, scrollbar, and anchor links. I have been searching for jQuery plugins that would achieve this effect but can only seem to find ones that use internal page links - anchor or ID's (detailed below) - but, not mouse wheel and scrollbar. There is a good chance that I am searching using the wrong keywords. Does anyone know the correct terminology to find these plugins or know any plugins that would achieve this effect?
On a side note, I am currently learning jQuery and Javascript but am in the very early stages - still trawling through codeacademy and not made it onto any real world code yet. So at the moment I am playing with plugins as a way of learning but hopefully in a few months I can build my own stuff!
Smooth scrolling to anchor tags or ID's:
http://archive.plugins.jquery.com/project/ScrollTo
http://jsfiddle.net/9Amdx/7/
http://arthurclemens.github.com/jquery-page-scroll-plugin/
http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
http://www.designova.net/scrollerbird/
http://chris-spittles.co.uk/?p=462
http://joelb.me/scrollpath/ (*courtesy of #DrunkRocketeer)
And, another example of a parallax website using a similar technique for scrolling:
http://www.ascensionlatorre.com
Try this one. https://nicescroll.areaaperta.com/
It has got
$().scrollTop()
jQuery event listener too so you can have scroll path configured with parallax script.
I think you have to combine several of these effects in order to make something that resembles the Landrover site. A Smooth scroll script, a scroll path script and a parallax script.
This is an interesting site for the path element of that website:
http://joelb.me/scrollpath/
Though the best way to find out how these sites work is to examine them! Some cool sites useing parallax:
http://www.awwwards.com/?s=parallax&post_type=all&search=Ok
I hope this was of some help/inspiration!

Jquery plugins - iphone scroll acceleration

Are there any jquery plugins that can simulate the acceleration on an iphone when scrolling - doesnt have to be exactly like it but anything remotely similar. I cant seem to find anything.
Along the same lines, are there any really, good examples of smooth javascript scrolling out there? Most javascript scrolling seems jittery in one way or another.
Hey, I've used iScroll in a previous project, it runs really smooth (particularly on the 3GS/4). There are several examples and and a demo on the site.
http://gsgd.co.uk/sandbox/jquery/easing/
try easing plugin. there are loads of different animation options.

Categories