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?
Related
Oculus Connect 3
I know this site was built on react. I want to know more about how to get that background animation and mouse over effect. It's simply awesome to experience. Based on this I will decide to go with React or Angular 2.
If you open your browser's inspection tool (almost always F12) you can see the layout of the webpage. It contains a canvas element with the id "grid". The animation is made using this.
The animation itself looks like a simple node graph, where if you move your cursor the nodes close to the cursor try to stay away from it, thus creating an explosion-like effect.
If your cursor stays fix for 2-3 seconds, the animation starts using a point going randomly across the page instead.
I doubt this animation uses too much of any of the libraries you mentioned in your question, thus deciding which one of these you will be using based on this demo (which let's be honest, max 200 lines of vanilla JavaScript) is like deciding what you eat for breakfast based on the food statistics of Mongolia.
And also, animations like this are what scares off most users. I don't think you can show me any big multimedia or social network site, which has animation close to this.
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.
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
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.
So, recently I have been trying to build a user interface form builder that is almost entirely drag and drop. Kind of like Dreamweaver or visual studios I suppose. You guys can see it for yourselves HERE! I am trying to get a right-click menu thing going, however upon getting this working, I realized that it really conflicted with both the draggable and resizable methods. I don't have to right click at all, however when I go to resize or drag, it won't let me stop it. My cursor gets stuck either resizing or dragging, and requires vigorous clicking and shaking to free it. So, I'm assuming that I need a different plugin. Does anybody know of a stress free simple right-click menu that is hopefully compatible with jquery ui? I've tried google but most of them are simply a different version of the one I've already been using.
My second question is much more vague. As I previously mentioned, I'm trying to make a form builder. I'm wondering what the best way to go about this is as I feel sort of lost. My biggest problems right now are figuring out how I'm going to parse everything into code and export it. Does anybody know of anyone else who has attempted this or something similar? Is there any sort of guide?
I know the second questions has potential to be rather annoying, so feel free to only focus on the first one. Any help is appreciated, and I thank everybody who helps me.
EDIT: Just realized that you guys may not know how to use the builder. So far, all you can do is drag panels out onto the building space, and then drag tables within the panels. You can resize the building space, and panels vertically, and you can resize tables both vertically and horizontally. You can move panels and tables within their parent elements. Right click a panel or table for the contextmenu.
EDIT: So I think I found a context menu that will suffice, here it is. So, I guess that only leaves giving me advice on how to go about constructing this form builder.