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
Related
I have an image manager that shows a fixed sized grid of images. The thumbnails are relatively small already so I can't really make them smaller. I implemented lazy loading and using a debounce function to check if the images on in the visible region. This increased the speed of launching my image manager. However, if I scroll while the new batch of images are being loaded, the scrolling becomes very slow. Is there anyway around this or to further optimize loading images?
EDIT:
Is there a way to prevent scrolling while a new batch of images are coming in? Kind of like how Youtube just keeps bouncing when we try to scroll to see more comments while they are still being loaded?
Try not to load all the images at once (which I guess you've implemented with Lazy loading), I'm aware that the users online have a high tendency to scroll fast.
I would suggest, few things here:
First
Implementing the Lazy loading in a correct way is essential. here is a list of few best techniques, make sure which works best for you.
You've mentioned, that the thumbnails are relatively small, however I assume only specifying smaller dimensions is not sufficient, I hope you have covered this ground, Else maintain two folder one for Actual images and another for Thumbnails on your hosting server.
Even though we take utmost care, users upload tons of heavy images on our server, if that is the case, you need to resize the images on client end and then upload on the server, one copy in Actual images and another for Thumbnails
If you are talking about product images, keep the PNGs, Why, because they are far better then BMPs and JPGs. Also you can compress them with online tools like https://tinypng.com/ OR with softwares like https://pngquant.org/
Hope this helps resolve your issue, coz it did to resolve mine.
--N Baua
It turns out the slow scrolling was due to me calling getBoundingClientRect() to find new visible images while there were some images still being loaded. That caused a reflow which bogged everything down.
I changed it to load images in batches so that getBoundingClientRect() isnt called when there are images being loaded.
I have a website i'm designing right now, and i'm new to using JQuery. I'm noticing on my slick-carousel slider that the slides and styles adjust them self's while the user is loading the page for the first time in the browser. I have a few media-queries in place for different resolutions, and it seems that it has to adjust.
Is this because of the way i wrote the code, or is this something that happens with Javascript? What's the best practice to avoid this?
Here is the site link - Advanced Litho Website Re-design
Look at this URL: https://gtmetrix.com/reports/www.advancedlitho.com/aCuNhAl7
Here you can see that your images are huge in size. GTMetrix is showing that scaling your images properly can give you a boost of 1.9MB
Do whatever is said on the test and you should be fine.
I have been search for hours for a jquery type plugin that is responsive and also has proper swipe animation during gesture.
http://www.photoswipe.com/ is 99% there except that it dosent support single image lightbox mode, its geared towards grouping images into swipable galleries, which it does brilliantly.
However now and then I may want a few images on a page to have no relation to each other. Id rather have a default class, that when used all images opened up in a single image lightbox. Photoswipe automatically groups any images given the same class.
If I was able to set an option with this plugin to hide the prev/next images on a call, then it would have been perfect.
Important though, is that the plugin must use full screen like photoswipe does. So many responsive plugins seem to waiste the screen with unrequired image chrome. The intended slide show or light box should be like viewing a gallery on a smartphone - again photoswipe does this. its only fall back in being able to have non related instances.
There are a couple out there that appear to be inline with what you want. I never understood why some developers create "responsive" galleries, but waste so much space with padding or decretive chrome elements.
I was thinking of using PhotoSwipe, but the developers stopped supporting it and recently threw it out there for the open source community to maintain. Kind of turned me off during the transition.
Here are a few others I came across that I'm considering myself.
Need higher rep to post more links....so some are just cut and paste. Sorry.
JuiceBox
(http://juicebox.net/)
SwipeBox
(http://brutaldesign.github.io/swipebox/)
(full disclosure...I have an affiliate code for the next links. If you want to remove them, just don't add the "ref". If this helps, I appreciate the clicks)
Touch N Swipe
(http://codecanyon.net/item/touch-n-swipe-image-gallery/5886023?ref=bmoe)
Flare (wow)
(http://codecanyon.net/item/flare-responsive-mobileoptimized-lightbox-plugin/2392703?ref=bmoe)
I have a webpage with a news feed. And the news feed has a bunch of images stacked vertically. New images populate the page as the user scrolls downwards.
Things start off fast and smooth, but as more images load (and more scrolling down) the page starts to get really slow and choppy. Scrolling becomes super unsmooth.
What's the problem? And how can I fix this?
Try using LazyLoad for JQuery (link). It doesn't load images until you scroll down, so perfect for your use case.
How big are the images you are using? You should try to make image sizes as small as possible.
You could try pre-loading the images in JavaScript (Image object). That way, when the user scrolls down, the images are already loaded (or partly loaded).
Maybe there's a bug in your javascript.
If not, you could try to delete the newest pictures when older ones are loaded.
I'm working on a web page with an animated background. I'm using MooTools to crossfade a series of images that are of a decent size (like 1100px x 750px).
I think since the browser is having to do so much rendering work crossfading these images, when you make the page fullscreen, the crossfade animation will become choppy.
In looking for ways to overcome this, I'm already planning on rewriting the slideshow in the most efficient JavaScript I can muster.
Does anyone have any other ideas on how to have the animated background run smoothly at large browser window sizes?
Crossfade effect is expensive and you'll get very low frames per second at that resolution. Instead of a crossfade I'd try a slide up/down/left/right or wipe effect. I'm a big fan of the jQuery tools Scrollable plugin.
AS you said yourself, this is probably a rendering issue, and not really an issue with the speed of your javascript, especially since there is a performance difference between fullscreen and non-fuulscreen.
I doubt optimizing your js will have any real effect.