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!!
Related
Here is a jsbin of my code: http://jsbin.com/EKidOyO/1/edit
What I'm trying to achieve (unsuccessfully so far) is that when I you scroll, the red div should stay fixed for a set amount of time then eventually move up and the rest of the page follow.
This works kind of at the moment. However, when you reach the end of the blue div that should be the end of the page and not allow you to see white space below the blue div. Also, on smaller viewports you cannot scroll down to see the bottom of the blue div.
I cannot work out how to fix this.
First off, just want to thank the author for making this great bit of code available for free, and the community for helping java-illiterate folks such as myself.
Anywho, here is my issue: When I click a thumbnail to enlarge it, it enlarges just fine. However, when it's enlarged, the only way I can shrink it is by placing the cursor on the very thin ~1px border. I do not get the magnifying glass shrink cursor when over the image itself. If you wish to view the problem, the code is live at http://www.coloradocanopyclub.com/photos.html.
*EDIT TO ADD* This issue seems to be affecting the first photo ONLY. (tallison.JPG)
Thanks for any help!
The universal selector at the top of your style.css file causes this problem:
* {margin:0px;padding:0px;top:0px;left: 0}
It’s ok to set margin and padding to 0 for all elements, but the problem starts when you sets top/left position for all relative/absolute positioned elements 0.
You’ve probably noticed the Highslide full-expand button. This button is placed in an overlay on top of the image. Standard position for the full-expand button is bottom right corner: http://screencast.com/t/WPP4iwwCI9dq Your universal selector moves it to upper left corner: http://screencast.com/t/maXl9rzveH When the button is moved like this with CSS, it will result in an overlay that covers the entire image – colored red in this screenshot: http://screencast.com/t/6pdDnxaMRQ - which makes it impossible to close the image.
You need to change your universal selector to this:
* {margin:0px;padding:0px;}
And add top:0px;left:0px; only to the selectors where you need it, which are (as far as I can see) #navlist li a span and #content
I need to make a dynamic jQuery menu for showing products.
There will be one main picture with text and hyperlink on it, taking 60% of the screen, and on the right of it I need three small pictures (one above the other, horizontally) with 20% width of screen (but all together taking same height as the main one).
I need help for the animation. The animation will be next:
the three pictures on the right are sliding up, and the top most disappears, and a new one is appended to the bottom (at the same time as the top most is disapearing). Now, the one that dissapeared becomes the main one.
I've made an easy solution with .slideUp function, but that doesn't actually made the div go up, instead it is just losing it's height until it becomes invisible. It is not the solution I wanted.
Thanks.
EDIT:
I've managed to get some solution with jQuery.sliedUp function, but still I didn't get the effect that the client was asking for.
Now with a little bit more search, I've found that the jQuery UI hide function extension can do the effect I am looking for.
Here's an example: http://jsfiddle.net/WMPRJ/
My problem now is if you click on the top div, while it is sliding up, the bottom div does not follow it up and take its place. I need to do that. Please provide me with a solution.
Append the current main to the bottom of your thumbnails, slide up the top one and remove() it. Take its src attribute and set it to the main image.
Here's some (sorry, not a self-contained example) code that should get you where you're going. If you actually take the time to read it you'll see it does exactly what I described in the first two sentences.
$('.thumb').first().slideUp(function(){
$('#main').attr('src', $(this).attr('src'));
$(this).remove();
});
if this a homework please append homework tag.
I can't provide you with full HTML and javascript, but an idea. You have two blocks. Float the right block;
Left Block - 60%.
Right Block - 20% (float:right)
Define height for Right & Left block and give overflow:hidden for Right Block.
Now define a click function like this.
var nextAnimateImageId = 1;
$("#my_button").click(function{
jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId = nextAnimateImageId + 1;
});
My idea is, if you have 5 images, only 3 will be shown becaue of defined height and overflow:hidden property. When you animate the first image to height=0 (which is what toggle does), the 4th image will come up due to the space freed up, giving you a nice scroll up animation.
$("#left_image1").delay('1000').animate({width:'toggle'}, 1000);
This causes the element to collapse in such a way that it appears to be moving off the LEFT side of the screen. How can I reverse the effect so that the element appears to be moving off the right side of the screen?
Its not quite so simple. The reason it appears to be going to the left is because you element is left aligned. If it was right aligned it would appear to go to the right. You could fix this in a variety of ways, but since you didn't post your html/css I can't give a specific answer. One way you could go about this is by floating your html element to the right, or by absolutely positioning the element to the right of its container element.
I'm looking for a solution to animate a horizontal gallery (div) based on cursor's proximity to the left or right of the window. The center of the window will do nothing, but as you begin to creep left, the gallery slides right, and visa versa. Very common thing to do, but I want to accomplish this with javascript/jquery. If someone could just get me on the right track I would appreciate it.
(Edit) For a newer and improved example go to this SO question:
Horizontal scroll on mouseMove - wide div in smaller div with overflow:hidden (Can't get the math to work)
I created a mousemove gallery.
Hope this will help.
JSFIDDLE DEMO: MOUSEMOVE GALLERY
Just set into the css the desired width and height of the gallery container. Fill the gallery with images and enjoy! :)The code is simplyfied and commented to help anyone upgrade it.
bunch of examples and plugins;
http://www.dynamicwp.net/articles-and-tutorials/top-20-jquery-slideshow-and-image-gallery-tutorials/
http://plugins.jquery.com/plugin-tags/slideshow