通过shopify幻灯片演示部分实施平面脚本

问题描述

我正在尝试将动画平面脚本添加到shopify幻灯片显示部分。 我正在使用的主题会在这些部分中自动加载正确大小的图像，即使上传了最大版本的图像（精简主题，如果有人熟悉的话）。 由于飞机的使用，我一直在页面速度方面遇到问题，所以我想看看这对我遇到的速度下降是否有帮助。我目前将它们显示在自定义html部分中，因此未利用主题的优化加载方法。

尽管如此，我仍然无法弄清楚如何使他们一起玩。我设法制作了动画平面显示器，但是它非常容易出错，无法固定在原处。刷新后，它将完全停止显示，仅显示源图像。 我敢肯定，如果有人可以帮忙，这里就会发生冲突。

下面的HTML只是完整部分代码的一部分，以幻灯片显示的图像为目标。如果需要完整的代码，请告诉我。

<script>
    window.addEventListener("load",function () {
  var curtains = new Curtains({
    container: "planes-canvas"
  });

  var planeEls = document.getElementsByClassName("planes");

  var vs = `#ifdef GL_ES
  precision mediump float;
  #endif

  // default mandatory attributes
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  // those projection and model view matrices are generated by the library
  // it will position and size our plane based on its HTML element CSS values
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  // texture coord varying that will be passed to our fragment shader
  varying vec2 vTextureCoord;

  void main() {
    // apply our vertex position based on the projection and model view matrices
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition,1.0);

    // varying
    // use texture matrix and original texture coords to generate accurate texture coords
    vTextureCoord = aTextureCoord;
  }`;

  var fs = `
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // the uniform we declared inside our javascript
    uniform float uTime;

    // our texture sampler (default name,to use a different name please refer to the documentation)
    uniform sampler2D planeTexture;


    vec3 hueRotate(vec3 col,float hue) {
        vec3 k = vec3(0.57735,0.57735,0.57735);
        float cosAngle = cos(hue);
        return col * cosAngle + cross(k,col) * sin(hue) + k * dot(k,col) * (1.0 - cosAngle);
    }

    vec3 saturate(vec3 rgb,float adjustment) {
        vec3 W = vec3(0.2125,0.7154,0.0721);
        vec3 intensity = vec3(dot(rgb,W));
        return mix(intensity,rgb,adjustment);
    }


    void main() {
        // get our texture coords
        vec2 textureCoord = vTextureCoord;

        // displace our pixels along both axis based on our time uniform and texture UVs
        // this will create a kind of water surface effect
        // try to comment a line or change the constants to see how it changes the effect
        // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
        const float PI = 3.141592;

        textureCoord.x += (
                    sin(textureCoord.x * 12.0 + ((uTime * (PI / 15.0)) * 0.031))
                    + sin(textureCoord.y * 12.0 + ((uTime * (PI / 12.489)) * 0.047))
                    ) * 0.0050;

                textureCoord.y += (
                    sin(textureCoord.y * 8.0 + ((uTime * (PI / 12.023)) * 0.023))
                    + sin(textureCoord.x * 8.0 + ((uTime * (PI / 15.1254)) * 0.067))
                    ) * 0.0100;

        vec4 color = texture2D(planeTexture,textureCoord);

        // hue rotation from 0 to PI in 10 seconds
        float hueRotation = cos(uTime / 600.0) * PI;
        color.rgb = hueRotate(color.rgb,hueRotation);

        // saturate
        color.rgb = saturate(color.rgb,2.0);

        gl_FragColor = color;
    }
`;

  var planes = [];

  function handlePlane(index) {
    var plane = planes[index];

    plane
      .onReady(function () {
        // our texture has been loaded,resize our plane!
        plane.planeResize();
      })
      .onRender(function () {
        plane.uniforms.time.value++;
      });
  }

  for (var i = 0; i < planeEls.length; i++) {
    var params = {
      vertexShader: vs,fragmentShader: fs,uniforms: {
        time: {
          name: "uTime",type: "1f",value: 0
        }
      }
    };

    var plane = curtains.addplane(planeEls[i],params);

    if (plane) {
      planes.push(plane);

      handlePlane(i);
    }
  }
});

  </script>

.hero__image-wrapper,.hero__media{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}

.hero__image-wrapper--overlay:before,.hero__media--overlay:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:3;
    background-color:{{ settings.color_image_overlay | default: "#000" }};
    background-color:var(--colorImageOverlay);
    opacity:{{ settings.color_image_overlay_opacity | divided_by: 100.0 }};
    opacity:var(--colorImageOverlayOpacity)
  }

.video-interactable .hero__image-wrapper--overlay:before,.video-interactable .hero__media--overlay:before{
      pointer-events:none
  }

.hero__image{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
  -o-object-fit:cover;
     object-fit:cover;
  font-family:"object-fit: cover";
}

#planes-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.planes {
  background-color: #fff;
  margin: 0 auto;
}

/*** the images will define the height of our planes ***/
.planes img {
  display: block;
  width: 100%;
  height: auto;
  /* hide the original image */
  opacity: 0;
  background-color: #fff;
}

/*** set the width of our planes ***/

#portrait {
  width: 40%;
}

#landscape {
  width: 100vw;
}
    
/* Custom,iPhone Retina */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {
#portrait {
  width: 100vw;
  height: auto;
  }
}

<div class="hero__image-wrapper{% if hero_text %} hero__image-wrapper--overlay{% endif %}">
                {%- if block.settings.image != blank -%}
                  {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.','_{width}x.' -%}
                            <div id="planes-canvas"></div>
                  <div id="landscape" class="planes">
                  <img class="hero__image hero__image--{{ block.id }} lazyload{% if block.settings.image_mobile != blank %} small--hide{% endif %}"
                    src=""
                    data-src="{{ img_url }}"
                    data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                    data-sizes="auto"
                    data-parent-fit="cover"
                    alt="{{ block.settings.image.alt | escape }}"
                    data-sampler="planeTexture"
                    crossorigin="">
                  <noscript>
                    <img class="hero__image hero__image--{{ block.id }}{% if block.settings.image_mobile != blank %} small--hide{% endif %}"
                      src="{{ block.settings.image | img_url: '1400x' }}"
                      alt="{{ block.settings.image.alt | escape }}">
                  </noscript>

                  {%- if block.settings.image_mobile != blank -%}
                    {%- assign img_mobile_url = block.settings.image_mobile | img_url: '1x1' | replace: '_1x1.','_{width}x.' -%}
                    <img class="hero__image hero__image--{{ block.id }} lazyload medium-up--hide"
                      src=""
                      data-src="{{ img_mobile_url }}"
                      data-aspectratio="{{ block.settings.image_mobile.aspect_ratio }}"
                      data-sizes="auto"
                      data-parent-fit="cover"
                      alt="{{ block.settings.image_mobile.alt | escape }}">
                    <noscript>
                      <img class="hero__image hero__image--{{ block.id }} medium-up--hide"
                        src="{{ block.settings.image_mobile | img_url: '1400x' }}"
                        alt="{{ block.settings.image_mobile.alt | escape }}">
                    </noscript>
                  {%- endif -%}
                {%- else -%}
                  {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                {%- endif -%}
              </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）