使用HTML5创建动画的移动云

最新推荐文章于 2023-11-22 00:42:55 发布
最新推荐文章于 2023-11-22 00:42:55 发布
阅读量284 收藏
点赞数
文章标签： js html css javascript gwt ViewUI
原文链接：https://www.script-tutorials.com/creating-animated-moving-clouds-using-html5/
版权
HTML5 clouds
HTML5 clouds

HTML5 clouds

HTML5云

Today I have prepared you something really entertaining. Of course, we implement it with our favorite html5. This work will show you how to create a beautiful flying clouds across the sky. In the implementation, I decided to use an additional library: https://github.com/mrdoob/three.js

今天，我为您准备了一些非常有趣的东西。 当然，我们使用我们最喜欢的html5来实现它。 这项工作将向您展示如何在天空中创建美丽的飞云。 在实施中，我决定使用其他库：https://github.com/mrdoob/three.js

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the source files and lets start coding !

好的，下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are html code of our clouds page

这是我们的云页面的html代码

index.html (index.html)
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 clouds | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/ThreeWebGL.js"></script>
        <script src="js/ThreeExtras.js"></script>
    </head>
    <body>
        <script id="vs" type="x-shader/x-vertex">
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            }
        </script>
        <script id="fs" type="x-shader/x-fragment">
            uniform sampler2D map;
            uniform vec3 fogColor;
            uniform float fogNear;
            uniform float fogFar;
            varying vec2 vUv;
            void main() {
                float depth = gl_FragCoord.z / gl_FragCoord.w;
                float fogFactor = smoothstep( fogNear, fogFar, depth );
                gl_FragColor = texture2D( map, vUv );
                gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
                gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
            }
        </script>
        <div class="container">
            <canvas id="panel" width="10" height="1"></canvas>
        </div>
        <script type="text/javascript" src="js/script.js"></script>
        <footer>
            <h2>HTML5 clouds</h2>
            <a href="https://www.script-tutorials.com/html5-clouds/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 clouds | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/ThreeWebGL.js"></script>
        <script src="js/ThreeExtras.js"></script>
    </head>
    <body>
        <script id="vs" type="x-shader/x-vertex">
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            }
        </script>
        <script id="fs" type="x-shader/x-fragment">
            uniform sampler2D map;
            uniform vec3 fogColor;
            uniform float fogNear;
            uniform float fogFar;
            varying vec2 vUv;
            void main() {
                float depth = gl_FragCoord.z / gl_FragCoord.w;
                float fogFactor = smoothstep( fogNear, fogFar, depth );
                gl_FragColor = texture2D( map, vUv );
                gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
                gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
            }
        </script>
        <div class="container">
            <canvas id="panel" width="10" height="1"></canvas>
        </div>
        <script type="text/javascript" src="js/script.js"></script>
        <footer>
            <h2>HTML5 clouds</h2>
            <a href="https://www.script-tutorials.com/html5-clouds/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles

这是使用CSS样式

css / main.css (css/main.css)
*{
    margin:0;
    padding:0;
}
body {
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    background-image: url(../images/sky.jpg);
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

*{
    margin:0;
    padding:0;
}
body {
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    background-image: url(../images/sky.jpg);
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

步骤3. JS (Step 3. JS)

js / ThreeWebGL.js和js / ThreeExtras.js (js/ThreeWebGL.js and js/ThreeExtras.js)

This is our new service libraries (available in package)

这是我们的新服务库(包含在软件包中)

js / script.js (js/script.js)
// inner variables
var canvas, ctx;
var camera, scene, renderer, meshMaterial, mesh, geometry, i;
var mouseX = 0, mouseY = 0;
var startTime = new Date().getTime();
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}
function main_init() {
    // creating canvas and context objects
    canvas = document.getElementById('panel');
    var ctx = canvas.getContext('2d');
    // preparing camera
    camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.z = 6000;
    // preparing scene
    scene = new THREE.Scene();
    // preparing geometry
    geometry = new THREE.Geometry();
    // loading texture
    var texture = THREE.ImageUtils.loadTexture('images/clouds.png');
    texture.magFilter = THREE.LinearMipMapLinearFilter;
    texture.minFilter = THREE.LinearMipMapLinearFilter;
    // preparing fog
    var fog = new THREE.Fog(0x251d32, - 100, 5000);
    // preparing material
    meshMaterial = new THREE.MeshShaderMaterial({
        uniforms: {
            'map': {type: 't', value:2, texture: texture},
            'fogColor' : {type: 'c', value: fog.color},
            'fogNear' : {type: 'f', value: fog.near},
            'fogFar' : {type: 'f', value: fog.far},
        },
        vertexShader: document.getElementById('vs').textContent,
        fragmentShader: document.getElementById('fs').textContent,
        depthTest: false
    });
    // preparing planeMesh
    var planeMesh = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
    for (i = 0; i < 10000; i++) {
        planeMesh.position.x = Math.random() * 1000 - 500;
        planeMesh.position.y = - Math.random() * Math.random() * 200 - 15;
        planeMesh.position.z = i;
        planeMesh.rotation.z = Math.random() * Math.PI;
        planeMesh.scale.x = planeMesh.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
        THREE.GeometryUtils.merge(geometry, planeMesh);
    }
    mesh = new THREE.Mesh(geometry, meshMaterial);
    scene.addObject(mesh);
    mesh = new THREE.Mesh(geometry, meshMaterial);
    mesh.position.z = - 10000;
    scene.addObject(mesh);
    // preparing new renderer and drawing it
    renderer = new THREE.WebGLRenderer({ antialias: false });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // change positions by mouse
    document.addEventListener('mousemove', onMousemove, false);
    // change canvas size on resize
    window.addEventListener('resize', onResize, false);
    setInterval(drawScene, 30); // loop drawScene
}
function onMousemove(event) {
    mouseX = (event.clientX - windowHalfX) * 0.3;
    mouseY = (event.clientY - windowHalfY) * 0.2;
}
function onResize(event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
function drawScene() {
    position = ((new Date().getTime() - startTime) * 0.1) % 10000;
    camera.position.x += mouseX * 0.01;
    camera.position.y += - mouseY * 0.01;
    camera.position.z = - position + 10000;
    renderer.render(scene, camera);
}

// inner variables
var canvas, ctx;
var camera, scene, renderer, meshMaterial, mesh, geometry, i;
var mouseX = 0, mouseY = 0;
var startTime = new Date().getTime();
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}
function main_init() {
    // creating canvas and context objects
    canvas = document.getElementById('panel');
    var ctx = canvas.getContext('2d');
    // preparing camera
    camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.z = 6000;
    // preparing scene
    scene = new THREE.Scene();
    // preparing geometry
    geometry = new THREE.Geometry();
    // loading texture
    var texture = THREE.ImageUtils.loadTexture('images/clouds.png');
    texture.magFilter = THREE.LinearMipMapLinearFilter;
    texture.minFilter = THREE.LinearMipMapLinearFilter;
    // preparing fog
    var fog = new THREE.Fog(0x251d32, - 100, 5000);
    // preparing material
    meshMaterial = new THREE.MeshShaderMaterial({
        uniforms: {
            'map': {type: 't', value:2, texture: texture},
            'fogColor' : {type: 'c', value: fog.color},
            'fogNear' : {type: 'f', value: fog.near},
            'fogFar' : {type: 'f', value: fog.far},
        },
        vertexShader: document.getElementById('vs').textContent,
        fragmentShader: document.getElementById('fs').textContent,
        depthTest: false
    });
    // preparing planeMesh
    var planeMesh = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
    for (i = 0; i < 10000; i++) {
        planeMesh.position.x = Math.random() * 1000 - 500;
        planeMesh.position.y = - Math.random() * Math.random() * 200 - 15;
        planeMesh.position.z = i;
        planeMesh.rotation.z = Math.random() * Math.PI;
        planeMesh.scale.x = planeMesh.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
        THREE.GeometryUtils.merge(geometry, planeMesh);
    }
    mesh = new THREE.Mesh(geometry, meshMaterial);
    scene.addObject(mesh);
    mesh = new THREE.Mesh(geometry, meshMaterial);
    mesh.position.z = - 10000;
    scene.addObject(mesh);
    // preparing new renderer and drawing it
    renderer = new THREE.WebGLRenderer({ antialias: false });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // change positions by mouse
    document.addEventListener('mousemove', onMousemove, false);
    // change canvas size on resize
    window.addEventListener('resize', onResize, false);
    setInterval(drawScene, 30); // loop drawScene
}
function onMousemove(event) {
    mouseX = (event.clientX - windowHalfX) * 0.3;
    mouseY = (event.clientY - windowHalfY) * 0.2;
}
function onResize(event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
function drawScene() {
    position = ((new Date().getTime() - startTime) * 0.1) % 10000;
    camera.position.x += mouseX * 0.01;
    camera.position.y += - mouseY * 0.01;
    camera.position.z = - position + 10000;
    renderer.render(scene, camera);
}

Most of code will pretty easy for understanding – I have tried to comment this code as possible.

大部分代码都非常容易理解-我已尝试注释此代码。

现场演示

翻译自: https://www.script-tutorials.com/creating-animated-moving-clouds-using-html5/

cukengwei3786
关注
一个html5做的动态云demo，也是借鉴别人的，很炫的
11-21
一个html5做的动态云demo，也是借鉴别人的，
HTML5动画和鼠标移动
fxs_321的博客
11-05 1341
鼠标移动上去字体变色  中间有图片         Title             *{             margin: 0;             padding: 0;         }         ul,li{             list-style: none;         }         .clear:after{/
HTML5 云动画效果
04-12
HTML5-3D-Clouds 云动画效果
【推荐】HTML5 Word Cloud——中文词云
weixin_30600197的博客
05-31 1246
在线工具： http://timdream.org/wordcloud/# 源码： https://github.com/timdream/wordcloud 转载于:https://www.cnblogs.com/hhxxgdd/p/9116800.html
html5动态移动效果图,《html5 canvas动画》——移动物体(1)
weixin_34822215的博客
06-03 741
我们介绍了用户交互事件，包括：鼠标事件，触摸事件和键盘事件。但是，到目前为止，我们除了键盘事件，对于另外两个事件几乎没有做过任何相应的应用。那么，在这一章，我们将要学习如何让canvas中的物体对用户的动作做出反应，并且学习如何拖拽和抛扔一个物体。不用担心，用到的都是我们学过的知识。本节主要内容：物体捕获捕获验证物体的拖拽1.物体捕获鼠标是个简单，却效率极高的装置。它简单来说只做两件事：移动监测和...
html5跟随鼠标移动银河星系背景动画特效
09-08
总的来说，这个“html5跟随鼠标移动银河星系背景动画特效”展示了HTML5、JavaScript以及可能的CSS3在创建动态、交互式网页内容方面的强大能力。它不仅提高了用户体验，也为网页设计带来了新的艺术表现形式。通过学习...
HTML5 Canvas云粒子动画特效
06-24
在这个“HTML5 Canvas云粒子动画特效”中，我们主要关注的是如何使用Canvas API来创建出引人入胜的粒子动画，如酷炫的下雨动画和火焰动画。 首先，Canvas是一个二维绘图上下文，通过JavaScript可以动态地控制图形的...
html5黑洞跟随鼠标移动动画特效效果源码下载
09-14
在本资源中，"html5黑洞跟随鼠标移动动画特效效果源码下载" 提供了一个独特的用户体验，用户可以通过鼠标移动来控制页面上的黑洞动画，使得黑洞随着鼠标的移动而移动。这种效果通常用于创建引人入胜的互动界面或者...
html5 canvas云粒子数字时钟动画特效
11-06
总的来说，“html5 canvas云粒子数字时钟动画特效”结合了HTML5 Canvas的绘图能力、时间处理、粒子动画等多种技术，创建出一个引人入胜的视觉体验。这种效果不仅可以应用于网站装饰，也可以作为学习Canvas和...
html5 svg创建项目列表添加删除动画特效
06-11
本项目利用HTML5和SVG技术，创建了一个具有吸引力的项目列表，同时加入了添加和删除的动画特效，使得用户界面更加生动和友好。下面将详细阐述这一知识点的相关内容。 首先，HTML5是超文本标记语言的第五个版本，它...
jQuery HTML5蓝天白云动态云登陆界面.rar
07-10
jQuery HTML5蓝天白云动态云登陆界面，看到了逼真的白云效果了吗？基于CSS3实现的，HTML5运行环境，jquery的引入也是很重要的。这个带动画的云登录风格可广泛应用于网站后台用户登录、管理员登录等地方，设计的真是太棒了，很漂亮哦。
html动画的平移
m0_58811578的博客
06-04 4315
在HTML中 1.位置 ：位移 translate（x，y）； 2.大小 ：缩放 scale（xx px）； 1、转化：改变元素的 3.状态：旋转 rotate（xx deg）； 4.形态：skew（xx deg）； 我们可以自己制作一些有趣的动态动画放入页...
常见的css3动画样式
weixin_30835923的博客
09-05 562
6、3D转换 属性: perspective : 设置假定人眼到投影平面的距离 只影响3D元素，不影响2D元素 设置位置：加在父元素上，设置好后，其子元素就可以完成3D的转换。 1、3d位移 改变元素在z轴上的位置 属性：transform: 函数：translateZ(z); transla...
html + css 实现小球跳动动画
weixin_46378070的博客
02-22 1553
关于html + css 的小案例
html代码整体移动,HTML5移动端最基本网页模板代码
weixin_39879674的博客
06-02 840
HTML5移动端最根蒂根基网页模板代码(以下HTML代码可直接拷贝复制运用)：电话网站最基础底细HTML模板body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}.viewport{ max-width:640px; min-width:300px; margin...
HTML+CSS+JS实现 ❤️夜晚云层动画特效❤️
java李阳勇的博客
09-03 1275
效果演示： 基于css3 keyframes 属性制作乌云密布云层动画，夜晚云层飘过动画特效。可用于网页动态云层背景特效。利用animation 和png云图片制作完成。 代码目录： 主要代码实现： css样式： html, body { width: 100%; height: 100%; overflow: hidden; } body { background: #000; text-align: cente...
[Three.js]WebGL心形效果
weixin_33841503的博客
08-24 296
[Three.js]WebGL心形效果 本文实现效果参考自Three.js、Sparks.js的examples。如果你的浏览器支持WebGL，可以点击这里查看效果^^。 一、垫脚石 WebGL，浏览器上的3D技术，基于OpenGL ES 2.0。基础教程可见Hi,WebGL!、Learning WebGL。 ...
html动画效果的使用
最新发布
nijiang111的博客
11-22 274
1>@keyframes 创建动画语法：@keyframes name{0%{}100%{}中间可以填1%、2%、20%等等……
DCloud-HTML5+：5+ App开发入门指南
weixin_30552811的博客
06-14 1090
ylbtech-DCloud-HTML5+：5+ App开发入门指南 1.返回顶部 1、 5+ App开发入门指南 AppApp入门 HTML5 Plus应用概述 HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任...
创建HTML5 Canvas云粒子动画特效教程
资源摘要信息: "HTML5 Canvas云粒子动画特效.zip" HTML5 Canvas云粒子动画特效是一个结合了HTML5中Canvas元素和JavaScript技术实现的前端动画效果。这个特效可以用于创建动态的背景效果，如云朵漂浮、粒子效果等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值