I'm trying to figure out what is the best way to begin creating an effect like (https://howifight.53.com) where the background is scrollable/draggable in all directions.
I know the technology behind this is pixi.js however, I can't seem to dig out how this effect is achieved. Any pointers in a good direction would be awesome.
First, you need to set up the page and styles.
You need a containing element to contain the HTML you're moving around (using overflow:hidden). Then you need an element within that to actually move around with JavaScript.
Then you need to implement some drag/drop functionality. Capture mousedown, then capture mousemove and update on each requestAnimationFrame, then stop dragging with mouseup is triggered.
That's a very basic overview, but I've mocked up an example for you to look at: jsFiddle. Feel free to ask any questions.
Related
I'm trying to do a menu of sorts with a d3.js treemap. It mostly works, but I'm having a few glitches that I can't pinpoint.
Basically, sometimes my chart doesn't zoom correctly and instead of seeing the children take the whole SVG area, they show up "unzoomed".
I suspect it must have something to do with the animation's timing vs. some data manipulation for hiding/showing the different nodes, but can't actually figure it out. Other thing I thought might be borking up the behavior relates to the click events being registered by both "parent" and "children" nodes.
I have a similar example setup in JSBIN.
So, I was wondering how I could register/unregister click events in the parent/child nodes on zoom - if that's even the problem - and also if there was a simpler or less-error prone way to change the nodes' visibility.
Any help is welcome!
Well, this might be a bit unorthodox, but I found a way to overcome this.
Basically, instead of trying to mess around with event registering/unregistering, I simply ran the zoom only if the click wasn't from the node at the current zoom level.
So, in my zoom function, I wrapped the zoom handling in an if check:
function zoom(d) {
if(node!=d){
// the rest remains the same
}
}
Either way, I still think that this was happening due to the source elements where the click events were coming from being overlapped in the SVG area - simply put, the click event was being triggered by several overlapping elements, being the first (topmost) in the SVG tree order triggered inadvertently.
Here's a working version.
Hope this helps someone else!
EDIT: This solution isn't perfect, though. Now sometimes the click just doesn't do anything - But it's better than borking the UI. If anyone has other ideas, they're welcome.
I am trying to make my website a live background of space. I am attempting to get the stars to spawn on the left of the screen and slowly move over. And occasionally their will be stars that come in from other directions. My question is, how should I go about doing this?
Would it be smartest to make a Javascript, script that would make a LOT of <div>'s and then move them all randomly? Or would it be smartest to use a canvas? I've never used a canvas before so I don't know all it's uses yet.
Here's a link to the effect I'm trying to emulate (It's a YouTube video with music) - https://www.youtube.com/watch?v=y8MsE-4dygY&list=PL21A7A915E7020E73&index=16
I'm trying to emulate what the stars or partices are doing in the background of that video, so how should I go about this? (I'm not asking for all the code, I'm just making that clear.) Thanks in advance! :)
well, you can obviously use a Parallax background with some overlays for an easy effect, but you can go further by using any of the many scripts out there, search Google for that. Or you can learn how to do it via scripting with this great tutorial that makes use of HTML5 and CSS3
Canvas may be more performant than adding lots of divs as you won't need to create a large DOM tree. DOM operations are expensive and can cause memory thrashing if you repeatedly create and destroy lots of elements. Using multiple overlaid images and CSS3 translate transitions should be more performant still, but may make it harder to achieve all the effects that you want - randomized movement, separation of stars on the same plane, etc. etc.
I am looking for a plugin for spinning wheel in jquery. I came across the site
http://www.professorcloud.com/mainsite/carousel.htm . There is a beautiful demonstration of spinning wheel here but I need the images to be controlled on mouse-drag and also I want the same rotation to happen vertically as well. please help
I believe what you are looking for is commonly referred to as a 'Developer'. When you come to Stackoverflow (in general) you provide a source code that we look through to find out where your mistake(s) is/are. Then we tell you why the mistake(s) happen/ed, and steer you through correcting the mistake(s). If what you are you looking for is the type(s) of tool(s) that a common jQuery developer would use to achieve this then that's completely different.
For starters, it looks like you have found a carousel that you want to use to create the rotating effect. That's fine. You'll need to go through their API and instructions to get a grasp on how to integrate your next step:
Drag & Drop in jQuery
My favorite plugin for this is jQuery UI. It's a complete suite for jQuery that provides an array of different enhancements, including the 'Drag & Drop' effect you want.
http://jqueryui.com/demos/droppable/
You'll have to (once again) work with the API and instructions, and create events to control how the carousel should be affected by the Drag & Drop plugin.
Vertical Carousel
Some quick digging regarding the need for Vertical implementation lead me to a Stackoverflow question regarding the same exact needs.
JQuery Cloud Carousel that scrolls vertically
He also discussed what changes you need to make to the script in order to account for the change in axis. That's a huge +.
You can see a working version of it below -
http://www.inspiritandintruth.com/ (look at the right hand side)
All of this combined should get you what you want. With a bit of work and adjusting, you'll be able to get your end result.
Best of luck.
I am trying to implement something very similar to Yelp's moving map. See:
http://www.yelp.com/search?find_desc=restaurants&ns=1&find_loc=mountain+view%2C+ca
Basically it starts off somewhere in the middle of the page, but if you scroll down far enough that you wouldn't be able to see it, it moves down as well. What is the best way to do this in javascript? My app is in GWT, but I think I will have to use native js to achieve this effect.
Thanks,
Jean
you need some sort of a scroll event handler. either register body.onscroll yourself or use a pre-existing component in any of a number of javascript frameworks. Google 'javascript scroll event' and you'll find plenty
On the iPad gallery at http://movies.apple.com/ipad/gallery/ there is a nifty 3D-ish view when you click on the "360°"-Button on the lower right. It seems to be built with Prototype, some custom JS and 180 single JPEGs.
Now, I don't want to steal Apple's code, but I really would like to have a similar effect. I'm afraid recreating the effect all by myself would be too much for me, so
has anybody ever done something like this and released it as open source (or a paid library or something like this)? Integration with jQuery would be an added bonus.
How about this:
Reel is a jQuery plugin which takes an
image tag and makes it a live
"projection" of pre-built animation
frames sequence. Its aim is to provide
a 360° view of something or someplace.
Great alternative to widely used Flash
techniques.
Maybe what heporap is trying to say is: construct the 3D VR effect in the same way you might make a slider animation.
I guess a slider changes the position of an image in relation to where a mouse cursor is positioned so...
Perhaps try changing the IMG tag's SRC attribute on document.onmousemove and object.onmousedown for drag/positioning effect?
Maybe that sounds obvious, and I'm no maverick coder but it's a start...
I know its an old thread, but its still high on google result.
Here is a jQuery plugin that does exactly that effect http://giniedp.github.com/spritespin/
you better try out threesixty: http://www.mathieusavard.info/threesixty/
You may make it like a slider to change image's src.
http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_172.jpg
http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_135.jpg
Try this one with zoom: http://www.ajax-zoom.com/examples/example15.php
Or use this one. It's also Javascript but with curves for slowing down and another kinds of zoom functions.