The new icloud.com site was recently released and there is a neat effect that I would like to try and imitate on a project I'm working on.
If you visit https://www.icloud.com/#calendar and login, you will see a loading gif for a brief moment and then the calendar app scale outwards to the edge of the screen.
Here's what I'm interested in learning:
What would you call this effect?
Can someone discuss the mechanics of how this might be implemented in AngularJS (or a similar framework), more specifically, the page structure, how the new content is being loaded, how the transition is being applied, etc
Examples, links, or other resources would be much appreciated
Not quite sure how to call this effect (enter the scene or scale maybe) but after a quick look it appears that the website is using a mix of absolute positioning, opacity and -webkit-transform.
If you inspect the page you will see that both opacity and -webkit-transform:scale() are incremented with some javascript function (appears to be done by the _calculateTransforms function of javascript-packed.js). At the beginning of the effect opacity starts at 0 and end at 1. webkit-transform starts with scale(0.9) and end at scale(1). Please note that the animated div is already present in the DOM but invisble when the effect start.
Finally I think ngAnimate could be a good candidate to mimic this effect (see here for more details)
Related
I would like to set up animations of appearance once the page loaded. The problem is that before the CSS is loaded the elements arrive suddenly, and finally, once I have all that is loaded I have my animation that starts. It's not very cool visually.
The solution that I came up with defaults opacity on the container! Not sure, The problem is that if the browser does not support animations, the user will see the site with an opacity of 0. In other words, he will not see anything.
So are there ways to do it?
PS: I tried a lot of searches on Google without ever finding the answer to my question, maybe I have not used the right terms.
Keeping browser compatibility in mind is very important. However, your desired result can be achieved with CSS Animations and little stress: https://caniuse.com/#feat=css-animation.
If you provide some HTML and CSS a more specific answer could be provided. But, I would recommend defining keyframes for each element you want to animate (several could use the same one if desired) and use this for a one time animation at site load. No JS necessary.
What's the best way of handling animations/transitions in Meteor, e.g having a fadeIn when a new item appears rather than it just appearing
As David Weldon mentioned, Meteor is going to be adding some support for UI hooks in 0.8.2 and they will probably make it out into supported APIs by 1.0.
The original thread is here: https://groups.google.com/forum/#!topic/meteor-core/1kUoG2mcaRw
Here are a few examples, including one I'm particularly happy with:
https://github.com/mizzao/meteor-animated-each, demo at http://animated-each.meteor.com/
https://github.com/percolatestudio/transition-helper
The first example causes items in a long scrollable container to fade in/out when added/deleted, and adjusts the scroll position so that other people who are scrolled to a different position in the container don't see a jump in their view.
in a project where I need to build something like the famous parallax-powered Mario Kart Wii Experience site, which also comes with horizontal and vertical scroll (if you haven't seen it, here it is: http://www.nintendo.com.au/gamesites/mariokartwii/#home)
For the scrolling effect, I grabbed the JQuery Scroll Path plugin (website here: http://joelb.me/scrollpath/), and it seems to suit my needs concerning the free scrolling.
The problem comes when I try to include some plugin to generate the parallax effect. I tried several plugins (including Stellar.js, jInvertScroll, Parallax.js, Parallax-JS), but none of them seem to work properly. I assume that there's some kind of relationship between the custom scroll that comes with the Scroll Path plugin and the need of the parallax plugins of working with the navigator scroll to make the effect work.
I searched in Google for some similar situation (i.e., implementing Scroll Path with some parallax plugin) but I didn't find anyone in my current situation, and it seems that the Scroll Path plugin isn't maintained anymore.
Any idea for making it work would be appreciated!
PS: Sorry for the grammar mistakes, I'm still in process of learning english.
To make 2 plugins working together you should understand how they work. Parallax effect is achieved with few layers that are moved with different speed - the closest to you moves fastest, the most distant moves slowest. Most of the parallax-effect plugins are based on scrollTop calculation - i.e. layers are moved depending on current scroll offset multiplied by delta-value (which differs depending on layer position).
In your case you should connect jQuery ScrollPath scroll event to parallax plugin. In ScrollPath you should generate scroll event (that will be handled by parallax plugin) in function scrollToStep (look at row 490 in jquery.scrollpath.js). To make calculations simplier you can use 'top' value applied to scrollbar * some delta (you should pick out delta value by yourself). Then in parallax plugin you should modify event handler that applies parallax effect from scroll/mousewheel to event you generate in ScrollPath plugin.
To connect 2 plugins together you should modify their code which means that you won't be able to easily update these plugins to newer version. You should make comments to all your changes in order to reapply them if plugins will be updated in future.
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
I'm looking for a JavaScript library, pure JS or JQuery-based, that will allow me to create a slider similar to AnythingSlider or http://basic-slider.com/demos/. The most important feature I'm looking for is the ability to dynamically append new slides and then trigger a transition to it. The ability to transition to any slide is also important.
Most libraries I've investigated require that you append the slide to an element then retrigger the slider. This is fine however most scripts I've tested change the current slide position or there's a noticeable change in the elements on screen that disrupt the user experience.
Thanks.
I'm a personal fan of bx-slider. It's pretty basic, but it works really well. http://www.bxslider.com/
It just requires a basic div set up, and it's a plugin, so just call it from $('#myID').bxSlider();
Have you taken a look at the Nivo Slider? I have used this before and have never seen the problem you are describing (with retriggering the slider).