I'm looking to adapt this really simple and effective jQuery script:
jQuery to animate image from left to right? (thanks DonamiteIsTnt)...
I would like to know how to expand upon it so you could effectively use two images with a "switch" animation. For example, a bird flies to the right of the screen - flip animation - bird appears to fly back to the left - flip animation - flies to the right again.
The "switch" animation I was thinking something along the lines of a 2D image effectively turning upon itself (like a goldfish swimming back and forth in a bowl and how it would appear to us from the front of the glass).
I don't know if you would use a single image in this case and shrink it from 30px wide to 0px then -30px, etc. to face it the other way. Or need to switch between a right-facing image and a left-facing image. Either way, it would be cool to have it animated.
I have found similar questions on this site referring to the left and right effect and the flip effect, but not combined. So any help would be greatly appreciated!
As a side note: I have linked to http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Edit: Have got this far...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function beeRight() {
$("#b").animate({left: "+=300"}, 5000, "swing", beeLeft);
$("#img").attr("src","rightArrow.gif");
}
function beeLeft() {
$("#b").animate({left: "-=300"}, 5000, "swing", beeRight);
$("#img").attr("src","leftArrow.gif");
}
beeRight();
});
</script>
</head>
<body>
<div id="b" style="position:absolute;"><img id="img" src="rightArrow.gif"></div>
</body>
How would I then add an animated image swap such as: http://davidwalsh.name/demo/css-flip.php - needless to say, does not need to be as complicated. I'm looking to do this with img's, not div's. I understand how something like this would be done in CSS but I do not know how to incorporate it with the jQuery/Javascript.
Thanks again!
Depending on the browsers you're targeting, you could achieve the effect entirely in CSS3. Use a couple of classes to represent the beginning and ending states and some translatex transforms and scalex transforms to handle the flipping. Then add CSS transition property to animate. Then you can use whatever you like to trigger the class change, :hover, jQuery timer, element click, whatever.
Related
Its my first time working with gsap / greensock and using the animations. I'm trying to transform the X position of a certain DIV so it slide in the screen from the right. The weird thing is that with the same code half of the time it slides the correct div in from the right but the other half of the time it seems to randomly slide which I think is the section from the left and everything looks buggy.
This is the code I have:
<section class="homepage">
<div class="TV">
<h1">TV</h1>
</div>
</section>
<script type="text/javascript">
gsap.from('.TV', {duration: 1, x: 1400});
gsap.to('.TV', {duration: 1, x: 0});
</script>
Sorry if its a stupid question but its my first time working with gsap and I don't seem to understand why it works half of the time but the other half it doesn't.
The issue here is that you have two tweens that are attempting to control the same properties of the same element at the same time.
To fix it, simply remove the .to tween.
Another alternative is to use a .fromTo tween.
Also keep in mind that you can use viewport units like x: "100vw" or use a percentage of the element's width like xPercent: 100
I highly recommend going through GSAP's Getting Started article.
I have multiple background images that are behind a block of text each. I would like to fade each background image and have the text move up when one background image fades into another.
For example
BG1 (background image 1) has Tegxt1 on top of it. As BG1 fades into BG2, Text1 moves up and is replaced by Text2.
How can I do this with simple jquery and javascript and CSS?
Here's what I tried
this._currentTimeout = setTimeout(function() {
this.slides$.eq(newSlideIndex).css('z-index', 3).fadeTo(ANIMATION_FADE_DURATION, 1, function() {
this.slides$.eq(this.currentSlideIndex).css('z-index', 1).css('opacity', 0);
this.slides$.eq(newSlideIndex).css('z-index', 2);
this.currentSlideIndex = newSlideIndex;
this._setTransitionTimerForNewSlide(this._getNextSlideIndex(), 5000);
}.bind(this));
}.bind(this), durationUntilTransition);
You did not provide enough code to generate a complete working example (How is your html structured? Where is your jQuery located on the page? What does your existing CSS look like?), so unfortunately no one on StackOverflow and give you a perfect answer. The best we can do is create a small demo of what you could do to accomplish this affect. It's then up to you to learn from the example and apply the concept to your own code.
If I was going to try to accomplish this, here's the approach I would take:
Stack images on top of each other with position: absolute;
The first image group should have the highest z-index, so it's on top. CSS can do this!
The second image group should have the second-highest z-index, so that it shows behind the first image during the fade. CSS again!
all other image_groups should have z-index below the second image. Yay for CSS!
Animate the image and text seperately
The image just needs to fade out
The text needs to fade up and out
After the first (top) image group is completely faded, move it to the bottom of the list
Remove the inline style="..." that jQuery's .animate() applies to the image group. Once we do this, the image group will adhere to the css rules we set up in step one.
JS Fiddle Demo
The first step will be done manually by you when you're writing HTML and CSS, but then your jQuery can handle steps 2-4. Then just repeat as much as you'd like. Ask questions if you need to, but try hard to apply this to your own code. Good luck!!
I'm working with a jquery and I have this image that is the main problem. I googled it but came up with nothing. Here is my content for example.
And when the guy(in the picture above) is being click I want it to slide to the left side and will looked like this. Please see image below.
So what I'm thinking is
1. using addClass and removeClass using jquery or
2. just use jquery .slide or toggle function?
If there's a solution as such how could it be done? Since I only know is using addClass tho. And also what I'm planning is when the image exceeds 800px then the girl(in the image) will be send to back of the guy image.
What you are trying to do is create a mask around the guy. The scope of this question is beyond masking. Most methods of masking don't have large browser support at this moment so posting more on this would be disingenuous. But worth googling otherwise you can use the transform property to move the picture to the left. But you won't get the results you are looking for..
But there is the option of masking the picture in Photoshop and saving it as a PNG. And then utilizing the translate CSS method to move the image to left. This is your best option. But the details of either of these methods are out of scope for this question.
Cut this guy from image and put in another div at needed position. Put blue box between those two images and use slide function. You can cut the guy from his head i think.
Basically you need to have an html structure like this:
<div id='container'>
<div id='couple'></div>
<div id='mask'></div>
</div>
Initially in your css:
#mask {
display: none;
}
And, of course, you have to align horizzontally this two div.
Your jquery will have a behavior like this:
$('#couple').on('click', slide);
var slide = function() {
$target = $('#container');
$mask = $('#mask');
$mask.fadeIn();
$target.animate({
left: "+=50"
}, 500, function() {
/* callback on end*/
});
}
For complete documentation of animate check api jquery.
I have a question concerning Javascript: I want to have the same effect of moving photos to the left/right like flickr on his page (please, compare the header on their page http://www.flickr.com, if you click on one of the dots under the picture).
If you can show me how to do it with pure JavaScript, CSS or the JavaScript framework jQuery it would be very helpful for me!
Thanks in advance,
Jonas
With jQuery you can use the animate function to animate a set of CSS properties. For example, to move an element 100 pixels to the left, taking 1000ms (1 second) to perform the animation:
$("#elementId").animate({
marginLeft: "-=100"
}, 1000, function() {
//Complete
}
);
See this fiddle for a working example.
So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!
Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.
I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...
1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.