0.0.2 • Published 4 months ago

@zym-com/scroll-dom v0.0.2

Weekly downloads
-
License
-
Repository
-
Last release
4 months ago

Install

npm install @zym-com/scroll-dom

or

yarn add @zym-com/scroll-dom

Import

import ScrollDom from "@zym-com/scroll-dom";
import "@zym-com/scroll-dom/dist/style.css";

Usage

import ScrollDom from "@zym-com/scroll-dom";
import "@zym-com/scroll-dom/dist/style.css";
const options = {
  configuration: {
    direction: "left",
    speed: 20,
    mixBlendModetype: false,
    mixBlendMode: "normal",
    dataSeries: [
      {
        fildType: "value",
        accurateMatching: true,
        fildValue: {
          field: "",
          value: "",
        },
        numericField: "value",
        valueRange: {
          min: "0",
          max: "100",
        },
        domContainerSize: {
          x: "100px",
          y: "160px",
        },
        domPosition: {
          x: 0,
          y: 0,
        },
        bgColorSelect: "solidBgColor",
        solidBgColor: "rgba(24, 144, 255,0.15)",
        bgAnamorphism: {
          startVal: "rgba(255,68,68,1)",
          endVal: "rgba(255,68,68,1)",
          direction: 180,
        },
        bgimage: "",
        bgimageSize: "cover",
        bgtransparency: 1,
        borderStyle: "solid",
        borderWidthName: 2,
        borderColor: "rgba(24, 144, 255,1)",
        bgborderRadiusName: 0,
        contentSeries: [
          {
            domType: "image",
            contentMapping: "img",
            domSize: {
              x: "100",
              y: "100",
            },
            domItemPosition: {
              x: "50%",
              y: "50%",
            },
            colorSelect: "solidColor",
            solidColor: "rgba(255,255,255,1)",
            anamorphism: {
              startVal: "rgba(255,68,68,1)",
              endVal: "rgba(255,68,68,1)",
              direction: 180,
            },
            textStyle: {
              fontFamily: "Microsoft Yahei",
              fontSize: 18,
              fontWeight: "normal",
              letterSpacing: 0,
              lineHeight: 18,
              fontStyle: "normal",
            },
            levelalignment: "center",
            paragraphspacing: 0,
            transparency: 1,
            shadow: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              shadowColor: "rgba(255,255,255,1)",
            },
            objectFit: "contain",
            borderRadius: "5px",
            objectFitVideo: "contain",
            opacityVideo: 1,
            autoPlayVideo: true,
            controlsVideo: true,
            loopVideo: false,
            mutedVideo: false,
            htmlTemplate: "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
            htmlCss:
              ".box {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    flex-direction: column-reverse;\r\n    position: relative\r\n}\r\n\r\n.title {\r\n    font-size: 16px;\r\n    font-family: Microsoft YaHei;\r\n    font-weight: bold;\r\n    color: #FFFFFF;\r\n    margin-top: 45px;\r\n    margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n    font-size: 24px;\r\n    font-family: DIN;\r\n    font-weight: bold;\r\n    color: #FFB00E;\r\n}\r\n\r\n.img {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 90px;\r\n    height: 50px;\r\n    transform: translate(-50%, -20%)\r\n}",
            textShadow: false,
          },
          {
            domType: "image",
            contentMapping: "img2",
            domSize: {
              x: "90px",
              y: 100,
            },
            domItemPosition: {
              x: "50%",
              y: "50%",
            },
            colorSelect: "solidColor",
            solidColor: "rgba(255,255,255,1)",
            anamorphism: {
              startVal: "rgba(255,68,68,1)",
              endVal: "rgba(255,68,68,1)",
              direction: 180,
            },
            textStyle: {
              fontFamily: "Microsoft Yahei",
              fontSize: 18,
              fontWeight: "normal",
              letterSpacing: 0,
              lineHeight: 18,
              fontStyle: "normal",
            },
            levelalignment: "center",
            paragraphspacing: 0,
            transparency: 1,
            shadow: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              shadowColor: "rgba(255,255,255,1)",
            },
            objectFit: "contain",
            borderRadius: "5px",
            objectFitVideo: "contain",
            opacityVideo: 1,
            autoPlayVideo: true,
            controlsVideo: true,
            loopVideo: false,
            mutedVideo: false,
            htmlTemplate: "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
            htmlCss:
              ".box {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    flex-direction: column-reverse;\r\n    position: relative\r\n}\r\n\r\n.title {\r\n    font-size: 16px;\r\n    font-family: Microsoft YaHei;\r\n    font-weight: bold;\r\n    color: #FFFFFF;\r\n    margin-top: 45px;\r\n    margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n    font-size: 24px;\r\n    font-family: DIN;\r\n    font-weight: bold;\r\n    color: #FFB00E;\r\n}\r\n\r\n.img {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 90px;\r\n    height: 50px;\r\n    transform: translate(-50%, -20%)\r\n}",
            textShadow: false,
          },
          {
            domType: "text",
            contentMapping: "title",
            domSize: {
              x: "90px",
              y: "50px",
            },
            domItemPosition: {
              x: "50%",
              y: "90%",
            },
            colorSelect: "solidColor",
            solidColor: "rgba(255,255,255,1)",
            anamorphism: {
              startVal: "rgba(255,68,68,1)",
              endVal: "rgba(255,68,68,1)",
              direction: 180,
            },
            textStyle: {
              fontFamily: "Microsoft Yahei",
              fontSize: 18,
              fontWeight: "normal",
              letterSpacing: 0,
              lineHeight: 18,
              fontStyle: "normal",
            },
            levelalignment: "center",
            paragraphspacing: 0,
            transparency: 1,
            shadow: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              shadowColor: "rgba(255,255,255,1)",
            },
            objectFit: "contain",
            borderRadius: "5px",
            objectFitVideo: "contain",
            opacityVideo: 1,
            autoPlayVideo: true,
            controlsVideo: true,
            loopVideo: false,
            mutedVideo: false,
            htmlTemplate: "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
            htmlCss:
              ".box {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    flex-direction: column-reverse;\r\n    position: relative\r\n}\r\n\r\n.title {\r\n    font-size: 16px;\r\n    font-family: Microsoft YaHei;\r\n    font-weight: bold;\r\n    color: #FFFFFF;\r\n    margin-top: 45px;\r\n    margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n    font-size: 24px;\r\n    font-family: DIN;\r\n    font-weight: bold;\r\n    color: #FFB00E;\r\n}\r\n\r\n.img {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 90px;\r\n    height: 50px;\r\n    transform: translate(-50%, -20%)\r\n}",
            textShadow: false,
          },
          {
            domType: "text",
            contentMapping: "value",
            domSize: {
              x: "90px",
              y: "50px",
            },
            domItemPosition: {
              x: "50%",
              y: "50%",
            },
            colorSelect: "solidColor",
            solidColor: "rgba(255,255,255,1)",
            anamorphism: {
              startVal: "rgba(255,68,68,1)",
              endVal: "rgba(255,68,68,1)",
              direction: 180,
            },
            textStyle: {
              fontFamily: "Microsoft Yahei",
              fontSize: 18,
              fontWeight: "normal",
              letterSpacing: 0,
              lineHeight: 18,
              fontStyle: "normal",
            },
            levelalignment: "center",
            paragraphspacing: 0,
            transparency: 1,
            shadow: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              shadowColor: "rgba(255,255,255,1)",
            },
            objectFit: "contain",
            borderRadius: "5px",
            objectFitVideo: "contain",
            opacityVideo: 1,
            autoPlayVideo: true,
            controlsVideo: true,
            loopVideo: false,
            mutedVideo: false,
            htmlTemplate: "<div style='background:url([%img%]) no-repeat;' class='box'>\r <img src='[%img2%]' class='img'/>\r <div class='title'>[%title%]</div>\r <div class='num'>[%value%]</div>\r</div>",
            htmlCss:
              ".box {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    flex-direction: column-reverse;\r\n    position: relative\r\n}\r\n\r\n.title {\r\n    font-size: 16px;\r\n    font-family: Microsoft YaHei;\r\n    font-weight: bold;\r\n    color: #FFFFFF;\r\n    margin-top: 45px;\r\n    margin-bottom: 15px\r\n}\r\n\r\n.num {\r\n    font-size: 24px;\r\n    font-family: DIN;\r\n    font-weight: bold;\r\n    color: #FFB00E;\r\n}\r\n\r\n.img {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 90px;\r\n    height: 50px;\r\n    transform: translate(-50%, -20%)\r\n}",
          },
        ],
        backgroundStyleChild: false,
        borderStyleChild: false,
      },
    ],
  },
  base: {
    width: 450,
    height: 200,
  },
  dataSource: [
    {
      title: "丰乐",
      value: "105",
      img: "http://192.168.1.14:88/component-resources/2D/other/ranking1.png",
      img2: "http://192.168.1.14:88/component-resources/2D/other/dizuo.png",
    },
    {
      title: "新桥",
      value: "95",
      img: "http://192.168.1.14:88/component-resources/2D/other/ranking2.png",
      img2: "http://192.168.1.14:88/component-resources/2D/other/dizuo.png",
    },
    {
      title: "肥东",
      value: "87",
      img: "http://192.168.1.14:88/component-resources/2D/other/ranking3.png",
      img2: "http://192.168.1.14:88/component-resources/2D/other/dizuo.png",
    },
    {
      title: "龙门寺",
      value: "51",
      img: "http://192.168.1.14:88/component-resources/2D/other/ranking4.png",
      img2: "http://192.168.1.14:88/component-resources/2D/other/dizuo.png",
    },
    {
      title: "八公山",
      value: "21",
      img: "http://192.168.1.14:88/component-resources/2D/other/ranking5.png",
      img2: "http://192.168.1.14:88/component-resources/2D/other/dizuo.png",
    },
  ],
  bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
};

function App() {
  return (
    <>
      <ScrollDom {...options} />
    </>
  );
}

export default App;
scroll-dom
@feige0629/debug-console@feige0629/react-2d-compiler-sevicereactreact-domstyled-components
@everything-registry/sub-chunk-1082
0.0.2

4 months ago

0.0.1

5 months ago