Develop Reference

Is it possible to make smooth page navigation transitions in Wicket?

I would like to make some smooth transitions between pages navigation in Wicket Java framework. Is it possible with Wicket tools, javascript and css? I cant find a way to do that.
Thanks for any answer.

Wicket does not provide solutions for this. Most of the Wicket applications use either full page re-remder/redirect or Ajax for updating just part(s) of the page, but not the whole body.
I'd suggest you to try with CSS Keyframes. The idea is to add CSS class to the body of your pages on these two JS events: beforeunload and DOMContentLoaded (aka domready). When beforeunload is fired you need to remove fade-in and add fade-out CSS class. And do the opposite for DOMContentLoaded.
The CSS will look like:
/* make keyframes that tell the start state and the end state of our object */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
I am not very good in CSS so better ask Google for more info.

Unicef web animations

Can someone tell me anything about gate animation and zoom page transition from this Unicef web, I want to try to make this cool animation. At least give me "keyword" how to find it. Are those made with html5 ?

In the Unicef animation the developers are using a mix approach of JavaScript using GSAP JS library and CSS Transitions.
You can have a looks at their code in bundle.js and screen.css files using Chrome developer tools.
Generally you can use:
CSS Keyframe Animation
CSS Transitions
JavaScript vanilla or some libraries
Web Animation API
to animate DOM elements in your HTML page.
To help you to get started I have created a simple scale/zoom effect using CSS Keyframe Animation, but you can reach a similar effect using JavaScript libraries as jQuery, GSAP, Velocity or others.
For more complex animations I would suggest to use a specialized JS library as GSAP, if instead you need more simple, eyes catching animations you could consider also using some pre-made effects:
animate.css (CSS Keyframe Animation)
animatelo.js (Web Animation API) - disclaim I have created this library :)
It really depends of the complexity of you animation and your skill set.
#mario {
background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
background-repeat: no-repeat;
width: 375px;
height: 375px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: leaves 5s ease-in-out infinite alternate;
animation: marioAnim 5s ease-in-out infinite alternate;
}
#-webkit-keyframes marioAnim {
0% {
-webkit-transform: scale(1.0);
}
100% {
-webkit-transform: scale(2.0);
}
}
#keyframes leaves {
0% {
transform: scale(1.0);
}
100% {
transform: scale(2.0);
}
}
<div id="mario"></div>

CSS: Crossfade animations?

I'm actually expecting the answer to this to be a simple and straight "NO", but I have to ask, maybe someone even already did a dirty workaround.
I made a character using CSS3 only and added an animation that slowly shakes his head. This can be seen as the idle animation. Now I added a specific talk animation (actually seperate, it's aplied to a different <div>) where he holds still and one where he shakes his head strongly. I apply the class .shakehead to the wrapper element via JavaScript at certain events.
#keyframes head-swing {
0% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
100% {
transform: rotate(-2deg);
}
}
.head {
animation: head-swing 7s infinite ease-in-out;
}
.shake .head {
animation: head-swing 1s infinite ease-in-out;
}
Now, when I simply suddenly apply the class to the wrapper, the probability of changing in the middle of the animation and creating an ugly break is pretty high, so the best thing to do would be crossfading both animations. I want to avoid to wait for the animation end via JS, because seven seconds is a little much to wait for.
(my usecase)
If you don't know what I mean, watch this Unity3D tutorial for a minute.
Is such a crossfade in any way possible? (Probably NO)

A crossfade is possible with the opacity poperty. You can use multiple poperties in the same keyframe animation (and I'm pretty surprised that a lot of people don't know that), so don't be afraid to write height changes with of you opacity changes!.
You should also put your "moving mouth" into the same div than you first, at the exact same position and do your crossfade a bit like this.
#keyframes crossfade1 { /*applied on the "first" mouth (still)*/
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes crossfade2 { /*applied on the "second" mouth (moving) [the height is an exemple]*/
0% {
opacity: 0;
height: 3px /*the mouth is closed*/
}
50% {
opacity: 1;
height: 20px /*the mouth is open*/
}
100% {
opacity: 0;
height: 20px /*the mouth is closed*/
}
}
Put the duration as the same for the two keyframe animation and voilà! You have your perfect crossfade without even using javascript!
What do you think?

Create the effect on this Apple "Your Verse" page?

Can anyone point me in the right direction of a JS library or alike with regards to creating the water/bubble effect on this Apple webpage.
I think it could have been done with a combination of parallax but the 'particles' appear as if they are a looping video rather than reacting to scrolling of the page.
The image below maybe a little too small, but it depicts what I am trying to accomplish.

There are a bunch of different parallax libraries out there (this is decent). Regarding the bubble effect, this is actually achieved pretty simply using this image and some CSS (no JavaScript required!). This jsFiddle has only the dust particles so you can see how it's put together.
The div has a class of .dust which positions it absolutely and sorts the layout:
.dust {
position:absolute; top:0; left:0;
width:100%; height:100%;
background-size:50% auto;
background-position:center center;
transform-origin:bottom center;
}
Then there are .dust-small and .dust-medium, which have the aforementioned background image, and some CSS animations applied. One such animation used:
#keyframes dustSmallAnim {
0% { opacity:0; transform:translate3d(-2%,0,0) scale(1.025); }
12.5% { opacity:0.4; transform:translate3d(-1.5%,0,0) scale(1.025); }
25% { opacity:0.75; transform:translate3d(-1%,0,0) scale(1.05); }
37.5% { opacity:0.4; transform:translate3d(-.5%,0,0) scale(1.075); }
50% { opacity:0.2; transform:translate3d(0,0,0) scale(1.1); }
62.5% { opacity:0.4; transform:translate3d(.5%,0,0) scale(1.125); }
75% { opacity:0.75; transform:translate3d(1%,0,0) scale(1.15); }
87.5% { opacity:0.4; transform:translate3d(1.5%,0,0) scale(1.175); }
100% { opacity:0; transform:translate3d(2%,0,0) scale(1.2); }
}
So, fairly simple CSS, and older browsers just fall back to a static background image. You should be able to play around with the general idea to achieve the effect you want.
I've left out vendor prefixes for this example, but you'll obviously need those.

check this out
you can always place the div where you want to and set the necessary fields in the script like count and size of the bubble.

Have an element with 2 CSS Animations executing at the same time

I am experimenting with WebKits animations.
Is it possible for a HTML element to have more than one animation executing at the same time?
For example:
#-webkit-keyframes FADE
{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes TRICKY
{
0% {
-webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
}
50% {
-webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
}
75% {
-webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
}
100% {
-webkit-transform: translate(0px,0) rotate(0) skew(0,0);
}
}
// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
-Webkit-animation-name: FADE TRICKY;
-Webkit-animation-duration: 5s 2.5s;
}
The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.
Is this possible...
//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
#-webkit-keyframes FADETRICKY
{
FADE TRICKY;
}

#myEle {
-Webkit-animation-name: FADE,TRICKY;
-Webkit-animation-duration: 5s,2.5s;
}
Use ',' no space. I was in Chrome version 16.0.899.0 to try.

You'll have to manually merge the animations, I think.
If you need to use something like this in several places I'd take a look at Less CSS or similar, so that you can use "mixins" (e.g. functions) to generate css. I use it for abstracting vendor specific css so that in the main .less file 5 or 6 lines of browser specific code can be replaced by one method.