What steps should I take to create a horizontal parallax scrolling effect on my website

I am seeking to create a unique parallax effect on my website's background that scrolls horizontally instead of vertically. I attempted to make adjustments to the jQuery code below, which was originally for vertical scrolling, but was unsuccessful in achieving the desired effect.

$(document).ready(function(){
    var $window = $(window);
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this);
        $(window).scroll(function() {
            var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));
            var coords = '50% '+ yPos + 'px';
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

Answer №1

For horizontal positioning, you should replace the yPos, scrollTop(), and .top with measurements that relate to left-right movement instead. Consider using scrollLeft() as an alternative method.

Refer to this past inquiry for insights on detecting scroll position in a horizontal context: Link

To create a parallax effect, adjust the scrolling speeds of different layers of elements. Elements closer to the forefront should move faster (covering more pixels over time) than those in the background.

You can achieve this by assigning specific pixel values based on element types or incorporating a speed multiplier into your calculations.

The provided code is tailored for scrolling the entire window collectively. For individual elements, you must identify and manipulate them separately to apply distinct horizontal scroll behaviors to each one.

Answer №2

Here is an example of how you can achieve a parallax effect:

let parallaxSection = '';
$(document).ready(function(){
  parallaxSection = $('#parallaxSection');
});
$(window).scroll(function () {
  let scrollPos = $(window).scrollTop();
  parallaxSection.css({'background-position-y': 0 + (scrollPos*.57 )+"px"});
});

Depending on your desired effect, you can adjust the background position properties accordingly.

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

Leveraging the power of Vue to elevate traditional multi-page/server-rendered web applications

After spending hours searching, I still haven't found anything that fits my specific case. My e-commerce website is classic, multi-page, and server-rendered using JAVA One of the pages displays a list of products with pagination Currently, to enhanc ...

Transform Arabic numerals into Roman numerals using only CSS styling

Currently developing a custom theme for a website and faced with the restriction of not being able to use Javascript. My goal is to translate certain numbers into Roman numerals. I attempted the following: .score:before { counter-reset: mycounter att ...

What is the best way to eliminate the space following the image?

Something strange happened, and now there's a big gap following the top image. I was working on making the code responsive and then inserted this image, which messed everything up. Any ideas on what I might be doing wrong? I want the image to be close ...

Creating a calculator with JavaScript event listeners - easy steps to follow!

I'm currently working on a JavaScript calculator project and facing challenges in understanding how to create variables for storing targeted DOM elements, input/output values, and adding event listeners to retrieve data from buttons upon clicking. I ...

Unexpected behavior when trying to bind data with AngularJS through a response message

Here is the code snippet: var myApp = angular.module("gameModule", []); myApp.controller("gamecontroller", function ($scope) { $scope.message = "test"; // websocket connection. var gameHub = $.connection.socketHub; $.connection.hub.star ...

Curved edges conceal excess content + alter (Works in Firefox & Safari, but not in Chrome or Opera)

Trying to create rounded corners for a div to mask its children's content led me to a solution I found in this question. However, it appears that the solution does not work when the children elements are transformed. The following http://jsfiddle.net ...

Position the outcome on the far right side

I have a question that I am revisiting with more details in hopes of finding a better solution. In the code snippet below, the output is aligned to the right of the row: <table border="1" style="width:100%"> <tr> <td align="right"> & ...

Cross-browser issues with jQuery AJAX success handling in Firefox

I am trying to use this AJAX call for a specific functionality: $('#brick-mixer-form').submit(function(e) { e.preventDefault(); $("#mix-bricks-submit").addClass("load"); $("#mix-bricks-submit").attr("value", "Mixing ...

Using a local variable within quotes in Angular 4 (HTML) and utilizing ngFor

In my current project, I am utilizing Angular2-Collapsible. The objective is to display the details upon clicking a table row. Below is the code snippet provided. Specifically, if I add [detail]= "detail1", the collapsible-table-row-detail will appear when ...

The functionality of PHP in relation to the jQuery post feature seems to be malfunction

After developing the JavaScript functionality for this contact form, below is the HTML structure without any CSS styling included: <!-- Contact Form --> <div class="cws-widget"> <div class="widget-title" style="color:#fec20b;">S ...

Simple method to toggle visibility of forms using an AngularJS Button

I am hoping to create a seamless user experience by having a Login/Register button that, when clicked, reveals the corresponding form without validating anything in the JavaScript code. The goal is to have the form slide out when the button is clicked, and ...

Tips for swapping out a sticky element as you scroll

Context As I work on developing a blog website, I aim to integrate a sticky element that dynamically updates according to the current year and month as users scroll through the content. This would provide a visual indication of the timeline for the listed ...

Experiencing a problem with Datatables where all columns are being grouped together in a single row

After creating a table with one row using colspan and adding my data to the next row, I encountered an issue with the datatables library. An error message appeared in the console: Uncaught TypeError: Cannot set property '_DT_CellIndex' of unde ...

Using the map method to print from a massive array collection in sets of 20

Given a large array of numbers, I am attempting to divide it into sets of 20 numbers and print them. However, when I try to iterate through the array with an if condition, I get undefined values. I thought of creating a result array and pushing the subset ...

This particular reference has seen better days

I am currently working on this code snippet: Drupal.behaviors.articleQuiz = (function(){ var _attach = function(context){ $('.question-container', context) .each(function(i, section){ ...

What's the best way to display navigation menu items exclusively for mobile view?

When viewing my navbar on desktop, it appears like this: The mobile display is working perfectly. I am looking to have the items in the navbar displayed one by one on desktop and remove the menu icon entirely. This is my current code: <nav class="na ...

There is no data in the Uint8Array derived from the ArrayBuffer

I've been working on a program to process files, and I need to convert the array buffer of the file into a Uint8Array. However, when I run my code, the array appears to be empty. The specific array I'm trying to access is the fdata array. PLEASE ...

Transforming HTML into a Document Object Model (DOM) for manipulation within a Node

Is it possible to convert raw HTML into a DOM/NodeList object and manipulate elements within that NodeList before converting it back into a string? Here's an example: request( url, function ( err, response, body ) { var bodyDOM = DOM.parse( body ...

Retrieving fresh data with Ajax from Django 1.9 upon button click

I'm currently working on a code to display the status of AWS instances (servers) in a browser when users want to check the status. In some cases, it may take some time for the servers to start up, so I would like the status value to be refreshed (run ...

creating a table displaying data in a horizontal format sourced from ajax/json transformation

I am currently working on a piece of code that retrieves a list of IDs from local storage and compares them to IDs in a JSON file. If there is a match, the corresponding data is displayed in a table. However, I am facing an issue with my table layout as i ...