如何解决为 squarespace 封面创建动画背景
网站网址:https://www.lightbulb.com.au/home
我正在使用代码块为标题页嵌入粒子-js 动画 (shown here)。基本上是想制作一个这样的封面:https://codepen.io/iDerp/pen/wvaLaMx(覆盖全屏,具有适合移动设备的文本/标题,并在滚动时消失)以及我拥有的动画背景。
我尝试了一些,但遇到了一些问题:
-
文本:希望使文本类似于 Dogecoaster - 使用“灯泡”作为“标志”,然后“将战略与执行和人员与目标联系起来”作为'暗示'。当切换到移动设备时,我需要这个才能很好地坐着。我似乎无法在代码中显示文本,因此我使用了 Squarespace 文本块,但这会导致间距丢失。
-
视差:如果可能的话,我希望动画在滚动时具有视差功能,然后像 Dogecoaster 一样滚动消失。我对图像的视差做了一些研究,但我无法用这种动画效果复制它,因为它无法编码为“背景附件:固定”。
-
封面:主要目标是让这个标题页占据整个屏幕。然后当您开始滚动时,标题菜单出现,背景消失以显示页面的其余部分。目前,我无法让菜单仅在滚动时出现。即使我使用的是“高度: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 举报,一经查实,本站将立刻删除。