Recently, I added some animations on my website’s home page using my programming skills. You will see the animations as you scroll.

It can attract more people to reach my personal website, and let visitors be more interesting.


What are animations on a website’s home page?

There is a myriad of websites around the world, some of them have some animations.

There are different kinds of animations, such as fade-in, move from left or right, etc.

Here’s an example – My personal website’s new home page effects


Why do I want to add animations on my website?

Animations on a website can attract more people, and let visitors feel more comfortable because it is a kind of good website design.

I want to attract more people to reach my personal website, and I saw some personal websites are also using animations. So I want to add animations on my website.


What are the codes?

I have strong computer programming ability and the codes were written by myself.

It uses JavaScript to control the scrolling height and element animations, and CSS to initialize the elements for the preparation of the animations.

It’s secret! But here’s the main trick for one of the animations of an element:

HTML (inside a website, not full)

<div id="frame-element-1">
  <div id="inner-element-1">Content</div>
  <div id="inner-element-2">Content</div>
</div>

CSS

/*Don't let inner elements shown outside the range.*/
#frame-element-1{
  overflow: hidden;
}
/*Initialize inner elements*/
#frame-element-1 #inner-element-1, #frame-element-1 #inner-element-2{
  position: relative;
  bottom: -2500px;
  opacity: 0;
  transition: all 0.5s ease-in-out 0s;
}

JavaScript

// Create a list about the animations of a group of elements that is already done, false means the animations haven't executed.
var ElementAlreadySet = [false, false, false, ...];
// Set an interval for animations.
var setHPElementAnimation = setInterval(function(){
  // Get Scroll Top First (Repeatedly).
  var scrollTop1 = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
  // Get Frame Element 1 from HTML.
  var frameElement1 = document.getElementById("frame-element-1");
  // Check if the animations of an element is already executed.
  if(!ElementAlreadySet[0]){
    // Check if the element animation can be executed.
    if(scrollTop1 + document.documentElement.clientHeight >= frameElement1.offsetTop){
      // Execute the animation of the first element
      document.getElementById("inner-element-1").style.bottom = 0;
      document.getElementById("inner-element-1").style.opacity = 1;
      // After 0.25 seconds, execute the second one.
      setTimeout(function(){
        document.getElementById("inner-element-2").style.bottom = 0;
        document.getElementById("inner-element-2").style.opacity = 1;
      }, 250);
      // Mark the animation is already executed.
      HPElementSet[0] = true;
    }
  }
  // Then add other elements like this.
}, 100);

Conclusion

This is the end of the article. I hope you can enjoy my new animated personal website.

If you like this post, please click the thumb up button, or subscribe to my blog if you want. If you have any questions or suggestions, you can write down your comment below.

Thanks so much for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This site uses Akismet to reduce spam. Learn how your comment data is processed.