为 squarespace 封面创建动画背景

编程问答 2022-04-29

问题描述

网站网址：https://www.lightbulb.com.au/home

我正在使用代码块为标题页嵌入粒子-js 动画 (shown here)。基本上是想制作一个这样的封面：https://codepen.io/iDerp/pen/wvaLaMx（覆盖全屏，具有适合移动设备的文本/标题，并在滚动时消失）以及我拥有的动画背景。

我尝试了一些，但遇到了一些问题：

  1. 文本：希望使文本类似于 Dogecoaster - 使用“灯泡”作为“标志”，然后“将战略与执行和人员与目标联系起来”作为'暗示'。当切换到移动设备时，我需要这个才能很好地坐着。我似乎无法在代码中显示文本，因此我使用了 Squarespace 文本块，但这会导致间距丢失。

  2. 视差：如果可能的话，我希望动画在滚动时具有视差功能，然后像 Dogecoaster 一样滚动消失。我对图像的视差做了一些研究，但我无法用这种动画效果复制它，因为它无法编码为“背景附件：固定”。

  3. 封面：主要目标是让这个标题页占据整个屏幕。然后当您开始滚动时，标题菜单出现，背景消失以显示页面的其余部分。目前，我无法让菜单仅在滚动时出现。即使我使用的是“高度：100vh；”，我也无法让动画背景显示为相同大小的屏幕（尤其是在 ipad 和手机大小之间移动时）我确定您在我的网站上可以看到，动画没有覆盖整个页面，并且在移动设备上查看时缩放效果不佳。

任何帮助将不胜感激！

这是我当前的代码；

<!-- particles.js container --> <div id="particles-js"></div> 
<!-- particles.js lib - https://github.com/vincentGarreau/particles.js --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 

<style>
  h1{color:white;
  z-index:99!important;}
  #block-de839e242497a7829823 {z-index:101!important;}
  
  #block-yui_3_17_2_1_1618818769687_39082 {
    height: 100vh;
    width: 110vw;
    margin-top: -20vh!important;
    margin: 0rem -60vw;
    position: relative;
    left: 50%;
    right: 50%;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center !important;
    background-repeat: no-repeat;
    z-index:0;}
/* ---- reset ---- */ body{ margin:0; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #262626; background-repeat: no-repeat; background-size: cover; background-position: 0% 0%; }
</style>

<script>

particlesJS("particles-js",{"particles":{"number":{"value":30,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.7,"random":true,"anim":{"enable":true,"speed":0.1,"opacity_min":0.3,"sync":false}},"size":{"value":30,"speed":1,"size_min":0.3,"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1.5,"direction":"none","straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"},"onclick":{"enable":false,"mode":"remove"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});;
</script>

解决方法

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

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

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

animationanimationanimationhtmlparticles.jssquarespace