Beautifully Autoscrolling the Page, Plus the "Spring" Effect - javascript

I would like to implement touch screen auto scrolling on my website. Examples of which can be seen in the interfaces Ubuntu and Windows 8.
Ubuntu:
Windows 8:
If you make a sharp scroll down the page, it will continue to scroll after you let go and gradually slow. And if the scrolling has reached the lower or upper limit, the page kind of "springs". I think this is a very interesting, and I am wondering how to implement it on an HTML page. Are there are ready-made solutions?

Does this look something like what you are looking for?
http://scripterlative.com/files/dragscroll.htm
It may not fit perfectly, but you might be able to customize it the way you want to.

My suggestion is use scroll.js. It has fantastic scrolling functionality. Use it, and you'll automatically get the sprint effect also.

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

Chat like scroll behaviour (ReactJs)

I am trying to implement a chat application, more precisely a scroll behavior for chat application. I think it's best described with a gif.
https://i.imgur.com/NnpMeOx.gif
As you can see, I want to support a few key features:
Scrolling is reversed so on page load, the messages start on the bottom along with the scrollbar
Chat is scrolled to the bottom when user types in a message. (this is easy, no need to pay attention to this part)
If new messages appears (pushed by websocket in real life) it shouldn't disrupt the existing scroll position, unless it's already at the bottom. Then it should scroll to reveal the message automatically.
So far I've implemented 2 solutions:
a) Display flex and flex-direction column-reverse on the scrollable element. This works beautifully out of a box, but only on chrome :( IE (and Edge) as well as firefox just ignores this totally. NOT A GOOD SOLUTION
b) I flipped the container with transform: scaleY(-1) then I reversed the messages and fliped every one of those with the same transform. The main obvious problem here is the scroll (mouse wheel and arrows) is reversed. I sort of fixed it, didn't manage smooth scroll (sucks) but yet again, Edge (and probably IE) just shows scrollbar as disabled. NOT A GOOD SOLUTION
I am really hoping to find somebody who can point me in the right direction because so far, my efforts while logically ok totally failed browser compatibility.
The code is on https://github.com/PeterKottas/react-bell-chat, it's react but tbh, that doesn't matter much as this seems more like a general web dev exercise.
P.S.: I can't use jQuery, hope that's fair. So either css or plain javascript. Like I've said, this doesn't have much to do with react
Well I got no replies and managed to fix it myself so I'll accept this in case it helps somebody in the future.
3rd and final solution:
I kept the direction of scrolling and didn't do any reversing at all. Instead I hooked into onScroll and wheel event, created a few callbacks and managed to mimic the behavior perfectly. You can find more details in the code on https://github.com/PeterKottas/react-bell-chat.

How to make scrolling smoother (not anchor links, just scrolling in general)

So I am working on a website about myself, because I want to become a freelancer some day and make websites for clients. I thought something like smooth scrolling would make the site look much cooler. I have looked at multiple jQuery plugins online, but they do not seem to give me the smooth animation I want.
DEMONSTRATION OF SMOOTH SCROLL I WANT -> http://bayshoresolutions.com
Please do not rate negatively unless you have left a comment telling me why so I can fix my post
I was able to find one by searching section scroll. Just to let you know this is considered bad UX design by many. Check out here: https://ux.stackexchange.com/questions/81721/is-using-pages-section-scrolling-good-for-ux
https://github.com/alvarotrigo/fullPage.js
http://alvarotrigo.com/fullPage/

Sliding panel for mobile page

I have a div which is mostly off page but uses translation on hover to display on the main page.
This is my site.
However, on mobile devices this isn't the best solution to display this div. Hover doesn't work well and I have to click often to get it to show up. I'm wondering if it's possible to do it like mobile applications where if I move the page to the right edge enough, this content will display or with a button. Something like this:
Any thoughts on if this is possible or how'd id solve this?
This pattern is called 'Off Canvas layout'. Documented (with some CSS) at http://jasonweaver.name/lab/offcanvas/
There are multiple implementations you could have a look at, perhaps start with this nice demo from Zurb: http://www.zurb.com/playground/off-canvas-layouts
As regards the use of hover, you're better off using a tap/click on both desktop and mobile for consistency. The 3-bar menu button is fairly universally understood these days.

How I can make mobile version of my website which will work in android , iphone,ipad?

I want to replicate a site for it's mobile version. The site have slider , simply header,footer and dropdown.
Are we able to make exact thing for mobile ( in my case I am talking about slider and drop-down made in jQuery).
What I want is make same feeling on mobile as we have for normal site. Like I see in Video example as people shown (demonstrate) for ipad,iphone that click on menu and page slide to right and something show as new page. I don't want this.
I want to choose the existing themes and color-scheme in mobile edition.
How I can do it.
for this we have something called as Responsive Web Design :)
you can have a look at here :
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
Another good place to start: http://html5boilerplate.com/
This topic is much more complicated than simply adding a few lines of code, but here's what I can offer:
If you want separate mobile and desktop (which I would suggest against) you're going to have to do some device sniffing. The easiest way would probably be to check screen size and redirect if it's under 320px or whatever size you decide on.
This will make your page load a little slower, because you're going to have to wait for the page to parse the screen size detecting script, check to see if their screen is too small, and then redirect. That's going to take a long time on a mobile device and you're not going to make any fans because of slow load time.
Responsive design is the best solution. I think you should take a step back and consider why you want your site to split into two different sites and if you are going to have the ability to constantly maintain both.
You need to use media-queries http://www.w3.org/TR/css3-mediaqueries/
with media queries u can set styles for misc devices and save mutual html...
Instead of responsive design, you can use a DDR to tailor your content to particular mobile devices: http://wurfl.sourceforge.net

Categories