Is there a way to slow down the scrolling speed of a div with a fixed background attachment using CSS

I'm experimenting with creating unique parallax effects and I'm wondering if it's possible to make a div with a background image set to background-attachment: fixed scroll at a slower rate than the normal scroll speed, rather than staying completely still?

This is the CSS code I currently have:

.parallax{
    height: 400px !important;
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
}

Here is my div element:

<div class="parallax" style="background-image: url('img/image.jpg'); ">
</div>

I've attempted this JavaScript code: 

$('div.parallax').each(function(){
        $scroll_speed = 10;
        $this = $(this);
        $(window).scroll(function() {
            $bgScroll = -(($win.scrollTop() - $this.offset().top)/ $scroll_speed);
            $bgPosition = 'center '+ $bgScroll + 'px';
            $this.css({ backgroundPosition: $bgPosition });
        });
});

It appears to be functioning correctly, but I'm having trouble adjusting the scroll_speed variable. Can anyone provide assistance on how to modify this value successfully?

jqueryhtmlcss

Answer №1

Modifying the scroll speed is a simple task that involves adjusting the factor value. With a factor of 5, the scroll speed will be faster, whereas a factor of 20 will result in slower scrolling.

$('div.parallax').each(function() {
  $scroll_speed = 5;
  $this = $(this);
  $('#container').scroll(function() {
    $bgScroll = -(($('#container').scrollTop() - $this.offset().top) / $scroll_speed);
    $bgPosition = 'center ' + $bgScroll + 'px';
    $this.css({
      backgroundPosition: $bgPosition
    });
  });
});
.parallax {
  height: 400px !important;
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-position: center 0;
  font-weight: bold;
  font-size: 20px;
  color: red;
}
#container {
  height: 100px;
  overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="parallax" style="background-image: url('http://imgs.xkcd.com/comics/jack_and_jill.png'); ">
    bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>
  </div>
</div>

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

CSS that relies on the presence of a specific class

I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...

cssangulartailwind-css

Buttons within the Bootstrap carousel caption cannot be clicked

I am currently designing a webpage with a Bootstrap carousel that includes a paragraph caption and two buttons. However, the buttons are not functioning as clickable links - when clicked, nothing happens. {% block body %} <div id ="car-container"> ...

javascripthtmljquerycsstwitter-bootstrap

A particular individual experiencing difficulties executing a script within an HTML form that relies on google.script.run.function()

I've developed an input form that operates within an HTML modal launched from a Google Apps Script in a Google Sheet. This form retrieves values from the sheet, allows users to edit or manipulate them, and then writes the changes back into the sheet u ...

javascripthtmlgoogle-apps-scriptgoogle-sheetsmodal-dialog

What is the best way to display a particular section of a website (<td>...</td>) within a UIWebView?

I have searched high and low for a solution to my issue, but have come up empty-handed. What I am attempting to accomplish is to only load a specific td from a webpage into a UIWebview. Currently, my code looks like this: - (void)viewDidLoad { [supe ...

htmliosuiwebview

Automatically navigate to a specific element as the user scrolls down the page

I am attempting to achieve a similar effect as seen on the App Builder Website. When the user reaches the header with the background image/video and scrolls down, the website smoothly transitions to the next div/section. If the user scrolls back up and ret ...

javascriptjqueryhtmlscroll

Adding data to the SharePoint RichText Control using the WinForms WebBrowser Control

I am struggling to modify the content of an SP Rich Text field using the WinForms web browser control. While changing the values of other controls is straightforward, I have encountered difficulties with Rich Text fields. I found some suggestions on this b ...

javascripthtmlsharepointbrowsercontrols

Interactive Bootstrap Modals

Is it possible to create a "page" viewing experience within a bootstrap modal? This type of user interface flow is common in many mobile apps, but after reviewing Bootstrap's components, I'm unsure how to implement this or if it's even supp ...

htmltwitter-bootstrapbootstrap-4single-page-application

What is the reason behind the HTML button producing the 'ul' node just once even after being clicked multiple times?

Just to clarify, the code below is successfully doing what I intended. I am currently developing a basic todo application. Each time the button on the page is clicked, it triggers the createListElem() function. The initial line of code in this function ap ...

javascripthtmldom

Stretch a component outside of the bootstrap container

Currently, I am working on a mockup using Bootstrap 4 and have encountered an unusual element inside the container where the background extends beyond the container. I'm not sure how to address this issue effectively. I attempted to use position: abso ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Transforming objects into nested structures

After making a JSON call, I received the following JSON Object: [ { "feeding_id": 14, "supp_name": "Test 1", "supp_weight": 20000, }, { "feeding_id": 14, "supp_name": "Test 2", "supp_weight": 100 ...

javascriptjqueryarraysjsonobject

What is the jQuery equivalent for converting this JavaScript code?

Here's a code snippet that I am struggling with: data=>{document.querySelector( "#os11.html-widget.gauge svg text[font-size='10px'] tspan" ).innerHTML = data.text I attempted the following solution: $("#os11.html ...

javascriptjquery

creating a select box that changes dynamically based on the form submission

My current project involves developing an upload form where users can upload documents along with additional details such as the document name. The challenge I am facing is related to generating a secondary select box based on the category chosen by the us ...

phpjqueryajax

A step-by-step guide on setting up an event listener for dynamically generated HTML using JavaScript objects

In my JavaScript code, I am creating object instances that include HTML elements in the form of buttons. These buttons are dynamic and have words generated dynamically as well. I want these buttons to execute certain functions when clicked. The challenge I ...

javascriptjqueryhtml

How to use Javascript, HTML5, and AngularJS to display and print a PDF document within a

I have a situation where I need to load a Base64 encoded PDF as a String from my server into JavaScript in my client application which is built using AngularJS and HTML5. The structure of my HTML code is as follows: <div id="printablePdfContainer"> ...

javascripthtmlangularjspdf

increasing the size of the input thumb compared to the others

Hello fellow React developers, I'm currently learning by coding and I have a question about a slider. I'm trying to make the thumb of the slider bigger, but when I increase its size it doesn't fully display within the input area (as you can ...

javascripthtmlreactjsinputmaterial-ui

Troubleshooting: Unresponsive behavior of CSS table

I have been working on implementing responsive CSS for a table. I recently came across a helpful tutorial on http://css-tricks.com/responsive-data-tables/ (How to create a responsive table using CSS). While the tutorial worked fine on some sample pages, I ...

htmlcssresponsive-design

Insert the <span> element within the <a> element with the help of Jquery

I am attempting to insert a span tag inside .block-leftnav ul li .parent a, however, instead of adding the tag after only the .parent a, jQuery is adding the span tag after every href tag on my page. Below is the code I am using to achieve my desired outc ...

javascriptjqueryhtmlcss

What is the best approach for adding a mark within a circle using React or vanilla JavaScript?

Has anyone come across an npm package that allows for marking a dot in a circle? I am looking to click on the mark and output the JSON object. https://i.sstatic.net/u8FTY.png Additionally, is there any option to achieve this with a simple onClick event? ...

javascripthtmlcssreactjsnpm

What is the best way to restrict a link to only a specific div element and not a Bootstrap

My HTML conundrum involves a div styled with the class .win_box: This particular div is nested within a Bootstrap column, and the link associated with it extends throughout the entirety of said column. However, I want to restrict user access to this link ...

htmlhyperlink

What is the process for initializing the JWPlayer when it is embedded within Sitefinity?

We utilize a Sitefinity portal and have integrated the jwplayer on a specific page. Upon inspecting the page's HTML code, I only see a DIV element with an ID assigned to the video player. There is no indication of the javascript code present. However, ...

javascriptjqueryajaxjwplayersitefinity