Basic parallax application, failing to achieve the desired impact

Question

Basic parallax application, failing to achieve the desired impact

My goal is to create a scrolling effect where the header text moves down slightly, adding some margin on top to keep it in view.

I found the perfect example of what I want to achieve with the header text at this website:

After spending hours working on it, I have only been able to achieve something similar to this example:

The code used in the example is as follows:

$(window).scroll(function(){
    var fromTop = $(window).scrollTop();
    $(".logo").css('margin', '-' + (100 - fromTop) + 'px 0px 0px 0px');
});

However, I am struggling to replicate the effect shown in the first link. Can anyone provide guidance on how to adjust the JavaScript to achieve a similar effect?

javascript jquery html css

Answer 1

Answer №1

Since you requested the use of JavaScript,

$(window).scroll(function(){
var fromTop = $(window).scrollTop();
$(".logo").css({"margin":fromTop/3+"px 0px 0px 0px"});
});

In a parallax effect, you want elements to move at different rates relative to each other. By dividing the distance scrolled by 3, the rate at which the header moves is reduced. You can adjust this value to achieve the desired effect.

You can see a demo here

Alternatively, you can seek assistance from materializecss (which is user-friendly).

Answer 2

Since you requested the use of JavaScript,

$(window).scroll(function(){
var fromTop = $(window).scrollTop();
$(".logo").css({"margin":fromTop/3+"px 0px 0px 0px"});
});

In a parallax effect, you want elements to move at different rates relative to each other. By dividing the distance scrolled by 3, the rate at which the header moves is reduced. You can adjust this value to achieve the desired effect.

You can see a demo here

Alternatively, you can seek assistance from materializecss (which is user-friendly).

Basic parallax application, failing to achieve the desired impact

Answer №1

Similar questions

To highlight errors in ASP.NET MVC4 form validation, consider adding a vivid red border around the selectize dropdownlist

Editing the dimensions of the input in Bootstrap 4

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS

A guide on initiating a get request with URL in React

Display issue with positioning user name in navbar on Internet Explorer

Tips for sending a Postgres Pool or Client over a socket

Using a single datalist in HTML5 to define options for multiple input elements

Passing parameters from an HTML form using PHP

A Promise-based value returned by a Typescript decorator with universal methods

The magnitude of each new keystroke is squared compared to its predecessor

What is the best way to serialize form data while also including a child collection?

Utilizing AngularJS: Dynamically employ custom directives for enhanced reusability

methods for efficient set computations

Updating website content dynamically using AJAX and URL manipulation without refreshing the page (Node.js)

Having Trouble Sending Text to InputBox Using Selenium WebDriver

Animation doesn't apply to child components, but is successful when applied to the parent component

Transforming specific symbols (é è ë) with URL encoding

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

What are the steps to get an Icon to intersect with a v-app-component in a Vuetify project?