Altering Image Order Across Various Slides

I have customized a parallax website template that is divided into various sections and slides. I want to incorporate a fixed image sequence on each slide that animates based on the scroll position. With 91 images in the animation sequence, it moves quickly. To slow it down, I would like to display a frame for every 4 or 5 pixels of scroll movement. How can I achieve this?

HTML:

<body>
    <main>
    <!-- SECTIONS -->
        <section id="slide-1" class="homeSlideTall">
            <div class="bcg" data-center="background-position: 50% 0px;" data-bottom-top="background-position: 50% 100px;" data-top-bottom="background-position: 50% -200px;" data-anchor-target="#slide-1">
                <div class="hsContent" data-start="opacity: 1; top: 206px;" data-100-bottom="opacity: 1;top: 206px; left: 0px; width: 100%;" data-top-bottom="opacity: 0; top: -550" data-anchor-target="#slide-1">
                    <div class="boxScroll img" > 
                        <img src="/img/model/0.png" width="960" height="540" />
                    </div>
                    <div class="boxScroll" > 
                        <h2>Carried Away</h2>
                        Product-text
                    </div>

                </div>
            </div>
        </section>

        <section id="slide-3" class="homeSlideTall">
            <div class="bcg" data-center="background-position: 50% 0px;" data-bottom-top="background-position: 50% 10px;" data-top-bottom="background-position: 50% -10px;" data-anchor-target="#slide-3">
                <div class="hsContent" data-bottom-top="opacity: 0; top: 1000px" data-top="opacity: 1;  top: 206px; width: 100%;" data-100-bottom="opacity: 1;  position: fixed; top: 206px; width: 100%;" data-top-bottom="opacity: 0; top: -550"   data-anchor-target="#slide-3">
                    <div class="boxScroll img" > 
                        <img src="/img/model/0.png" width="960" height="540" />
                    </div>
                    <div class="boxScroll" > 
                        <h2>Way</h2>
                        Product-text
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>

JQuery:

jQuery(window).on("scroll",function() {
    var n = $(window).scrollTop(),
    divOffset = $('#slide-1').offset().top,
    dist = (n - divOffset);
    if (dist <= 0) { var dist = 0; } // Check that value isn't smaller than   0
    if (dist >= 91) { var dist = 91; } // In case there aren't any more frames show the last one in the sequence
    jQuery("#slide-1 .boxScroll img").attr({src:"/img/model/"+dist+".png"});
});
javascriptjqueryhtmlcss

Answer №1

After some searching, I finally found the solution I needed:

http://jsfiddle.net/qJhRz/3/

var initialPos = 0,
// animate per 10 pixels
increment = 10,
// starting point
step = 0;

$(window).scroll(function(event) {

//current position of the window
initialPos = $(this).scrollTop();

// calculating the appropriate step
step = Math.floor(initialPos / increment);

//determining the frame to animate to
});

Appreciate the help.

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

What is the best way to dynamically convert a lodash object (specifically a filter object) into jQuery's listview component?

After referencing the answer to this topic as my first step, which can be found here, my next goal is to utilize a filter function to retrieve all matching entries from a JSON file based on a search term. The objective is to loop through each match and con ...

javascriptjquerycssjsonsearch

Creating dynamic movement on webpages using CSS3 Animations

Exploring the world of CSS animations is such a blast! I've created this fiddle to play around with the concept of wheels on a bus. Check out my JS Fiddle here One strange thing I noticed is that sometimes there's a white space between the two ...

csscss-animations

Trouble with DOM loading due to external JavaScript file reference

I'm having an issue with referencing the jQuery library in a master page. Here is how I am including it: <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"> After loading the page, I only see a blank screen. The HTML code is th ...

javascriptjqueryasp.net-mvc-2

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

htmlcss

Effortless method for distributing NPM-loaded modules among various Browserify or Webpack bundles

Feeling frustrated trying to find a straightforward way to share code, required via NPM, across multiple Browserify or Webpack bundles. Is there a concept of a file "bridge" that can help? I'm not concerned about compile time (I know about watchify), ...

javascriptnode.jsnpmbrowserifywebpack

Adding style using CSS to a dynamically generated table row in Vue.js

Currently, I am working with a table that dynamically generates rows using v-for: <table> <tr><th class='name'>Name</th><th>Surname</th></tr> <tr v-for='data in datas'><td class=&a ...

javascriptjqueryhtmlcssvue.js

Is there a way to transform JSON text into a JSON object?

Similar Question: How do I convert JSON to a JavaScript object? { "data": [ { "name": "JoongBum Lee", "id": "526210623" }, { "name": "\uc774\uc778\uaddc", ...

javascriptjson

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

How to send arrays through JSON?

I have some PHP code: $ids = array(1,2,3); $names = array("cat","elephant","cow"); $originalSettings = array ('ids'=>$ids,'names'=>$names); $jsonSettings = json_encode($originalSettings); echo $jsonSettings; Here ...

phpjavascriptjqueryjson

What steps should I take to verify the validity of an Angular form?

I am struggling with validating an inscription form in HTML. Despite trying to implement validations, the inputs are still being saved in the database even when they are empty. Here are the validations I want to include: All inputs are required Email addr ...

javascriptangulartypescriptforms

Turning a JSON formatted string into parameters for a function

Looking to convert a string of JavaScript objects into function arguments. The string format is as follows: "{ "item1": "foo 1", "item2": "bar 1" }, { "item1": "foo 1", "item2": "bar 2" }" While I can use JSON.parse to turn it into an array, the challeng ...

javascriptjsonfunctionobjectarguments

Adjust image size based on the size of the screen

I am facing an issue with two images that are created for a 1024 x 768 resolution but I need to use them in a higher resolution. The challenge is to align these two images so that the circle from the first image falls between the second image. Although I ...

javascripthtmlcss

Stretching the Mantine Accordion Section

The Mantine accordion requires that its content be of type Accordion.Item, as indicated in the documentation for the children props. This means that even functions returning AccordionItem will not be recognized. Therefore, only AccordionItem(s) created in ...

javascriptreactjstypescriptmantine

Having trouble navigating the Request and Response handling in Expressjs/Nodejs?

As I continue to delve deeper into this code, confusion seems to cloud my understanding. Here is the provided source: var express = require('express') , http = require('http') , server = express() ; var home = require('./ro ...

javascriptnode.jsexpressdom-events

Utilizing Promises in the apply function

I am currently working on a project in Node.js that utilizes bluebird for promise handling, as well as ES6 native promises. In both projects, I have a chain where I make a database query structured like this: some_function(/*...*/) .then(function () ...

javascriptnode.jsbluebirdes6-promise

Is there still a need to preload dynamic images in the background?

Imagine you have HTML code that includes an image with a placeholder: <img class="lazy-load" src="http://via.placeholder.com/150/?text=placeholder" data-src="http://via.placeholder.com/150/?text=real%20image"/> At some stage, you want to implem ...

javascripthtml

Puppeteer experiencing issues with missing relative modules and dependencies not being found

After installing puppeteer via npm, I encountered errors when trying to compile it: This dependency was not found: * ws in ./node_modules/puppeteer/lib/WebSocketTransport.js To resolve this, you can run: npm install --save ws These relative modules we ...

javascriptnpmwebpackwebsocketpuppeteer

Access an external URL by logging in, then return back to the Angular application

I am facing a dilemma with an external URL that I need to access, created by another client. My task is to make a call to this external URL and then return to the home page seamlessly. Here's what I have tried: <button class="altro" titl ...

javascriptangulartypescript

Using ReactJS to create different behavior for checkboxes and rows in tables with Material-UI

I am looking to customize the functionality of checkboxes and table rows. Currently, clicking on a row also clicks the checkbox, and vice versa. What I would like to achieve is for clicking on a row to trigger a dialogue box, and for clicking on the chec ...

javascriptreactjscheckboxmaterial-ui

Executing PHP code within the .html() jQuery function

Are you trying to update a link's text content dynamically using jQuery? <a id="btnExistReceiver" class="btn btn-app"> <i class="fa fa-user"></i> <?= __('Existing Receiver') ?> ...

phphtml