Parallax-Animation Scrolling Effect - javascript

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

Related

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!

HTML5 / CSS3 animation

my goal is to build a short HTML/CSS3/JavaScript animation that will be plugged into an iPad web app. What I'm essentially after is a canvas (image) that will have several regions the user can tap to zoom to and get additional info in a popup (overlay box) for each.
I can code HTML/CSS prety well but my JavaScript skills a a bit behind.
I was wondering if there is any sort of software/toolkit that I can use to achieve what I'm after. I did look into Sencha Animator (the interractivity I'm after seems to be missing), PhoneGap and jQTouch dont have the animation capabilities (except for few sliding/fading transitions).
Any suggestions?
Indeed! Adobe released one in DW CS5. I've personally never tried it but here is the link to the announcement:
http://blogs.adobe.com/designandweb/2010/05/moving_the_web_forward.html

JavaScript libraries for touch screen devices

I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.

Styling of on-page scroll bars

I am working on a site to the specification of a designer who loves to put styled scroll bars on the page (not the main scroll bar on the right, but for various fixed-height divs on the page, when the content overflows).
I'm not asking if this practice is "right" or not, and I know it's generally accepted to be a bad idea in terms of user-experience, but that doesn't change what the client is now expecting to see on their site.
Does anyone know of any relatively bug free, cross browser methods for doing this. Examples I've seen so far include Skinned HTML Scrollbar, Ajaxian Webkit, and jScrollPane, but I'd like to hear from anyone who has achieved this functionality in the past before I implement one of these.
Thanks in advance.
I've used jQuery in the past when a client and their designer insisted in having customised scroll-bars. It's quite easy to stick a div on the side of a box and make it draggable between limits (and interpret the position to set the scroll offset).
But you also have to consider what happens if they want to scroll using the mousewheel, or middle-click. They're not blockers but you'll have to write listeners to update the scroll-bar position too.
Whether or not you should do it is a completely different question. You should certainly not just rely on your custom JS. Make the JS disable the scrollbar and paint all your controls using JS. If you don't do this, people with JS disabled/blocked won't be able to use your site.

Categories