I have a background image, like a map, with a road. The road is not straight, it also has some curves on it.I want to do something similar with the attached link, but like I said, on a road that is not straight. I tried some existing scripts, like jQuery Scroll Path, but this is based on background rotation around the object that you want to scroll, and I don't need it this way. If you can give me some suggestions on how to make it happen, I will appreciate.
Thanks!
Maybe this could be something for you
http://forum.jquery.com/topic/new-plugin-jquery-crspline-animates-elements-smoothly-along-arbitrary-length-sequences-of-waypoints-in-2d
there you set positions and the element will follow
Related
I am unable to make it, I have used several things and I have wasted almost 2 days making this thing but still not get what my client wants
after seeing the image you might get the idea what I am looking for, I am trying to move the png image on click, what will happen is the png image on which a user click will take the place of previous png on front and the background will remain stable.
This is the link to the image:
http://tinypic.com/view.php?pic=9hj90h&s=8#.U1Shkld4Pcc
Thanks in advance.
are you searching for a carousel jquery plugin or are you trying to implement this yourself?
If you really want us to help, please provide a jsfiddle. I can only make assumptions and give some general advice; the background image should be a separate image from the images you want to translate (and make a transition). Each image needs its own click event (or an observer on the document). When the user clicks, find out which location the current image is at. Find the image the current image should be at. Get the location. Change the top/left style values of the image.
Of course, you will need a [browser-prefix]-transition: all 2s linear on each element that should transition
what i understand is that you want to basically set new css values to the image(-holder).
$('#yourelementid').animate(height= new_height, width=new_width, otherattr=new_attr)
if you already know the values you need it should be quite straight forward.
here is the man page for $.animate()
https://api.jquery.com/animate/
hint: in the site that you give as reference he uses a separate image to display on click rather to move the existing one to the center.
You can have an invisible element with absolute position on the center, and on click fill it with the selected image, and make it visible.
hope this helps
There are many of us looking for a Javascript/CSS3 solution that can provide a windows7-like UI within a webpage, without using flash.
We need an Opacity mask, rounded borders, and a Blur...
We've got the Opacity and the rounded borders, now we need to be able to apply some Blur effects to a semi-transparent Div.
I tried the BlurFast effect from the Pixastic Library, but it only blurs the actual image, not the background we are seeing trough the image...
Basically, we want a Div to act as a Blur Mask over other contents...
If someone actually succeeded with this, i'll be glad to know its possible :) Thank you
http://t.co/fFLPKnzC
very good article on blur showing the state of the art
sadly "masking" parts of your page, that blur everything behind, is not that easy.
maybe the suggestions in ths blog help you out, as they are very straight forward and from a totally different direction..
therefor to embedd html within svg and use svg-filters on html elements later on
Thought this could be relevant: Aero
Personally, I think the fact that the author states this to be "In other words, one of the most messy and most ineffecient implementations ever"... AND that he can onlt get the effect to work in a single browser... to be extremely telling.
There is no way to do this efficiently or cross-browser at the moment.
The only way you might be able to do it is by using Pixastic to create the blurred image within Canvas, export as dataURI, then use that image as the background for your div. If the div moves, then the positioning of the background-image should move accordingly.
I'm trying to create several buttons that have 4-5 frames of animation in them, and rather than using the typical CSS method (where 1 image has both states, and CSS toggles between top and bottom), I was curious if anyone had an idea on how to do this with 4-5 frames rather than 2. Obviously CSS alone can't make this happen - but its becoming a real challenge to find ANY info on this. Because the images have individual animation, I can't simply use the opacity to fade into the new image, it has to contain all 4-5. Any help would be much appreciated!
Zach
have a look at k10k and see how the buttons in the top are done: animated png's and animated gifs ;)
The only way I can think of to do this without JavaScript would be for the hover state to load an animated GIF for the background image. Otherwise, you'd have to use something like jQuery to animate the background-position property instead.
for this you'll need to use an animated GIF. if you don;'t have a animated GIF creation tool installed, either use Photoshop, which may be massive overkill, or one fo the free tools like GIFted motion
A very non-traditional frowned upon way this can be done is to...
-Animate them as a flash object. Export the xml/flash and imbed it into the htm
I'm looking to use an animated cursor in JS. CSS custom cursors do not animate in most browsers.
I have heard of people (can't recall who) doing this. They hide the regular cursor (by setting a transparent custom cursor), then create an image that follows the cursor in JS.
Anyone have any better ideas to achieve animated cursors? Is there a jquery plugin that will do this for you? I recall reading a blog that talks about this. Anyone heard of people doing this before?
Thanks.
Have you tried using .ani cursors? Also see controlling cursors with css. I guess you could try to hack this together yourself, but I don't see how you're going to hide the original cursor. Do you really need anything other than the widely supported usualy functionality?
li { cursor: text; }
a {cursor: pointer;}
You can use a transparent cursor, but some in some browsers it will show a black square instead of being transparent. Also, I have seen a couple examples that use canvas to add effects to the cursor.
A possible example http://jsfiddle.net/5mN9p/ borrowed from this question Animated image mask following mouse in HTML
All I added was
body{cursor:none;}
or possibly
canvas{cursor:none;}
Which means you can draw anything you want on the canvas at the mouse's coordinates.
Not tried this, but you should be able to create a custom CSS rule (create a class, like .customcursor, set the cursor to url(/path/to/image.png) and then, on a setInterval() cycle between images. Then apply that to your document body.
I haven't a clue how often you can run this, but it should work.
I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?
You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve
Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.
If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.
CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.