CSS and JavaScript Animation

Question

I have this HTML/JavaScript page that I need a little help on. When JavaScript is enabled in the browser, it works just fine, however, when the browsers JavaScript is disabled, only the first div actually shows. Is there a way to change the CSS/JavaScript so that the browser will display all of the divs without animation when JavaScript is disabled?

What I want it to do:

When JavaScript is enabled, it shows and removed the divs as the user scrolls (This is what is does now)

When JavaScript is disabled, all of the divs will just show on the page, without annimation.

HTML

<div class="M1">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>
<div class="tag M2">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>
<div class="tag M3">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>
<div class="tag M4">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>

CSS

.tag {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
}

JavaScript

$(document).on("scroll", function() {
  var pageTop = $(document).scrollTop();
  var pageBottom = pageTop + $(window).height();
  var tags = $(".tag");

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i];

    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible");
    } else {
      $(tag).removeClass("visible");
    }
  }
});

Sorry if this is a simple question, but I am relatively new to JavaScript, and cannot get it to work with the CSS in the way that I want it to.

Also, I know there is a way to have a code preview (Where there is that "Run Code" blue button at the bottom of the code), but I cannot find a way to use it. Help on that would also be appreciated.

Masp · Accepted Answer · 2021-06-26 18:34:01Z

var tags = $(".tag");

$(document).on("scroll", function(event){scroll(event)});

scroll = function(e) {
  var pageTop = $(document).scrollTop();
  var pageBottom = pageTop + $(window).height();

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i];

    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible");
    } else {
      $(tag).removeClass("visible");
    }
  }
}

scroll()

tags.removeClass("visible")

.tag {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 1s;
}

.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="M1">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>
          Some Text<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
        </p>
    </div>
</div>
<div class="tag M2 visible">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>Some Text</p>
    </div>
</div>
<div class="tag M3 visible">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>
          Some Text<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
        </p>
    </div>
</div>
<div class="tag M4 visible">
    <h2>Text</h2>
    <div class="HeaderHomeLDs">
        <p>
          Some Text<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
          This is a very long paragraph.<br>
        </p>
    </div>
</div>

To implement that if JS is off, all sections are visible, the sections start off with a visible tag but JS instantly removes them. That way, if JS is disabled, all sections are visible.

Is there something wrong with using the JavaScript I already have? It seems to work just fine. Just wondering if mine might cause issues later on since my IDE gives some sort of "scroll()" error with yours. Also, how did you put your code in so it has the preview box? Thanks!
@Greenreader9 In general, your code is just fine, I just added some extra features: I stored the scroll function in a seperate value so that we can call it on page load as well, so that the sections that are already on screen become visible instantly and also directly removed all visible classes for if JS is off. I don't know why it would throw a function error, though... The Preview box is one of the buttons in the answer text editor, I don't know if it's available in question posts...

marc_s · Accepted Answer · 2025-07-05 17:12:39Z

0

I think you would need to find a way to change the display visibility with something like style.display ="none" instead of using the opacity: 0; in CSS.

Instead of the default being opacity 0; keep the default visible and then use JS to take all the elements with the class="tag" to being style.display = "none";

My code probably won't work as I'm not familiar with jQuery, but just an idea for something you could implement that would work.

CSS:

   .tag {
         display: block;
        } 

    if ($(tag).position().top < pageBottom) {
      $(tag).style.display = "block";
    } else {
      $(tag).style.display = "none";
    }

Hope it's helpful.

edited Jul 5 at 17:12

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jun 26, 2021 at 17:42

McKay Anhder

135 bronze badges

Collectives™ on Stack Overflow

CSS and JavaScript Animation

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related