Develop Reference

chessboardjs how to set black to move first?

I'm using the chessboardjs JavaScript library.
I load the position with the following code:
var board = new ChessBoard('board');
board.start(false);
var currentPosition = FENSTRING; //'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R';
board.position(currentPosition, false);
Now I want black to move first.
How can I do this ? I read all the documentation on http://www.chessboardjs.com and can not find a way to tell the board so black must move first.

chessboardjs is "just a board" and has no knowledge of the game of chess. ie: who's turn it is, what moves are legal, etc
(disclaimer: I am the author of chessboardjs)

That's against the very rule of the game, Chess. Only white makes the first move, and that is how it should be, because that's how it is designed to be.
Black never makes the first move.
You could however alter the images of the pieces as it is how they're managed in the link you've given, and try to make it look like Black is making the first move.

How to trigger an SVG animation on scroll?

So I've finally cracked SVG animations (totally through cheating) and like most sites that use them if they're halfway down the page they begin automatically and you miss it, so how is it possible to trigger the animation on scroll to that div container?
Any help would be great,
Thanks!

You can use
beginElement() function to starts animations manually.
for this to work, you have to set the begin attribute of animate element to indefinite
a simple example would be something like
window.onscroll = function(){
var anime= document.getElementsByTagName('animate')[0];
// check for the amount of scroll
anime.beginElement();
}
You could also make use of beginElementAt()
read more about svg Animation Timing Control
side note: Can't be more accurate since you haven't shared much info or code samples, and not sure what you meant by 'cheating'

How to make HTML elements react on mouse movements?

my question is how can I add specific movement to x-y axis for an HTML element according to mouse movements.
Look at the site here and scroll to second slide:
http://community.saucony.com/kinvara3/
How can i achieve such effect!?

If you're going to write the library-free version, you will need to start with the following:
Learn DOM-manipulation.
var myEl = document.querySelector("#my-el");
Learn the <element>.style interface.
myEl.style.position = "absolute";
Learn the CSS properties, their values and how to read/use them from the style interface.
myEl.style.left = 10 + "px";
You'll need to understand the following CSS properties at a minimum:
"display"
"position"
"top"
"left"
"z-index"
Learn how to parse numbers from strings, properly, in JS.
...this will be unimportant, working with the mouse,
but very important, working with the DOM.
Learn how to write event-handlers.
window.addEventListener("mousemove", function (evt) {/*mousemove event object*/});
Learn the properties of event-objects (specifically the event-types that are important, like mouse, keyboard, touch).
Learn how to manage events, and control the number/frequency of operations, based on an ideal framerate, when the browser won't do it for you.
Learn how to make all of these things happen in a cross-browser, IE8+ way.
Learn a little linear-algebra (honestly, learning enough of it to understand an inverted-axis scaled-parallax is just a tiny bit harder than Grade 6 geometry.

You can get a similar effect CSS only, no JS needed!
You can see an example here: Pure CSS 3D Meninas, by Román Cortés. In his blog, there is also the explanation.
Basically, you have to split the target element in small elements, and on hover, set the position of different background layers according to your trigonometric calculations.
From his explanation,
There are 80 vertical hover elements of 5*455 pixels each, covering
the full effect. Each hover element contains inside elements to define
every layer position, the background image and the lateral background
image. When the hover element is not active (without the mouse over
it), all is inside elements showing images are hidden, with display:
none.
When the hover element is active, the images are set to display:
block, and the position of these are set. These positions have been
calculated and are written in the CSS code for each layer and each of
the 80 vertical hover elements. This is what does the magic.

div with rounded forms

I'm trying to create a web design and there are a bit strange forms, something like this:
when the user hover on 1 section the background should change only for it:
the same for the second and third one:
Hope I'm clear...
I have no idea what technology should I use in order to achieve this affect. Can anyone please help?

Could use absolutely positioned pngs with image replacement on hover, then throw a rectangular div inside there

There are two ways:
use SVG to draw the shapes, with a fallback for older versions of IE.
Use background images. on normal shaped divs.

I would go with three separate images, each with the whole background and one "selected" area - on hovering a div just replace the background to the one having that div as "selected".
Quick example for the JS code:
function ReplaceBg(oDiv, num) {
oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)";
}
function RestoreBg(oDiv) {
oDiv.parentNode.style.backgroundImage = "url(images/background.png)";
}
And the HTML:
<div style="background-image: url(images/background.png);">
<div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div>
<div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div>
<div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div>
</div>
Hope the idea is clear enough..

There is a CSS3 syntax boreder-radius and you can do this with it, but you had do the work here , I mean you had set the random pixels and look for the one which suits best. For example here it is -- http://jsfiddle.net/divinemamgai/Ld7He/
OR
Maybe you should keep the main background image as white for images 1 and 3 and for image 2 use png
based background-image and change it on mouseover using Jquery and don't forget to keep the highest z-index for image 2.
Hope this helps you.

May this help http://jsfiddle.net/JeaffreyGilbert/G3VG7/

Animating Background Image

I Like using Jquery and its companion Jquery Ui but can not find a way to animate background image over a certain period of time like 5 seconds.
I can not do something like:
$('sampleelement').animate({'background-image':'url(hello.jpg)'},5000);
Any ideas??

This is not possible like this. Css does not allow for backgound image manipulation like this. You should put in a div with the background behind your content and fade that in:
<div id='background_img' style='display:none; position:absolute;'><!-- position me behind the content!--><img ... /></div>
<div id='content'>YDADA</div>
$('#background_img').fadeIn(5000);

Use the jQuery Background-Position Animations plugin. See the demo.

Why don't you use an animated GIF?

Pim Jager's approach is about the closest you will get without an animated gif.

You could create multiple images and just replace one with another using setTimeout. It's kind of like emulating .gif, just gives more flexibility and quality.

What I did on Cheer Us Up is used basic javascript to change the background image --
$(function(){
curr = 0;
setTimout(changeBg(),200);
});
function changeBg() {
curr++;
document.body.style.backgroundPosition = curr + 20;
}
That is the basic idea. I didn't use jquery because I just wanted it to slowly slide by.

This is what you need: http://www.ovalpixels.com/bgImageTransition/