Greeting's and thanks for your time.
I just started a new job building a new marketing site for a headphone company. I'am still a student with a year left and I trying to figure out the best way to proceed with a challenge I've been given for this site.
The site is a parallax scrolling site, with movement horizontally and vertically.
The area I need advice on is with the site being a scrolling site there is no natural point to do a page refresh. We have near 25 products, each with several variations totally over 250 images. My boss wants the site to scroll as seamlessly as possible, i.e. the user will move left/right to see the products, then the user moves up/down to see the variations of that particular product.
What would be the most effective means to load these images?
My first thought was to have the pre-loader begin loading everything after the home pages loads. This seems like the easiest solution but probably less effective?
My next thought was to have the scroll trigger additional pre-loader events? I've looked into this and I could use some advice on how to best accomplish this? I'am trying to avoid, within reason, the user seeing a loading gif.
Haven't had a next thought? but please let me in on any other process that might be better.
I'am not looking for an explicit answer, although if you want to provide one... I'am really just looking for advice and hopefully some articles that can get things going.
I was in a similar situation, although my parallax site was just for experiment/fun, but I found https://github.com/protonet/jquery.inview/ to be a possible solution. A loader for the first sections then after that inview would load in the next ones on scroll.
Related
I'm trying to work with Meteor, React and FlowRouter.
I didn't work with animation in Meteor yet and I don't know where to start, but..
I am really impressed by the animation on this site (yeah, I don't only searching there hah :)
When we press to the menu icon then: all the current layout moves to the right and takes the half of the screen. on the left half of the screen me can see simple list menu. all this behavior happens really smoothly.
That is the question.
What technologies to use to make animation effects like that? Or may be you know how exactly to make this effect?? Actually I want to find the way make something like this using Meteor and React.
Very thank you for your answers!
Update
What do you know about Famo.us?
http://celebratedesign.org/connect Browsing through sites I came across this page that has an interesting affect that I want to try on my own website. When the user scrolls down there is a diagonal slicing effect that goes across the page. I can't seem to access the affect through developer tools on any browser I use I have no idea what to call it when googling. Does anyone know what this effect is called and how it was implemented in the code? Is it a plugin or is it just an animation? Please let me know if I need to be more clear.
That is not a plugin, that appears to be animated svg, possibly canvas.
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
This is my first time asking questions here and I have just started learning jQuery mobile so if it is not quite relevant or if it is just really obvious I apologize in advance.
What I am trying to do is build a mobile site for an online catalog for lots of books.
The original website has a very sophisticated way of filtering and sorting the search results based on the user's input and preference so unless it's absolutely necessary, I would really like to keep the original functionality of the website.
I was thinking maybe I can create a "mask" that looks like a mobile site to cover the real content; and whatever the user requests, I will go "underneath" the mask, do the search and when the data is loaded in the original website, I will then present them in a more mobile-friendly way.
So here is my question:
Is it possible to somehow include/embed a mobile site in the original html?
If so, could you please give me a few hints (books, articles, tutorials, anything) as to how I can approach this?
If not, could you please tell me how I should make the mobile site without having to re-create all the nice functionality that original website already has?
Thank you so much! :)
You could do this but you shouldn't. Mobile websites are optimized for mobile users. Not only as layout but also in loading weight. The direction you are heading you end up with a regular side (probably big in load) and add an overlay (extra load) to rebuild the layout (CPU heavy). So it's not the right way. A better solution is to create a optimized layout for mobile users only.
I have some separately made HTML pages that id like to slide horizontally between.
Ive looked everywhere but I havent found exactly what Im looking for. Can anyone help?
I'm not sure if there is a plugin written for a fully general solution for completely different pages. It would need some kind of an AJAX load, and a nice transition with possible history manipulation.
I don't know how well it suits your needs, but the old Google HTML5 slide template had this functionality.
There are limitations on what you can do with it, but they provide convenient keyboard and mouse navigation.