"Creating the Perfect Parallax Effect: A Step-by-Step

Seeking to implement a responsive parallax effect on my website, I have the following structure:

<section id="first">
    <div class="text fixed" >
        <h1><b>aSs</b> lorem ipsum dolor sit amet</h1>
        <p>Generally known thesis states that understandable content of a page can distract a user when they want to see its appearance on their own.<p>
        <a class="btn btn-orange" href="#">See our <b>employees</b> ></a>
    </div>
</section>
<section id="second"></section>

CSS:

    #first{
    background: url(../images/tlo1.jpg) no-repeat;
    width: 100%;
    background-size: cover;
    background-position: 50%;
    height: 699px;
    text-align: center;
    position: relative;
    white-space: nowrap;
}
.fixed{
   position:fixed;
   top: 300px;
   left: 0;
}
.static{
    position: absolute;
    left:0;
    bottom: 0;
}

.text{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    background: #fff;
    padding: 30px 0;
    width: 100%;
    color: #7B7878;
    font-size: 16px;
    font-weight: 300;
}

Js:

pozycjaBlueBox = $("#first").offset().top + $('#first').height();
    $(document).scroll(function(){

        if($(window).width() <=1024){
            pozycjaScrolla = $(window).scrollTop() + $("#first .text").offset().top+$("#first .text").height();
        }else{
            pozycjaScrolla = $(window).scrollTop() + $("#first .text").offset().top-60;
        }

        if($(window).width() > 768){
            if(pozycjaScrolla >= pozycjaBlueBox){
                $("#first .text").removeClass('fixed').addClass('static');
            }else{
                $("#first .text").removeClass('static').addClass('fixed');
            }
        }

    });

I aim to keep the fixed text class in place until it reaches the top of #second. It functions well on larger desktop screens, but gets messy when resizing to smaller resolutions.

Answer №1

The essence of a parallax effect is essentially a transition connected to the scroll bar. By incorporating the code snippet below, you can enhance any transition library with this function.

$(window).scroll(Parallax(1, 10, obj.paralaxUpdate));

// normalizes the animation times : this value can be really any positive number 
var normalizer = 1000; 

Parallax = function(start, stop, tweenUpdateer){
    //scrollTop() returns the distance to top of page
    var topVert = $(this).scrollTop();

    topVert <= start ? var progressNum = 0 : 
    topVert >= stop ? var progressNum = normalizer : 
    var progressNum =  (topVert - start) * (normalizer / (stop - start) || 0);   
    // progressNum is now a value from 0 to 1000 (0 to *normalizer* )
    tweenUpdateer(progressNum);

}

This approach can be applied to any transition object, such as Gsap's TweenLite or TweenJS's Tween

id = document.getElementById("SomeID");
//Gsap syntax
var obj = new TweenLite.to(id, normalizer, {css:{top:"-20px" },paused:true});
obj.paralaxUpdate = obj.progress;
//TweenJS syntax
var obj = Tween.get(id, {paused:true}).to(top:"-20px"}, normalizer);
obj.paralaxUpdate = obj.setPosition;

If you're interested in creating your own transition effects: it's valuable to explore the source code of Gsap or TweenJS.

TweenJS :

GSAP : (A personal favorite)

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

Is there a way for me to use an ajax xmlhttprequest to submit all the selected values from my radio buttons?

Here's the situation: I have four input forms [A-D] and I have selected options A and B. I want to transfer this information to another page, but I'm not sure how to do it. I've tried searching for tutorials on AJAX, but most of them focus ...

The Autocomplete component from MUI is alerting me to provide a unique key for every child element being passed

I am currently using the Autocomplete component from MUI and encountering an issue with a warning that says: Warning: Each child in a list should have a unique "key" prop. Although I've added keys to both renderOption and renderTags, the wa ...

Click on the image to resize the div accordingly

I have a scenario where I need to achieve the following functionality: Two divs are present, with an image inside the first div. When the image is clicked, the left div should resize, and the content on the right side should expand to show full page cont ...

Iterate over various selection lists and tally the frequency of each option being chosen

I am currently working on a website that requires multiple instances of the same select-option to be created. I want to keep track of how many times each option is selected, and save that count as a variable to be used in a PHP email function. For instanc ...

Tips for Disabling Alert Pop-ups when Launching Desktop Applications from a Browser

Is there a way to prevent the alert pop-up when launching a desktop application from a web browser? For instance, when typing calculator:// in the browser, we want to eliminate the alert box using an Angular TypeScript file. see image reference ...

AJAX form in a partial view displaying a summary of validations

I am facing an issue with my application that utilizes an AJAX form. Whenever the form is submitted and fails validation, I return the partial view in which the form resides. In this scenario, I would expect the Validation Summary to be displayed. However, ...

Ways to determine if prototype methods vary

Is there a technique to verify if functions are distinct despite originating from the same prototype? I'm inquiring because I want to save functions in an array, and when attempting to delete one, it removes all functions due to sharing prototypes. ...

Attempting to replicate the action of pressing a button using Greasemonkey

I am currently working on a greasemonkey script to automate inventory updates for a group of items directly in the browser. I have successfully implemented autofill for the necessary forms, but I am facing challenges with simulating a click on the submissi ...

Using next.js and redux for user authentication: a step-by-step guide

After creating my next.js app with version 9.3.5, the authentication was working perfectly. However, after updating next-redux-wrapper and next.js, I noticed that when I refresh the page, the user is no longer authenticated even though the cookie still exi ...

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

I attempted to place a textarea within a dialog box, with the intention of retrieving the value of that textarea when the "ok" button is clicked. However, I am encountering difficulties in retrieving the value. What could possibly be causing this issue? ...

What is a more efficient method for verifying the value of an object within an array that is nested within another object in JavaScript?

Is there a more efficient way to check for an object in an array based on a property, without having to go through multiple checks and avoiding potential errors with the ? operator? /** * An API returns a job object like: * { id: 123, name: 'The Job ...

The deployed app on Heroku is showing a 304 status code with no JSON response

I've been working on a project using React, Express, and MongoDB. While everything works fine locally, I encountered an issue with GET requests after deploying the project on heroku.com. Instead of receiving the expected JSON response, I'm gett ...

Angular 7's URL updates, but no other actions take place

I am new to posting here and feeling quite desperate. Currently, I am working with Angular 7 and facing an issue. The problem arises when I manually enter the desired URL, everything works perfectly. However, when I use RouterLink by clicking a button, the ...

Display Loading Spinner with Bootstrap on Form Submission

This Django project features a Bootstrap spinner within a button, as seen in the code snippet below: <form method="POST" id="pdfUploadForm" enctype="multipart/form-data"> {% csrf_token %} {{ form|crispy }} <b ...

Getting data from an HTML file with AJAX

I have a JavaScript application where I am trying to retrieve an HTML file in order to template it. Currently, I am using the following method: var _$e = null; $.ajax({ type: "GET", url: "/static ...

Retrieve all items pertaining to a specific week in the calendar

I'm trying to obtain a list of week ranges for all data in my MongoDB. When a week range is clicked, only the records for that specific week range should be displayed. By clicking on the week range, the ID of the week (let's say 42, representing ...

How can you create a table cell that is only partially editable while still allowing inline JavaScript functions to work?

Just a few days back, I posted a question similar to this one and received an incredibly helpful response. However, my attempt at creating a table calculator has hit a snag. Each table row in a particular column already has an assigned `id` to transform t ...

Exploring the process of iterating through a JSON response in PHP to extract all values

{ "ver":2, "inputs":[ { "sequence":4294967295, "witness":"", "prev_out":{ "spent":true, "tx_index":372805487, "type":0, "addr":"3AFgA1pHKrk4jFHwzUL1CKgZvXyFSWZfgD", "value":12712, ...

What is the best way to verify the existence of a remote image in AngularJS?

Here is an example of the code snippet : <div ng-repeat="u in users"> <!--An active URL will always be received --> <div ng-if="u.imageUrl"> <!--Check if the provided URL is active--> <!--Content only visible if image url is li ...

Outputting HTML using JavaScript following an AJAX request

Let's consider a scenario where I have 3 PHP pages: Page1 is the main page that the user is currently viewing. Page2 is embedded within Page1. It contains a list of items with a delete button next to each item. Page3 is a parsing file where I send i ...