跳到主要内容

如何动画随着mo.js库

Mo.js: animation
(图片来源:pexels / kagumba坦率)

mo.js是一个独特的点击动画微互动,并吨的形状操纵运动图形库中的JavaScript功能有助于不仅全屏动画装载机页,而且还。

如果你一直在关注网页设计的场景,现在一段时间,有机会,你“将所遇到的 - 或者也许互动 - 一个广泛的动画技术和图书馆。这样的核心技术如CSS,HTML5和JavaScript是变得更加强大,浏览器支持改善与时间。这是暗示网络更复杂的动画可以跨设备的支持。 

需要一些灵感动画?这里是顶部的一些例子真棒 CSS动画 重现。

如何mo.js帮助?

网络动画,因为它的出现,是在这里停留。然而,一个缺点动画技术,最流行的是,他们是对传统的动画效果所吸引UI / UX等元素幻灯片,标签按钮和下拉菜单。因此,使用它们可以让你的网站最终太熟悉和非兴奋。

mo.js可以帮助与此有关。有助于使用库动画利用不那么普通的网站元素及其内置组件如HTML,形状,漩涡,爆裂和错开。图书馆是非常容易使用,快速,视网膜准备,模块化和开放源码。在本教程中,工作与mo.js的基本知识介绍和两个展示技术;和气泡爆炸。

01.开始

在桌面上创建一个文件夹,mo.js,存储教程文件开始。在另外三个文件夹创建:CSS样式来存储文件,图片和js的img为JavaScript文件。 HTML文件将被存放在根文件夹。

02.创建页面结构

打开你的代码编辑器,并创建一个index.html文档包含标记主网页。通过创建基本结构开始,并给予适当的标题的页面。



    
        
        Blast Technique <
title>
 
 

03.结构的页面

的教程分为两个部分;第一演示爆破技术,而第二说明了气泡概念。因此,我们准备了两个HTML文件,每一个技术。来启动的爆破技术,创建一个div节包含页面标题。渲染页面在浏览器在哪里,应该注意在左上角未样式的文本。

 
      

mo.js动画

打开你的代码编辑器,并创建该文件夹内的CSS styles.css的文件。通过在头部添加ESTA代码创建一个链接到该文件在HTML文档中, 。既然已经添加任何风格,呈现页面按步骤3或者所示,由于造型是最小的,你可以选择通过结合HTML和CSS使用内嵌样式。

05.风格背景

Mo.js: step 5

(图片来源:pexels / kagumba坦率)

接下来,我们通过添加一个背景影像风格的背景。难道我们使用尼古拉ultang从pexels免费的景区景观背景。你可以 请点击此处下载。保存这个(或你自己的图像)的IMG文件夹内。变化呈现页面展现给背景。

身体,HTML {
  	背景图像:网址(bg.jpg);
  	背景尺寸:盖;
  	填充:0;
  	余量:0;
  	宽度:100%;
  	高度:100%;
  	溢出:隐藏;
}

06.文本样式

Mo.js: Step 06

(图片来源:pexels / kagumba坦率)

然后将文本样式在页面的中心渲染,因为它出现在顶部目前左上角。该说明集中的文本,我们在九月选择绝对位置和使用上,左,右页边距精确定位ITS。转换后的文本还使用文本转换特性。该text-align属性也设置为中心。

文本{
  	FONT-FAMILY:世纪的哥特式,无衬线;
  	颜色:#FFF;
  	文本转换:大写;
  	字体大小:50像素; 
  	字体重量:大胆;
  	位置:绝对的;
  	顶部:50像素;
 	左:25%;
 	右:30%;
  	文本对齐:中心;
     }

07.安装mo.js

与其他图书馆,mo.js通过多个选项进行安装。最简单的方法,它雇用我们,它是从一个CDN服务器直接访问。在主体部分添加以下代码。

如果你正在开发或FF线,该库可 直接从GitHub下载 并且通过使用凉亭或通过使用包NPM适当的命令安装。

凉亭安装MO-JS
NPM安装MO-JS

11下载时,它可以直接引用。



最后,创建一个新的文件并将其保存的script.js在JS文件夹中。我们将功能添加到该文件的JavaScript。在主体部分将其链接如下。将它放置在标题文字下方如下图所示。


mo.js动画

17.高级动画

接下来,我们添加样式在HTML文件中强调的单一类。然后mo.js功能的添加。完整的代码(CSS和JS)与审查教程文件共享。

18.了解更多关于mo.js

而教程演示了泡沫和爆破技术,也有可用的更多的资源在网上,可以帮助您快速跟踪您的学习过程。一些包括 GitHub上mo.js教程还演示在github.

这篇文章最初发表于创意网页设计杂志上291 网页设计师. 购买问题291.

阅读更多: