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

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


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

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

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

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


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

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

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


代码是什么?

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

它使用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);

总结

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

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

非常感谢你的阅读!

相关的文章
WordPress.com中“发现”功能的一处不当行为

最近,我在WordPress.com中的“发现”功能中找到了一处不当行为,它严重影响了我的感情和体验。

再见,PCIS!我的高中生活在此启程
Junior High Terminal Poster

Today, I am going to graduate, say 'Goodbye!' to my junior high school PCIS and my senior high study journey 阅读更多

高中期间暂停更新我的YouTube频道
YouTube Channel Pause Updating Notice 20200713 English

Today, I have determined that I will pause updating my YouTube channel during my 3-year senior high studying journey because 阅读更多

“I added animations on my website home page” 中的 2 条评论

发表评论

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