I want to do html5 animation please refer the following diagram.
on left side I have a menu list and on right side i have an image as shown in figure.
on click of the 1 link the image which I shown as blue oval will move down diagonally as shown in image2 and then open one div for example square at center of right div ok.
Next on click on 2 link the square div will hide and the oval image comes to its original position and again animate to the diagonal botton and open another div for example this time image
i had already achieve some animation but not upto the end.
if any more description needed tell me....
Demo
Related
I'm asking for help, I have a problem if the slider in the hover image is small in size not full or not covered, but if the large size image is completely covered, how to be the same, my tools use the react-slick plugin for the slider and for the zoom hover react-image-magnify
to see full and run the code in the link below
https://codesandbox.io/embed/m4z84581p8
below this is a wrong picture, it should be when the image hover meets the border box
after zoom
before hover or zoom
but if the image is large when hovered or zoomed then the image is full box
before
what I want is if the image is different either on hover or on zoom the image meets the border box box, like the example of the following link or picture no. 2
https://www.tokopedia.com/laris88/640-adjustable-shoes-organizer-tempat-sepatu?trkid=f=Ca0000L000P0W0S0Sh,Co0Po0Fr0Cb0_src=search_page=1_ob=23_q=sepatu_po=29_catid=1372<=/searchproduct%20-%20p6%20-%20product
I'm looking for some help with pointers on how to achieve a moving background similar to scooby doo or other another cartoons - eg on the press of a button the background slides right to left, the character animates (starts a GIF animation).
Im creating an animating character who will sit on a left hand side div. On clicking the character the div behind the character (the whole background, and other divs within in it) will slide from right to the left and a new div container will slide in to fill the gap. So essentially will appear like the character is walking but in fact the background behind him is moving from right to left.
I'm sure this must have been achieved before, but looking for some pointers on how best to achieve it. Any help will be appreciated.
My thinking is that on trigger there will be a few actions:
GIF animation starts
Whole div slides from right to left
New div (which was hidden) is now shown
New div slides from right to left, behind the old div
Old div is hidden
The issue I am finding is creating a responsive site, therefore the size of the divs moving will not have a px value but a percentage value.
If anyone has tackled something similar before or has some pointers would be really appreciated.
Thanks,
Nick
Getting myself a little confused here. I've worked this out by using a full sized owl carousel and sitting an absolute image over the top. Get my mind in gear!!
On a website I'm working on I got images inside a container that need to appear over the text on hover. This works smooth BUT..
Whenever an image appears it stays in the same location as the previous hover. I am trying to make the images only appear over the link it is associated with but it won't work.
I have some JavaScript running to randomize the link colors.
You can find the webpage in action over here:http://bravenewfashion.com/menu.html Its on the tab titled 'Biology meets Fashion'
Thanks for the working example. If you nest the image inside of the a tag, it will automatically position itself next to the link. You can then add some rules for top and left to position them over the link like your website does now.
Working JSFiddle Here
Im not really a jQuery buff. So i come here looking for some help.
Here is the idea. There are ten images, and ten thumbnails. When you mouse over the thumbnail it will take you to the corresponding image (My code is on jsbin http://jsbin.com/ayigew/1/edit).
What i would like to have is this over feature to be added to the green bars on the top and bottom.
The idea is that i could mouse over the top bar and it will scroll up to the next picture in the list.
If i hover over the bottom green bar it will take me to the next image in the list.
Here is what i have so far http://jsbin.com/ayigew/1/edit
So instead of having to mouse over the thumbnail, you mouse over the green bar at the top or bottom to go forward and backward.
I hope you can help :)
I guess you mean something like this? I did it using timers. On enter start timer. go up or down every x ms and clear the timer on mouse leave.
Here's a canvas app I come across : canvasphoto (uses YUI 2 I believe, which I haven't used before). It displays images on a canvas and it lets you resize/move the images across the canvas. What I want to do is to add a close button on the top right side of the images drawn on the canvas and have it trigger an onclick event when clicked (I'd display a confirm button asking the user if he/she wants to remove the image).
Is this possible? If so, can you help me get started on this (resource/link for drawing an image on top of another image drawn on a canvas, basic canvas manipulation, etc.) Thanks!
Edit: solved the part where the image rendered will respond to click (on top right corner only). So, the only problem left is drawing the close button on the top right corner of the image.
There is no way for something drawn into a canvas to respond to events without additional work. Either you can store the position of the close box and have an onclick event on the canvas check if the click occurs within the rectangle, or you could place an element over the canvas where the rectangle has been drawn and use that to handle the click. A relatively positioned div with no contents would work.
Instead of drawing on the corkboard, a div with an image is rendered on the page above the top right corner of the image by setting a higher z-index than the canvas and and absolute position (with the coordinates of the top right corner, of course).