Develop Reference

move images around in a google-like map

Before posting this question I did many tries and searched everywhere for alternatives, but I gave up and I'm asking here..
What is the easiest way to create an interactive map controlled by functions?
Here are details:
I have a div with fixed width/height, without a background, and I need to dynamically add things (images/text) inside of it, at any position, and they can also overlap each other if needed.
An example is better than thousand words:
- assuming the div is 500w 500h, I need to create an image at (200,200) with a size of 50x50
Here are the thousand words:
I tried with canvas, but it's too hard to remove something without touching the other things (for example if images #1 and #2 are overlapped and I want to delete the #1, I'll delete part of img #2 in the process. Of course the best thing would be to save things stored to when I need to delete something I can redraw all the rest, but it's a huge pain, if something easier exist would be better)
Tried also with http://leafletjs.com/index.html, but it seems too powerful to solve my problem, and I don't even know if it works without a background.
Maybe the best solution would be to use simple divs with good positioning, so I can change through functions their content easily, but I suck at div positioning.
Thank you to everyone that can help me :)

I really recommend the MapBox JavaScript API. It's a nifty utility that I have used in various instances. https://www.mapbox.com/blog/mapbox-javascript-api/ Extremely extendable API.

Polymer's Animated Pages used with Angularjs

I would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?

What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.

Achieving Horizontal Movement and Zoom UI Effect - possible jQuery plugin(?)

My inspiration is http://www.diesel.com/bags-female. Can anyone explain how I can achieve this effect?
I have started with this code:
$(document).ready(function(){
$('#background-thing').mousemove(function(e){
var mousePos = (e.pageX/$(window).width())*100;
$('#background-thing').css('backgroundPosition', mousePos+'% 0');
//alert(mousePos);
});
});
But it only pans the background image. I wish to have multiple links over the background image which are anchors and clicking on those images will make a zoom effect on that particular coordinate.
Should I rather look at a jQuery plugin? If so, what are your recommendations?

I've used skrollr in the past for quick implementations and it's served me quite well.
Here are some links:
https://github.com/Prinzhorn/skrollr
http://prinzhorn.github.io/skrollr/
Hope that helps, good luck!

I don't think you want or need any Jquery plugin for what you're doing.
That page you provided for reference uses css 3d transforms and default Jquery.
Here's the reference for that on W3schools: http://www.w3schools.com/css/css3_3dtransforms.asp
Specifically something like:
//clearly broken code used just for example
$(document).ready(function(){
$('#yourpagecontainer').on("click","a",function(){
$(this).css("transform", "scale3d("+x+","+y+","+z+")");
}
}
The code you've provided doesn't make it clear what exactly you have to far, but maybe you'd benefit from taking a look at this example: http://sarasoueidan.com/blog/windows8-animations/
It's not identical, but it is in the span of what you'd like to do.

I don't think your example strictly fits the definition of "parallax" like this site. I'm pretty sure you could achieve something similar to your example with:
Changing the CSS3 background size and position on click (as explain in this question and here).
Applying a partially transparent .png with a fully transparent "window" in the center over the entire window on click to achieve that same blurred/focus look. You can apply different filters on the partially transparent areas to get something more artistic looking. Inkscape does this quite well and it is free ;)
This is not a cross browser solution, however. Everybody say "Internet Explorer" (8 and below). For 9 and above make sure you have <!DOCTYPE html /> otherwise your CSS3 becomes CSSFAIL.
Fun project, enjoy :)

Jquery Parallax Scrolling effect - Multi directional

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

entire page image gallery load/resize technique

i'm curious about an effect i've seen on a lot of different wordpress powered sites. i think it might be a plugin, but i'm not entirely sure.
it's basically a page of images of different sizes, and they fit together based on how wide your window is. they also rearrange very stylishly when you resize your window.
the images also load as you scroll down, in sort of an infitie scroll way.
here is a perfect example of what i'm talking about... http://www.someoddpilot.com/work/projects/
how are they doing that? i would like to achieve a similiar effect, but i'm not sure where to begin. any insight would be super helpful, i'm somewhat new at this. thanks!

There are several techniques... I didn't look to see what they are using specifically, but since you mention jQuery, there is a plugin you should check out: Isotope