【每日一练】143—实现一个好玩的文本装饰动画效果

最新推荐文章于 2024-08-23 20:55:13 发布
最新推荐文章于 2024-08-23 20:55:13 发布
阅读量82 收藏
点赞数
文章标签： javascript css html css3 前端
原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649135910&idx=3&sn=a35de395fe315f81b8114f2d79091790&chksm=be58bc8b892f359d198b8751e7f32a9650831c22f2a28b1770f6bc74cf10bfebe5642cfdff49&scene=126&sessionid=0
版权

outside_default.png

写在前面

我不知道大家有没有这样的情况，就是看到一些好看好玩的效果，就会想着这个效果是怎么实现的？想自己动手去写一写的冲动？等到实在写不出来了，就直接F12，其实，这个也是学习的一种途径，当我们积累到一定量的时候，自然就有质的改变。

当然，我们每天对着代码，也不可能天天都是写那些有用的项目，自然也会写一些看起无用却有趣好玩的东西，这个就是我们保持学习的乐趣所在。

因此，今天这个练习就是这样的情况，好了，我们还是先来看一看它的最终效果：

outside_default.png

HTML代码：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>【每日一练】143—实现一个好玩的文本装饰动画效果</title>
  <link rel="stylesheet" href="./style.css">


</head>
<body>
  </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='https://codepen.io/ste-vg/pen/MmqOpb.js'></script><script  src="./script.js"></script>


</body>
</html>

CSS代码：

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #032C3F;
}


.title {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title h1 {
  font-size: 5vw;
  display: inline-block;
  color: #032C3F;
  width: auto;
  font-family: "Corben", cursive;
}

JS代码：

"use strict";
console.clear();
TweenMax.lagSmoothing(0);
let colors = {
    background: '#032C3F'
};
let getRandomFromArray = function (arr) {
    return arr[Math.floor(Math.random() * arr.length)];
};
class Stage {
    constructor() {
        // container
        this.onResize = function () {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        };
        this.render = function () {
            this.renderer.render(this.scene, this.camera);
        };
        this.add = function (elem) {
            this.scene.add(elem);
        };
        this.remove = function (elem) {
            this.scene.remove(elem);
        };
        this.container = document.createElement('div');
        document.body.appendChild(this.container);
        // renderer
        this.renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: false
        });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setClearColor(colors.background, 1);
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.container.appendChild(this.renderer.domElement);
        // scene
        this.scene = new THREE.Scene();
        // camera
        let aspect = window.innerWidth / window.innerHeight;
        this.camera = new THREE.PerspectiveCamera(30, aspect, 1, 1500);
        this.camera.position.z = 100;
        this.camera.lookAt(new THREE.Vector3(0, 0, 0));
        //light
        this.light = new THREE.DirectionalLight(0xffffff, 0.8);
        //this.light.castShadow = true;
        this.light.position.set(8, 10, 10);
        this.scene.add(this.light);
        this.softLight = new THREE.AmbientLight(0xffffff, 0.4);
        this.scene.add(this.softLight);
        // group
        this.group = new THREE.Group();
        this.scene.add(this.group);
        window.addEventListener('resize', () => { this.onResize(); }, false);
    }
}
class Sprinkle {
    constructor() {
        this.colors = ['#E54B4B', '#712F79', '#FF9770'];
        this.group = new THREE.Group();
        let scale = 0.8;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.CylinderGeometry(0.2, 0.2, 2, 5);
        var material = new THREE.MeshToonMaterial({
            color: getRandomFromArray(this.colors)
        });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.y = -0.1;
        mesh.position.x = -0.1;
        mesh.position.z = -1;
        // mesh.castShadow = true;
        // mesh.receiveShadow = true;
        this.group.add(mesh);
    }
}
class Gumball {
    constructor() {
        this.colors = ['#DDDDDD', '#FF70A6', '#519872'];
        this.group = new THREE.Group();
        let scale = 1;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.TetrahedronGeometry(0.5, 1);
        var material = new THREE.MeshToonMaterial({
            color: getRandomFromArray(this.colors)
        });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.y = Math.random() - 1;
        mesh.position.x = Math.random() - 1;
        mesh.position.z = Math.random() - 1;
        // this.mesh.castShadow = true;
        // this.mesh.receiveShadow = true;
        this.group.add(mesh);
    }
}
class ChocolateButton {
    constructor() {
        this.colors = ['#E9EB87', '#FF686B', '#C98BB9'];
        this.group = new THREE.Group();
        let scale = 0.5;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.CylinderGeometry(2, 1.5, 0.5, 10);
        var material = new THREE.MeshToonMaterial({
            color: '#594935'
        });
        var chocolate = new THREE.Mesh(geometry, material);
        this.group.add(chocolate);
    }
}
class Marshmallow {
    constructor() {
        this.group = new THREE.Group();
        let scale = 0.5;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.CylinderGeometry(1.5, 1.5, 3, 15);
        var material = new THREE.MeshToonMaterial({
            color: '#dddddd'
        });
        let mallow = new THREE.Mesh(geometry, material);
        this.group.add(mallow);
    }
}
class Lollipop {
    constructor() {
        this.colors = ['#E9EB87', '#FF686B', '#C98BB9'];
        this.group = new THREE.Group();
        let scale = 0.5;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.CylinderGeometry(0.3, 0.3, 4, 5);
        var material = new THREE.MeshToonMaterial({
            color: '#CCCCCC'
        });
        var stick = new THREE.Mesh(geometry, material);
        stick.position.y = -2.5;
        // this.stick.castShadow = true;
        // this.stick.receiveShadow = true;
        var geometry = new THREE.CylinderGeometry(2, 2, 0.7, 20);
        var material = new THREE.MeshToonMaterial({
            color: getRandomFromArray(this.colors)
        });
        var lolly = new THREE.Mesh(geometry, material);
        lolly.rotation.z = 1.5708;
        // this.lolly.castShadow = true;
        // this.lolly.receiveShadow = true;
        this.group.add(stick);
        this.group.add(lolly);
    }
}
class App {
    constructor() {
        this.candies = [
            ChocolateButton,
            Marshmallow,
            Sprinkle, Sprinkle, Sprinkle, Sprinkle, Sprinkle, Sprinkle,
            Gumball, Gumball, Gumball, Gumball, Gumball, Gumball,
            Lollipop
        ];
        this.count = 0;
        this.addCandy = function () {
            this.count++;
            var candy = new this.candies[Math.floor(Math.random() * this.candies.length)]();
            candy.group.position.z = (Math.random() * 80) - 40;
            this.stage.add(candy.group);
            this.animate(candy);
            if (this.count < 800)
                setTimeout(() => { this.addCandy(); }, 10 + (Math.random() * 10));
        };
        this.getTextPosition = function () {
            //get a position based on img pixels
            let position;
            let gotIt = false;
            let Z_SPREAD = 0;
            let IMAGE_SCALE = window.innerWidth / 9000;
            console.log(IMAGE_SCALE);
            if (IMAGE_SCALE > 0.1)
                IMAGE_SCALE = 0.1;
            while (gotIt == false) {
                //randomly select a pixel in image data
                var imgx = Math.round(this.textImage.width * Math.random());
                var imgy = Math.round(this.textImage.height * Math.random());
                var col = getPixel(this.textImage, imgx, imgy);
                //read color from image
                if (col.r > 0) {
                    //if not black - set it
                    position = new THREE.Vector3((imgx - this.textImage.width / 2) * IMAGE_SCALE, (imgy - this.textImage.height / 2) * IMAGE_SCALE, Math.random() * Z_SPREAD * 2 - Z_SPREAD);
                    gotIt = true;
                }
                else {
                    //if black - loop
                    gotIt = false;
                }
            }
            return position;
        };
        this.getRandomRotation = function () {
            return Math.random() * 20;
        };
        this.getRandomY = function () {
            var range = window.innerHeight / 20;
            return Math.random() * range - (range / 2);
        };
        this.animate = function (candy) {
            let speed = 1 + (Math.random() * 2);
            let vec3 = this.getTextPosition();
            TweenMax.fromTo(candy.group.position, speed, { y: 40, x: Math.random() * vec3.x, z: -50 }, { y: vec3.y - (vec3.y * 2), x: vec3.x, z: vec3.z, ease: Power4.easeOut });
            TweenMax.fromTo(candy.group.rotation, speed, { x: this.getRandomRotation(), y: this.getRandomRotation(), z: this.getRandomRotation() }, { x: this.getRandomRotation(), y: this.getRandomRotation(), z: this.getRandomRotation(), ease: Power4.easeOut });
        };
        this.tick = function () {
            this.stage.render();
            requestAnimationFrame(() => { this.tick(); });
        };
        this.stage = new Stage();
        var loader = new THREE.ImageLoader();
        loader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/sugar.png', image => {
            this.textImage = getImageData(image);
            this.tick();
            this.addCandy();
        });
    }
}
let app = new App();
function getImageData(image) {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    return context.getImageData(0, 0, image.width, image.height);
}
function getPixel(imgData, x, y) {
    var r, g, b, a, offset = x * 4 + y * 4 * imgData.width;
    r = imgData.data[offset];
    g = imgData.data[offset + 1];
    b = imgData.data[offset + 2];
    a = imgData.data[offset + 3];
    //console( "rgba(" + r + "," + g + "," + b + "," + a + ")");
    var col = new THREE.Color(0xffffff);
    col.setRGB(r / 256, g / 256, b / 256);
    return col;
}

写在最后

以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号

outside_default.png

outside_default.png

outside_default.png

web前端开发V
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
weixin_44181180的博客
02-21 2万+
文章目录前言第一回合一、知识点：cookie（21/09/06）二、知识点：节流和防抖（21/09/07）三、知识点：var和let以及const（21/09/08）四：知识点：深拷贝和浅拷贝（21/09/09）五、知识点：作用域和作用域联（21/09/10）六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11）七、知识点：重排（21/09/12）八、知识点：TCP和UDP（21/09/13）九、知识点：三次握手（21/09/15）十、知识点：绝对和相对定位（21/09/16）十一、知识..
2021年50个酷炫的Web和移动项目创意
努力是为了站在万人之中，成为别人的光
03-29 1万+
2021年50个酷炫的Web和移动项目创意 当想到项目创意时，很多人都在挣扎。这里列出了20个您可以在2021年完成的很棒的项目构想。我什至将以我的技术栈为例，以便您弄清楚自己也可以做到这一点。这些应用程序可以在Web，移动和桌面上。您可以使用无数种工具，技术和编程语言来构建它们，我仅在此处显示一些用例。每个项目的编程级别均为初学者，中级或高级。这些应用程序可以创建为前端，后端或全栈。 所涉及的技术栈是： 前端：HTML，CSS，JavaScript，TypeScript，React，React Nati
（转载）计算机英语名词简释
热门推荐
力尽山拔的博客
08-18 1万+
计算机英语名词简释 一、著名公司及其商标名 　　Microsoft: 有时缩略为MS，是全球最著名的软件商，美国软件巨头微软公司的名字。Microsoft其实是由两个英语单词组成：Micro意为“微小”，Soft意为“软的”，此处应为“Software，软件”，顾名思义，微软(Microsoft)是专门生产软件的公司。当今90％以上的微机都是装载Microsoft的操作系统，如MS－DOS 6...
JAVA开发全集
u神的专栏
09-23 1万+
soap消息的分析和消息的创建和传递和处理 @WebService public interface IMyService {  @WebResult(name="addResult")  public int add(@WebParam(name="a")int a,@WebParam(name="b")int b);    @WebResult(name="us
一个美观好玩的小游戏打飞机的源代码.zip
06-19
在开发打飞机游戏时，开发者通常会选择一个游戏引擎或框架作为基础，以减少重复工作并提高开发效率。常见的有Unity、Cocos2d-x、Phaser等。对于小规模的HTML5游戏，开发者可能选择使用Canvas或WebGL进行图形渲染，...
一个语句实现好玩的程序
07-10
一个简单的vb语句实现好玩的程序，可用写字板查看源码，比较low，谨慎下载
好玩的css3动画效果
08-22
根据给定的信息，我们可以详细解析CSS3动画效果的相关知识点，主要围绕标题“好玩的css3动画效果”以及描述“只适合菜鸟”的内容展开。 ### CSS3 动画基础 CSS3 引入了一系列新的特性来增强网页的表现力，其中动画...
一个非常好玩的点名器，读取txt文本
03-04
一个非常好玩的点名器，采用javaSwing窗体，读取txt文本，推荐新手下载，学习，代码也不是很复杂。
好玩的放大镜效果 的另一种实现方法
12-03
在网页设计中，实现“好玩的放大镜效果”的方法多种多样，其中一种简便的方法是通过CSS的内外补丁（padding和margin）进行调整。这种方法可以让用户在鼠标悬停在某个元素上时，该元素像放大镜一样显示为放大的版本，...
nodejs安装
a1241436267的博客
08-19 420
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 333
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 345
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 996
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1036
react详细自我学习笔记，内容包括JSX、Redux、Router等
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
最新发布
liyy614的博客
08-23 613
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 914
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 237
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
vue3 @antv/x6 使用画布滚动条以后的几个问题的解决
jwbabc的专栏
08-20 519
通过设置@antv/x6的插件scroller的options，来达到基本上满足项目的原型要求。
写一个C语言内嵌汇编语言实例，实现有趣好玩的功能
05-25
以下是一个有趣的示例，可以使用内嵌汇编语言在C语言中实现一个简单的猜数字游戏： ```c #include #include #include int main() { int guess = 0; int number; srand((unsigned)time(NULL)); number = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值