image overflow effect using javascript

Question

I was wondering if anybody could help me through this:
Take a look at this Gif please
As you can see the images overflow each other on scroll!
So how can I use this kind of effect for my images?
Is there any tutorial link or plugin?

Here is my code so far (html and css):

.gallery-img-parent {
    max-height: 200px;
    padding-top: 32px;
    position: relative;
}

.gallery-img-double {
    width: 100%;
    max-height: 84px !important;
}

.gallery-double-child {
    position: relative;
}

.gallery-img-parent > a, .gallery-img-parent > .gallery-double {
    padding: 0 !important;
}

.gallery-img {
    width: 100%;
    height: 100%;
}

.gallery-img, .gallery-img-double {
    object-fit: cover;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu-parent container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="container gallery-container">
                <div class="row justify-content-center gallery-img-parent">
                    <a class="col-6" href="#" id="img1">
                        <img class="gallery-img" src="http://placehold.it/1/acd373">
                    </a>
                    <a class="col-3" href="#" id="img2">
                        <img class="gallery-img" src="http://placehold.it/1/2b3a5c">
                        
                    </a>
                    <a class="col-3" href="#" id="img3">
                        <img class="gallery-img" src="http://placehold.it/1/003a35">
                       
                    </a>
                </div>
                <div class="row justify-content-center gallery-img-parent">
                    <div class="col-3 gallery-double">
                        <a href="#" id="img4" class="gallery-double-child">
                            <img class="gallery-img-double" src="http://placehold.it/1/2b3a5c">
                            
                        </a>
                        <a href="#" id="img5" class="gallery-double-child">
                            <img class="gallery-img-double" src="http://placehold.it/1/1a202e">
                            
                        </a>
                    </div>
                    <a class="col-6" href="#" id="img6">
                        <img class="gallery-img" src="http://placehold.it/1/acd373">
                        
                    </a>
                    <a class="col-3" href="#" id="img7">
                        <img class="gallery-img" src="http://placehold.it/1/003a35">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks for your time ♥ any respond is welcome...

I think its some sort of paralax effect. Take a look at this demo (prinzhorn.github.io/skrollr). On half of the page you kinda see the effect your looking for. — Jeremy
– Jeremy, Commented Apr 5, 2018 at 8:49
blog.trackduck.com/2015/06/25/… and scroll (or ctr+f) to "‘Root element’ Parallax Technique" — Jeremy
– Jeremy, Commented Apr 5, 2018 at 8:53

Hank Phung · Accepted Answer · 2018-04-06 03:17:32Z

1

Here is an idea for you: You will have 4 or more master div, which have different scroll speed, the master divs will overlay on each other. The photos will be populated on each div. The vertical margin between each row will depend on the scroll speed. Now on your scroll, you will adjust the margin-top/position of each div by its speed.

edited Apr 6, 2018 at 3:17

answered Apr 5, 2018 at 9:01

Hank Phung

2,2092 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mehdi Karimi Over a year ago

Hi, thanks for your answer! I think your idea is very useful !

Collectives™ on Stack Overflow

image overflow effect using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related