CODEWITHSUNDEEP
javascripthtmlcssanimation
Greenreader9
Greenreader9

Reputation: 531

CSS and JavaScript Animation

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.

Upvotes: 0

Views: 64

Answers (2)

Masp
Masp

Reputation: 26

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.

Upvotes: 1

McKay Anhder
McKay Anhder

Reputation: 13

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 wont work as im not familiar with jquery, but just an idea for something you could impliment that would work.

css

   .tag {
         display: block;
        } 


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

Hope its helpful.

Upvotes: 0

Related Questions