HTML+CSS+JS实现 ❤️Three碎片化图片切换❤️

举报
Java李杨勇 发表于 2021/09/30 23:41:41 2021/09/30
【摘要】 HTML+CSS+JS实现 ❤️Three碎片化图片切换❤️

🍅 作者主页:Java李杨勇 

🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我,都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示: 博主主页 获取源码


代码目录:


主要代码实现:

CSS样式:

body {
    margin: 0;
    overflow: hidden;
}

canvas {
    background-image: radial-gradient(#666, #333);
}

#instructions {
    position: absolute;
    color: #fff;
    bottom: 0;
    padding-bottom: 6px;
    font-family: sans-serif;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

JavaScript-初始化THREERoot代码 :

function init() {
    var root = new THREERoot({
        createCameraControls: !true,
        antialias: (window.devicePixelRatio === 1),
        fov: 80
    });

    root.renderer.setClearColor(0x000000, 0);
    root.renderer.setPixelRatio(window.devicePixelRatio || 1);
    root.camera.position.set(0, 0, 60);

    var width = 100;
    var height = 60;

    var slide = new Slide(width, height, 'out');
    var l1 = new THREE.ImageLoader();
    l1.setCrossOrigin('Anonymous');
    l1.load('images/winter.jpg', function(img) {
        slide.setImage(img);
    })
    root.scene.add(slide);

    var slide2 = new Slide(width, height, 'in');
    var l2 = new THREE.ImageLoader();
    l2.setCrossOrigin('Anonymous');
    l2.load('images/spring.jpg', function(img) {
        slide2.setImage(img);
    })

    root.scene.add(slide2);

    var tl = new TimelineMax({
        repeat: -1,
        repeatDelay: 1.0,
        yoyo: true
    });

    tl.add(slide.transition(), 0);
    tl.add(slide2.transition(), 0);

    createTweenScrubber(tl);

    window.addEventListener('keyup', function(e) {
        if (e.keyCode === 80) {
            tl.paused(!tl.paused());
        }
    });
}

上面的图片可以自己替换成喜欢、JS文件需要引入进来

源码获取

大家点赞、收藏、关注、评论我啦 、查看博主主页获取更多~!

打卡 文章 更新 51 /  100天

精彩推荐更新中:

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》 

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。