We Keep Coding

How to change images in a selected div on mouse scroll like parallax effect?

First of all, thank you so much for checking my question.
I'm working on a web site and need to change images vertically in a selected div like a parallax effect. There are 3 images and need to change them.
There are 3 images in a div. Check the following screenshots.
This is the image 1. All these 3 images are half width of the screen.
And this is image 2.
Like this, there is another image 3. The yellow color content in the right side is not changing. Now i added just a simple scroll bar to scroll.
I need to add either parallax effect on these images to scroll vertically or quickly change images on mouse scroll.
Example for parallax effect I need to add : http://pixelcog.github.io/parallax.js/
Or I want to apply this effect : https://codepen.io/RenanB/pen/GZeBNg
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
<h2>Parallax Speed -1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
<h2>Parallax Speed 1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
<h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
<h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
<h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
<h2>Parallax Speed 0.75</h2>
</div>
But only issue is, when I apply the same code to my images, this effect is activating to my full site.
Most importantly ,no matter from where user scrolling the page, I need to scroll to these 3 images, show all 3 and then scroll down to next section.
I added above parallax code, but it's applying to the whole site and not working.
What is the best way to apply above mentioned 2 methods to my web site ?

Well, as soon as you played with code, you need to see that those scripts and effects builded inside a wrapper, so the main thing in parallax effect is to have a nicely 100% width and height so you can see the delay and responsiveness in your website, what I can tell you do is the following :
Wrap your images inside a div with name like ( image_wrapper ).
Add a class for every image parent div like ( image_section ).
specify the 100% width and height for image_sections.
Add a height for the image_wrapper as this :
.image_wrapper{ height:calc( 100% * 4 ); }
100% for the full height, 4 for the number of images to have in parallax

mouseenter function only works vertically

I'm trying to replace one image (closed bag) to another (open bag) using mouseenter and mouseleave functions. For some reason it only works when I leave the mouse vertically, but not horizontally. I suspect it has to do with the length of the image but I inspected it and it was not the issue. Here is my code:
$("#tumi_front").mouseenter(function() {
$("#tumi_front").hide();
$("#tumi_open").show();
});
$("#tumi_open").mouseleave(function() {
// alert('leave');
$("#tumi_front").show();
$("#tumi_open").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="tumi_front" src="tumi_front.png" alt="yolo front" height="40%" width="40%" />
<img id="tumi_open" src="tumi_open.png" alt="yolo open" height="30%" width="30%" " style="display: none " />
Thank you in advance for the help!

The problem is you're setting your two different images to have a different height and width. Your front image is at 40% and your second is at 30%. So when you try to hover outside of your smaller image, it triggers the hover onto the larger image, and then hides your image over again, causing the glitch.
Your code (40% 30% broken)
A better solution for this would be to give both your images the same class and toggle the images. This will fix the hover issue you are having with the different sized images, and it is more efficient.
jQuery
$(".double-img").on("mouseenter mouseleave", function() {
$(".double-img").toggle();
});
JSFiddle
My code (40% 30% fixed)

Why not use 1 image (image sprite) and do a background-position with css on :hover. No jquery required!

Combine 7 images into one, one on top of each other and output as single image?

I've tried aligning all images on top of each other, it worked but because it was position:absolute; the final result was floating all around page. (It's in my other question I asked today on SO)
So I am thinking alternative ways,
I have a web page which dynamically loads images like this:
<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/images/char_elements/base_dark.png">
<img src="http://chaterix.com/public/images/char_elements/eyes/blue.png">
<img src="http://chaterix.com/public/images/char_elements/hair/blond.png">
<img src="http://chaterix.com/public/images/char_elements/mouth/happy.png">
<img src="http://chaterix.com/public/images/char_elements/pants/patrick.png"><img src="http://chaterix.com/public/images/char_elements/shoes/bleu2.png">
<img src="http://chaterix.com/public/images/char_elements/torso/google.png"></div>
I am wondering - is it possible to use JavaScript (like PHP GD) to combine all 7 images into one image and output on page using javascript?
So say instead of printing out the above code, it would do something like this:
<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/tempGenerated/character.png">
</div>
Is this possible? I am just sick of position absolute and stuff floating around, so if JS could combine 7 images and make it as 1 that would fix the problem.

This should be really simple with CSS and position absolute. I know you said you are looking for a different way, but this should be doable. Are you setting top, bottom, right and left position for the images? Don't forget that you need to add the px after the number. Also don't forget to set the position property on your parent element, or position absolute gets wonky.

if you use position: absolute correctly, things shouldn't be 'floating around the page'. Give the parent position: relative and they will be relative to this div. Give it a top and a left value, if you give it all 4 it will skew when you resize the page/div

Change large image in gallery onmouse over of thumbnails

I currently have a gallery that changes the larger image when the smaller is clicked. Here is the most important code:
.n1:focus span
{
background: url('images/Boot.png')
}
Then
<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>
I can't figure out how to make this happen onhover or onmouseover.
Here is an example of what I need: http://thelittleappfactory.com/ripit/
Does anyone have any insight? I tried using javascript to open the link onmousehover, but my browser saw it as a popup.

First of all you need to have a thumbnail and a big version of your images. In your code you seem to have a single image. The big images should be hidden with css display:none and absolutely positioned so they will all be on top of each other. I would use jquery's mouseenter and mouseleave events. mouseover event is triggered when the cursor moves over an element and will generate too many calls.
<div class="item n1">
<img class="thumb" src="images/boot_thumb.png" alt="boot/>
<img class="big" src="images/boot_big.png" alt="boot/>
</div>
This javascript code would do the trick:
$('item').mouseenter(function(){
$(this).children('big').fadeIn();
});
$('item').mouseleave(function(){
$(this).children('big').fadeOut();
});

I actually found a way to do this with pure CSS. I thought it was pretty phenominal, because I was told that was impossible and there seems to be need for it. Here's source code for this technique:
http://ostmosis.com/OnHoverChangeImage.zip

Div Click on Image / Slide to new div possible with JQuery?

I am looking for some way to click on an image or link on a Div and it will slide to another div without changing to height...so something like the below
<div id="div1">
<img src="image.jpg" onclick="slide_to_other_div" />
</div>
<div id="div2" style="display:none">
<p>Another Div Here</p>
</div>
But I don't want an accordion effect... I want to slide to Div2 without affecting the height?
Explained further ...
Suppose you have a table>
<table>
<tr>
<td id="div1">Slide to Div2 Direction --> </td>
<td> id="div2" style="display:none">This is Div 2</td>
</tr>
</table>
So, Div1 scrolls sideways to Div2 when I click on the link to Div2

I'm not entirely sure I know what you want to have happen, but here are a series of steps which might accomplish your goal?
Calculate the current image height and explicitly set it so that it won't change.
Calculate the current absolute image position
Calculate the absolute div2 position
Detatch the image from div1, set it's style to be position absolute with the absolute position calculated earlier, and attach it to body
Animate the top and left properties of the position so it "slides" to the new location
Detatch the image from body, remove absolute positioning values, attach it to div2, and show div2
Does that sound like what you are looking for? Each of those steps can be accomplished via jquery.
EDIT: Now that I think I'm understanding you more, you are probably looking for a horizontal accordian. You could code this from scratch, but I would suggest looking at existing solutions to guide you (or to simply use). Here is an example of one. Google "horizontal accordian" to find more if that doesn't suit your fancy.

additional HTML:
<a name="myAnchor"></a>
Jquery:
$('#div1 img').click(function(){
window.location = "/currentpath_or_link#myAnchor";
});
It wont give you a nice animation but it will get you to there.
If you want a nice animation you will need the function scrollTo()
but I never worked with that.