zim实现线条跟踪banner效果-html代码-BFW代码库

zim实现线条跟踪banner效果

代码语言：html

所属分类：多媒体

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/createjs.min.js"></script>
    <script src="http://repo.bfw.wiki/bfwrepo/js/zim-min.js"></script>

    <script src="http://repo.bfw.wiki/bfwrepo/js/pizzazz_03.js"></script>
    <script>

        // SCALING OPTIONS
        // scaling can have values as follows with full being the default
        // "fit"    sets canvas and stage to dimensions and scales to fit inside window size
        // "outside"    sets canvas and stage to dimensions and scales to fit outside window size
        // "full"    sets stage to window size with no scaling
        // "tagID"    add canvas to HTML tag of ID - set to dimensions if provided - no scaling

        var scaling = "banner"; // target the banner tag
        var width = 1000;
        var height = 150;
        var color = dark;
        var outerColor = dark;

        // as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
        var frame = new Frame(scaling, width, height, color, outerColor);
        frame.on("ready", function() {
            zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

            const stage = frame.stage;
            const stageW = frame.width;
            const stageH = frame.height;

            // the general idea is we have two ZIM Frame objects each with their own canvas and stage
            // the first we see to start and it is scaled to fit in the div with id=banner
            // this frame is interactive
            // the second is a full window frame and it is not interactive
            // this allows us to interact with the HTML
            // we made it not interactive by turning off the canvas pointerEvents
            // we hide and show the content when we press anywhere on the banner
            // we could have made a button, etc.

            // BTW -	we can certainly make objects travel along paths see https://zimjs.com/nio/
            // here we wanted to give the illusion of a continuous path so used ZIM Noise.

            // make the animated backing lines with ZIM Pizzazz - see imported js file for details
            pizzazz.........完整代码请登录后点击上方下载按钮下载查看