templates/digitalwandler/Components/particle-script.html.twig line 1

Open in your IDE?
  1. {% if not editmode and not pimcore_device().isPhone() %}
  2.     {% do pimcore_head_script().appendFile(asset('/build/js/tsparticles.min.js')) %}
  3.     <style>
  4.         {% if not editmode %}
  5.         #tsparticles{{randomId}} {
  6.             position: fixed;
  7.             top: 0;
  8.             width: 28vw;
  9.             height: 100vh;
  10.             background-repeat: no-repeat;
  11.             background-size: cover;
  12.             background-position: 50% 50%;
  13.             z-index: -1;
  14.             padding-left: 0px;
  15.         }
  16.         #tsparticles{{randomId}}:before {
  17.             content: "";
  18.             background: black;
  19.             width: 100%;
  20.             height: 100%;
  21.             display: block;
  22.             top: -100%;
  23.             position: absolute;
  24.         }
  25.         {% endif %}
  26.     </style>
  27.     <script>
  28.         ready(() => {
  29.             const overlayElem = document.createElement("div");
  30.             overlayElem.id = "tsparticlesOverlay";
  31.             const tsparticlesContainer = document.getElementById('tsparticles{{randomId}}');
  32.             tsparticlesContainer.prepend(overlayElem);
  33.             const dnaContainer = document.querySelector('.dna-container');
  34.             if (dnaContainer) {
  35.                 const dnaHeight = dnaContainer.clientHeight;
  36.                 const scrollIncrement = dnaHeight/100;
  37.                 window.addEventListener('scroll', () => {
  38.                     overlayElem.style.transform = "translate3d(0px, " + Math.round(Math.max(window.scrollY/scrollIncrement, 0)) + "%, 0px)";
  39.                 });
  40.             }
  41.             tsParticles.load("tsparticles{{randomId}}", {
  42.                 autoPlay: true,
  43.                 {% if not editmode %}
  44.                 background: {
  45.                     image: "linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(234,0,42,0.5) 52%)",
  46.                     attachment: "fixed",
  47.                     repeat: "no-repeat",
  48.                     size: "100% 100vh",
  49.                     opacity: 1
  50.                 },
  51.                 backgroundMask: {
  52.                     composite: "destination-out",
  53.                     {% if not editmode %}
  54.                     cover: { color: { value: { r: 0, g: 0, b: 0 } }, opacity: 1 },
  55.                     {% endif %}
  56.                     enable: true
  57.                 },
  58.                 {% endif %}
  59.                 backgroundMode: { enable: false, zIndex: -1 },
  60.                 detectRetina: true,
  61.                 fpsLimit: 30,
  62.                 interactivity: {
  63.                     detectsOn: "window",
  64.                     events: {
  65.                         onClick: { enable: true, mode: "push" },
  66.                         onHover: {
  67.                             enable: true,
  68.                             mode: "bubble",
  69.                             parallax: { enable: false, force: 60, smooth: 10 }
  70.                         },
  71.                         resize: true
  72.                     },
  73.                     modes: {
  74.                         bubble: { distance: 220, duration: 2, opacity: 1, size: 20 },
  75.                         push: { quantity: 1 },
  76.                     }
  77.                 },
  78.                 motion: { disable: false, reduce: { factor: 10, value: true } },
  79.                 particles: {
  80.                     color: {
  81.                         value: "#ffffff",
  82.                         animation: { enable: false, speed: 1, sync: true }
  83.                     },
  84.                     links: {
  85.                         blink: false,
  86.                         {% if pimcore_checkbox('netAnimationWhite').isChecked() and not editmode %}
  87.                         color: { value: "#EA002A" },
  88.                         {% else %}
  89.                         color: { value: "#ffffff" },
  90.                         {% endif %}
  91.                         consent: false,
  92.                         distance: 150,
  93.                         enable: true,
  94.                         frequency: 1,
  95.                         opacity: 1,
  96.                         shadow: { blur: 5, color: { value: "#00ff00" }, enable: false },
  97.                         triangles: { enable: false, frequency: 1 },
  98.                         width: 1,
  99.                         warp: false
  100.                     },
  101.                     move: {
  102.                         angle: { offset: 45, value: 90 },
  103.                         attract: { enable: false, rotate: { x: 600, y: 1200 } },
  104.                         direction: "none",
  105.                         distance: 0,
  106.                         enable: true,
  107.                         outModes: {
  108.                             default: "bounce",
  109.                             bottom: "bounce",
  110.                             left: "bounce",
  111.                             right: "bounce",
  112.                             top: "bounce"
  113.                         },
  114.                         random: true,
  115.                         size: false,
  116.                         speed: 0.6,
  117.                         straight: false,
  118.                         trail: { enable: false, length: 10, fillColor: { value: "#000000" } },
  119.                         vibrate: false,
  120.                         warp: false
  121.                     },
  122.                     number: {
  123.                         density: { enable: true, area: 800, factor: 1000 },
  124.                         limit: 0,
  125.                         value: 57
  126.                     },
  127.                     shape: {
  128.                         options: {
  129.                             image: {
  130.                                 src:
  131.                                     "/build/img/super.svg",
  132.                                 width: 100,
  133.                                 height: 100
  134.                             },
  135.                         },
  136.                         type: "image"
  137.                     },
  138.                     size: {
  139.                         random: { enable: true, minimumValue: 6 },
  140.                         value: 10,
  141.                     },
  142.                 },
  143.                 pauseOnBlur: true,
  144.                 pauseOnOutsideViewport: true,
  145.             });
  146.         });
  147.     </script>
  148. {% endif %}