Using jQuery to implement translation on scroll

Help needed with the translate-animate attribute. I have an image that I want to move upwards when scrolling down on the page. I understand how to use translateY(px) to shift it, but I'm unsure how to perform this translation while scrolling. I aim to create a similar effect

Upon scrolling down, the image smoothly moves upward on Apple's webpage. I am seeking a code snippet to achieve a seamless upward translation effect for my image during scroll events.

P.s- This is my first query so apologies if I am not articulating clearly.

javascriptjquerycssjquery-animate

Answer №1

This parallax effect I created is simple to implement and doesn't require any special tricks to make it work. If you're interested, you can view the original demo page by following this link.

let $scrollPrev = 0;
const $viewBottom = () => $(window).scrollTop() + $(window).innerHeight(),
  $parallaxIllusion = () => {
    const $pxTop = $(".parallaxTop"),
      $pxMid = $(".parallaxMiddle"),
      $pxBottom = $(".parallaxBottom"),
      $scrollCurr = $viewBottom(),
      $bodyTop = $("body").offset().top,
      $bodyBottom = $bodyTop + $("body").outerHeight(true),
      $pxspeed = $scrollCurr - $bodyTop;
    if ($bodyTop > 0 && $viewBottom() > $bodyTop && $(window).scrollTop() <= $bodyBottom) {
      $pxTop.css({
        "top": 40 + -$pxspeed / 4
      });
      $pxMid.css({
        "top": $pxspeed / 2
      });
      $pxBottom.css({
        "top": ($pxspeed / 4)
      });
      $scrollPrev = $scrollCurr;
    };
  };

$(document).ready(() => {

  $(window).scroll(() => {
    $parallaxIllusion();
  });
});
body{
height:700px;
}
.parallaxTop {
  background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxHand.png') center center / cover no-repeat;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  width: 403px;
  height: 298px;
  z-index: 2;
}

.parallaxMiddle {
  background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxCaps.png') center center / cover no-repeat;
  position: absolute;
  right: 50%;
  -ms-transform: translate(50%, 0);
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  width: 109px;
  height: 117px;
  z-index: 4;
}

.parallaxBottom {
  background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxBeer.png') center center / cover no-repeat;
  position: absolute;
  right: 50%;
  -ms-transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  width: 406px;
  height: 443px;
  z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="parallaxTop"></div>
  <div class="parallaxMiddle"></div>
  <div class="parallaxBottom"></div>
</body>

Feel free to customize the code to display one image. The speed and direction can be adjusted within the if statement.

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

Grab onto a nested section

What is the solution for targeting the h2 span element? div#content div.view-content div.view-row-item h2 span { ... doesn't seem to be doing the trick... ...

htmlcssdrupaldrupal-theming

Navigating to a specific element following an AJAX request

Can't seem to get the page to scroll to a specific element after an ajax call. What could be causing this issue? index.php <style> #sectionOne { border: 1px solid red; height: 100%; width: 100%; } #sectionTwo { border: 1px solid blue; heigh ...

javascriptphpjqueryajax

How can jQuery be used to display the size and type of linked files in title attributes?

For instance: Prior to <a target="_blank" href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"> Adobe Reader JavaScript specification </a> As the file is in PDF format, the title should read title="PDF, 93KB, opens in a new ...

jquerycssxhtmlaccessibility

jQuery is able to retrieve all the table data (TD) elements within a table

Using jQuery, I am extracting data from a table: $('#lc_searchresult > table > tbody > tr').each(function() { var data = $(this).find("td:eq(5)").html(); alert(data); }); It works well when the TR tag contains only one ...

javascriptjqueryhtml

Put a hyphen in front of the final three characters

I am looking for a way to automatically insert a dash before the last three characters in a text field, using either JavaScript or PHP. For example, if a user enters '1dsb3rs', I would like the input to change to '1dsb-3rs'. Whether the ...

javascriptphpjqueryhtml

The hyperlink appears to be malfunctioning

I've been working with a jQuery multilayer menu, but I encountered an issue with the link not being clickable. For reference: jQuery: JS Array Demo: When navigating through the menu on the demo site - "devices" -> "Mobile phones" -> "super s ...

jqueryhtmlcss

Combining Multiple Arrays into One | Node.js

Can someone explain how to merge an array of arrays to me? For instance, I have the following array: [ [ {brand: 'fiat', model: 'palio'} ], [ {brand: 'nissan', model: 'march'} ] ] I want to transform this array int ...

javascriptarraysnode.jsmerge

Retrieve the element by clicking on its individual tooltip

I am currently struggling with a jQuery UI tooltip issue. Specifically, I would like to retrieve the element that the tooltip is associated with when clicking on it. My Approach So Far $(".sample").tooltip({ content: function () { return $(t ...

javascriptjqueryjquery-ui

What is the best way to center a div vertically within a bootstrap 5 carousel across all screen sizes?

Looking to center the text div within a Bootstrap 5 carousel both vertically on large screens and small (mobile) screens. To view the site, visit... Below is the HTML for the div. The targeted div has the CSS class #hero .carousel-container { display ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

css Problems with the height of the tab bar

Trying to set up a tab bar with additional padding on hover, but encountering an issue where the parent div moves on hover state. Here is the HTML code: <div id="statNav"> <a href="#">Gogus</a> <a href="#">Kol ...

htmlcss

Error encountered in my application due to Node.js (Error [ERR_HTTP_HEADERS_SENT]: Unable to change headers once they have been sent to the client)

Experiencing an error message in my application when typing nodeJS. Please assist. , Encountering an error after sending the first POST request while running the app. const express = require('express') const Workout = require("../models/work ...

javascriptnode.jsreactjsexpress

What is the reason behind the decision for Google Chart API to display a legend only for pie charts

I have encountered an issue while attempting to display a pie chart on an ASP.NET webpage using the provided URL: . Despite passing valid values in the URL parameters, only the legend of the chart is displayed and not the chart itself. Can anyone provide i ...

javascriptasp.netchartsgoogle-visualization

Why is it necessary to use the value property with ref in Vue.js 3, while not required with reactive?

Essentially, the question is quite clear from the title: In Vue.js 3, why is it necessary to use the value property with ref, but not with reactive? I comprehend that ref is meant for simple values like booleans and numbers, while reactive is used for mor ...

javascriptvue.jsvuejs3vue-composition-api

Embed a subcomponent within another component triggered by an onClick event in ReactJS

Watch this quick demo to see my project in action. So, here's the deal - I have a menu with different options, and when "Tickers" is selected, I want it to display the Tabs component. However, if any other menu option is chosen, I don't want the ...

javascriptreactjs

Utilizing Redux actions in React components

As I was delving into React and Redux concepts, I decided to create a simple component to gain a better understanding. Now, I am attempting to divide the Redux logic into a separate component, resulting in a total of two components. However, upon compili ...

javascriptreactjsecmascript-6reduxreact-redux

Adjusting the sizes of images with varying aspect ratios to perfectly fit within a div without distorting its shape

I'm currently in the process of developing my portfolio website and I am faced with creating a simplistic image browser feature. My goal is to have a container div that adjusts in size according to the browser window, allowing it to house images of va ...

javascripthtmlcss

Unable to insert rows into an array using sqlite3 in Node.js

I have a snippet of Node.js code that queries a SQLite Database and prints each row individually. The original code is as follows: var sqlite3=require('sqlite3').verbose(); var db=new sqlite3.Database('./database.db',(err)=>{ i ...

javascriptnode.jsasynchronoussqlite

Troubleshooting Error: Heroku, mLab, and Node.js - Application Issue with Mongoose

As a beginner in the world of Node.js and Heroku, I am attempting to host my first application on Heroku but encountering deployment issues. To guide me through this process, I have been following a tutorial which can be found here: https://scotch.io/tutor ...

javascriptnode.jsmongodbherokumongoose

The height of the Bootstrap column does not extend to its full potential

Having an issue: https://i.sstatic.net/L45Ii.png In the image, you can see that the column is not taking up the full height. The left side shows what I currently have, and the right side shows what I want to achieve. Here's the source code that corr ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for altering the color of an activated Bootstrap dropdown toggle

When the Dropdown menu is open, I would like to customize its default colors. Specifically, I want to change the border color and background using CSS. https://i.sstatic.net/vKwLE.png Below is the HTML code snippet: <div class="row menu"> <ul ...

htmlcsstwitter-bootstrap