A unique technique for creating a stunning visual effect with images using

Can anyone help me with this issue:
Check out this animated GIF
The images in my project are overlapping when scrolling!
How can I achieve a similar effect for my images?
Is there a tutorial or plugin available for this?

Here is the current code snippets (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>

Thank you so much for your assistance ♥ Any feedback would be greatly appreciated...

javascripthtmlcss

Answer №1

Consider this unique concept: Imagine creating a visual display with 4 or more master divs, each with its own distinct scroll speed, layered on top of one another. Populate these divs with photos and adjust the vertical margin between each row based on the scroll speed. As you scroll, dynamically adjust the margin-top/position of each div according to its individual speed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty making Skrollr compatible with BootStrap 3 single page wonder

I am completely new to JavaScript, which is why I decided to use Skrollr. However, I have been facing some challenges in getting Skrollr to work properly on my webpage. I added the following code at the end of my page: <script type="text/javascript" sr ...

javascriptcsstwitter-bootstrapskrollr

Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads. To achieve this, I am wrapping the canvas in a div and applying the following styles: http://jsfiddle.net/evopgwzd/ body { backgrou ...

csshtmlcanvashtml5-canvas

Tips for executing Cross-Origin-Requests from Firebase Hosting to an AWS Lambda function

Excuse me, I'm still new to web development. I have a basic single-page website hosted on Firebase hosting that retrieves some information from an AWS Lambda function (I didn't use Google Cloud because it didn't support outbound requests fo ...

javascriptjqueryajaxamazon-web-servicesfirebase-hosting

Troubleshooting a problem with CSS animations disappearing

I've been experimenting with CSS animations and I've run into a bit of a snag. I'm looking to create a div that fades in with a delay - meaning it won't be visible until the animation starts. Here's what I have so far: http://jsfi ...

htmlcssanimation

Combine and blur multiple background images using CSS blending techniques

I am currently working on a website, which is just a demo built in ReactJS: The issue I'm facing is related to the background. The idea behind the app is simple - it consists of 4 parts, with the top part displaying weather information without a bac ...

htmlcssreactjsblurry

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column should accommodate 2 inputs. The numb ...

csscss-grid

Transmit JSON information using jQuery

Can you explain why the code below is sending data as City=Moscow&Age=25 instead of in JSON format? var arr = {City:'Moscow', Age:25}; $.ajax( { url: "Ajax.ashx", type: "POST", data: arr, dataType: 'js ...

javascriptjqueryajax

Tips for performing an update in AWS DynamoDB with Node.js

I have created a function to update data in a DynamoDB table const updateData = async (req, res) => { try { const { existingData, updatedData } = req.body; console.log(existingData, updatedData ); UPDATE({ TableName: "todos" ...

javascriptnode.jsexpressamazon-dynamodb

Enhancing the appearance of jQuery datatables using Material Design Lite theme

I came across a helpful codepen demo demonstrating how to create a responsive data table with search filter and pagination. However, this demo is only integrated with Bootstrap. After searching the MDL discussion forum, I couldn't find any existing im ...

jqueryhtmlcssdatatablesmaterial-design-lite

I'm receiving a TypeError in Nodejs indicating that the hashPassword function is not recognized as a function. Can anyone offer advice on how to

How's everything going? I could really use your assistance! I'm currently working on developing an API for registering authenticated users, with data storage in the MongoDB Atlas database (cloud). Unfortunately, I've run into a troubling er ...

javascriptnode.jsreactjsmongodbauthentication

Adding a nested data structure in a Meteor application

In my mongo collection, I have a document named exam. // meteor:PRIMARY> db.exam.find() { "_id" : "RLvWTcsrbRXJeTqdB", "examschoolid" : "5FF2JRddZdtTHuwkx", "examsubjects" : [ { "subject" : "Z4eLrwGwqG4pw4HKX" }, ...

javascriptmongodbmeteor

The "keydown" event in React will not alter the state

I am currently developing an application that requires me to track the keys pressed by the user. I am utilizing keydown and keyup events for this purpose. However, I am facing a challenge where I do not want the same key to be registered multiple times whe ...

javascriptreactjs

"Troubleshooting: ngForm.controls returning undefined value in Angular application

Trying to test this HTML code in Angular: <form name="formCercarUsiari" #formCercarUsuari="ngForm" class="tab-content"> <input #inputNif class="form-control input-height" maxlength="100" type="text" placeholder="Indiqui NIF" name="nif" i18n-pla ...

javascripthtmlangulardomundefined

Trying to locate the subsequent div element following the current one

Here is an example of some HTML code: <div style="display: inline-block; position: absolute; top: 84px; bottom: auto; left: 5px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="2 1 8 1 start top><strong>CRED ...

javahtmlseleniumxpathselenium-webdriver

Display a concealed div when an ng-click event occurs within an ng-repeat loop

$scope.editPostComment = false; Whenever I click on the button, it displays the textarea in all the repeated items instead of just the clicked div! <div class="commentBox" ng-show = "editPostComment"> <textarea name="editor2" ...

javascriptangularjsmodel-view-controller

Adding and deleting MPEG-DASH segments from a media source buffer in a dynamic manner

I have been developing a custom MPEG-DASH streaming player using the HTML5 video element. Essentially, I am setting up a MediaSource and attaching a SourceBuffer to it. After that, I am appending DASH fragments into this sourcebuffer and everything is func ...

javascriptmedia-sourcempeg-dash

The jsPdf library performs well on medium-sized screens like laptops, but when downloaded from larger monitor screens, the PDF files do not appear properly aligned

In the code snippet below, I am using html2canvas to convert HTML to PDF. The PDF download works fine on medium screens, but when viewed on larger screens, some pages appear blank and the content order gets shuffled. How can I resolve this issue so that th ...

htmljqueryangularjspdfhtml2canvas

Adaptable Design - Concealing Facebook Page Plugin at Specific Screen Widths

Can someone help me figure out how to hide the Facebook page plugin on my website? I tried using CSS but it doesn't seem to be working. Here is the code snippet: @media only screen and (max-width:800px){ .fb-page{ visibility: hidden; } This is t ...

htmlcssfacebookresponsive-designresponsive

Tips for sending additional parameters to an MVC controller without including them in the URL when using the JavaScript window.open method

<a href="#" onclick="openAnchor('<%# DataBinder.Eval(Container.DataItem,"Url") %>', '<%# DataBinder.Eval(Container.DataItem,"infoToSend") %>')"> </a> openAnchor= function (Url, infoToSend) { window.open(Url, ...

javascriptjqueryasp.netajaxasp.net-mvc

Is it possible to achieve a FadeIn effect without using the .hide()

Is there a way to achieve a fadeIn effect without interfering with margins when the object is hidden from the document? I would like it to animate from opacity 0, but I am struggling to make it work. Any suggestions or ideas would be greatly appreciated. ...

jquerycssanimationfadeinanimate.css