Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Animation background code block - layers, parallax & cover page


samwalker_

Question

Site URL: https://www.lightbulb.com.au/home

I am using a code block to embed an animation for the title page and am having a few issues: 

  1. Layers: I need the text "connecting people to purpose" and "and strategy to execution" to sit neatly when switching to mobile. Currently the "strategy to execution" part drops off under the animation background. I think that's because the code block is currently inline with the text so pushes the text when re-sizing, but not sure how to fix. In my mind if the animation background sat on z-index:1 and the text sat on z-index:2 it would work, but the column of text still gets pushed 
  2. Parallax: I have done some research into parallax for images but am unable to replicate that with this animated effect because it isn't able to be coded in as 'background-attachment: fixed' 
  3. Cover page: The main goal is to have the entire screen taken up by this animation and the words on load. Then as you start to scroll the header menu appears. Currently I can't get the menu to appear only on scroll. I also can't get the animation background to appear as the exact same size of screen (especially when moving between ipad and phone size) even though I'm using 'height: 100vh;' 

 

Any help would be much appreciated! 

 

Here is my current code; 

 

<!-- 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,"random":true,"anim":{"enable":true,"speed":1,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1.5,"direction":"none","random":true,"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>

 

Link to comment

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...