I remember seeing this on Ajaxian and a couple other sites but I never bookmarked it, now i can't find it again. It's a javascript library that allows you to move your mouse over an image that's been chopped into layers and change perspective. Any links would be appreciated.
Are you talking about parallax scrolling?
http://webdev.stephband.info/parallax.html
Related
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
I am developing a website using parallax. Just a brief note on what I did so far.
I used the skrollr plugin for generating the parallax effect. With this plugin I was successfully able to move elements with different scroll speeds. However, there are a few major issues I really to resolve.
Given your understanding and guidance I look forward to get through them.
Here is what I am trying to address:
1) The site that I developed is not responsive with parallax. Data attributes for elements are written inline (and thats how so far I think they are written: inline). So because of that even on screen resize, the inline styling of data attributes remains intact. Hence, the responsive stuff for parallax (on desktop version) is not able to produce same effect on mobile versions.
2) I checked the sony website. Link : http://www.sony.com/be-moved/
They have used parallax and the site is responsive.
Parallax websites are based more on the imagery content. So, how does the site load faster when the images are of huge sizes. (Running into MBs). The sony website has very heavy images (size running into MBs). How do images of such heavy sizes load so fast?
3) Again, coming back to the sony website. On scrolling the user is shown various perspectives / angles of sony products. So, how are the multiple perspectives of every product captured for scrolling.
How is such precise sequential image with varying perspective for every product shown on scroll?
Its the entire background image that changes perspective. So, how is that done? Thats not just plain parallax, right?
I am mentioning this site because its implemented in a differenet way from other simple parallax websites. Sony's implementation is what I am interested in!
4) What would be best to do? Changing background images on scroll(like the way its done on sony) or changing the position of single elements using data attributes?. (like its done on www.numero10.ch)
I have been asked to implement parallax in two ways:
a) only move the elements within the background. Like if its a sky image with two clouds on the right. Then just consider moving the two clouds to the left on scroll.
or
b) Have different background images with the two right clouds moving to the left. So, that means I will have a volley of images for just moving the clouds from right to left; with every image having two clouds shifting towards left by pixel positions.
Looking forward for a reply. :)
Thanks for your patient reading.
I think this will lead you to the right direction: https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
It explains in detail exactly how the Be Moved website is constructed.
2) I believe they use something called "Lazy Loading" which is displaying a "fake" lighter image until all the HTML,CSS,JS is loaded to then load the real images and replace them.
3) That is not mere parallax , they are using the canvas element ( How exactly I don't know but check the page source )
4) It is better to leave an image as a fixed background and work with smaller elements.
I think that site is not just parallax layered scrolling, It is a combination of a sequence of video clips triggered on scrolling. I have not inspected the element of site but I think so. But site is loading tremendously fast compared to other such sites because of your cache in your system and implementation of lighter images in the starting and heavier images at last
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.
Before you tune out and label this as a dreadful question, please listen, I am aware that there are many jQuery plugins that flip images / content. My problem however involves something a little more difficult.
My problem is that a client wants their logo to constantly flip at a slow rate (this is not much of a problem) but when the logo is flipped halfway, instead of the image having 0 width they want the logo to appear a little "3D" so that when you are viewing it head on, it actually has a width.
I've googled around a bit but really can't seem to find a plug-in that achieves this, is it even possible?
If you're having trouble visualising what I mean when I say flip, see this demo
In the end we gave up on a JavaScript solution (it was going to be near impossible to have a reasonable cross browser solution)
So we ended up using jquery reel to accomplish this (why we didn't think of sprites earlier I'll never know!)
I have found some 3D Flipping image examples, so please try for it.
http://jquery.vostrel.cz/reel
http://www.360-javascriptviewer.com/learning-centre/code-examples/multiple-360-images-page.html
http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/
if you wan to create codebins for it then click on link http://codebins.com/
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.