最近,我使用了我的编程技能在我网站的主页上添加了一些动画,你滚动时会看到动画。

它可以吸引更多的人访问我的个人网站,让访问者感到更有趣。


什么是网站主页中的动画?

世界上有无数个网站,其中一些网站有一些动画。

有不同类型的动画,如淡入、从左到右或从右到左移动等。

下面是一个例子 - 我的个人网站的新主页效果


为什么要在我的网站上添加动画?

网站上的动画可以吸引更多的人,让访客感觉更舒服,因为它是一种很好的网站设计。

我想吸引更多的人访问我的个人网站,我看到一些个人网站也在使用动画,所以我想在我的网站上添加动画。


代码是什么?

我有很强的计算机编程能力,并且这些代码是我自己一个人写出来的。

它使用JavaScript来控制滚动高度和元素动画,以及CSS来初始化元素的动画准备。

这是一个秘密!但这里有一个元素的动画的主要技巧:

HTML(在一个网站中,不全)

<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);

总结

这是文章的结尾,我希望你能喜欢我的带有新动画的个人网站。

如果你喜欢这篇文章,请点击拇指向上按钮,或者订阅我的博客。如果你有任何问题或建议,你可以在下面写下你的评论。

非常感谢你的阅读!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

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