मेरे पास कार्यों में एक एनिमेटेड पृष्ठभूमि है।

मैं जो लक्ष्य कर रहा हूं वह "बुलबुले" के लिए एक यादृच्छिक वेग पर एक यादृच्छिक प्रक्षेपवक्र में यात्रा करने के लिए है। स्क्रीन के किनारे पर पहुंचने पर, यह पथ को जारी रखने के लिए विपरीत दिशा में वापस टेलीपोर्ट करता है।

मैं सीएसएस के माध्यम से एनीमेशन करूँगा, लेकिन मैं चाहता हूं कि प्रत्येक "बबल" पथ यादृच्छिक हो।

प्रत्येक तत्व के लिए ऐसा कुछ।

Each element follows its own randomly generated path and repeats it indefinitely.

मैं जावास्क्रिप्ट के माध्यम से इस प्रभाव को कैसे प्राप्त करूं?

यह वर्तमान स्थिति में परियोजना है।

कोडपेन : https://codepen.io/JosephChunta/pen/WNrKxeY

वर्तमान जावास्क्रिप्ट

const orderedNumber = document.querySelectorAll('.backgroundBubble');
var colors = [
  '#ff5b00', '#b8d500', '#795ced', 
  '#ab004a', '#21aec0', '#fe9300' 
];
for (li of orderedNumber) {
  var random_color = colors[Math.floor(Math.random() * colors.length)];
  li.style['background'] = random_color;
  var random_dimensions = Math.floor(Math.random() * 20 + 5);
  li.style['width'] = random_dimensions + "px";
  li.style['height'] = random_dimensions + "px";
  var random_left = Math.floor(Math.random() * 99 + 1);
  li.style['left'] = random_left + "%";
  var random_top = Math.floor(Math.random() * 99 + 1);
  li.style['top'] = random_top + "%";
}

"बबल" एचटीएमएल

<div class="context">
  <h1>Hello</h1>
</div>

<div class="area">
  <ul class="circles">
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
    <li class="backgroundBubble"></li>
  </ul>
</div>
4
Joseph Chunta 1 अगस्त 2020, 17:28

1 उत्तर

यह काम कर सकता है लेकिन स्क्रीन के दूसरे छोर पर टेलीपोर्ट करने के बजाय यह एक अधिक दिलचस्प एनीमेशन बनाने के लिए वापस उछलता है

 const orderedNumber = document.querySelectorAll('.backgroundBubble');
var colors = [
  '#ff5b00', '#b8d500', '#795ced', 
  '#ab004a', '#21aec0', '#fe9300' 
];
const liData = [];

orderedNumber.forEach((li,index)=>{
  
  var random_color = colors[Math.floor(Math.random() * colors.length)];
  li.style['background'] = random_color;
  var random_dimensions = Math.floor(Math.random() * 20 + 5);
  li.style['width'] = random_dimensions + "px";
  li.style['height'] = random_dimensions + "px";
  var random_left = Math.floor(Math.random() * 99 + 1);
  li.style['left'] = random_left + "%";
  var random_top = Math.floor(Math.random() * 99 + 1);
  li.style['top'] = random_top + "%";
  // ADDING MOVEMENT VALUES:
  liData[index] = {
    hasFlipped: false,
    targetX: 0,
    targetY: 0,
    offsetX: Math.floor( Math.random() * 10 ),
    offsetY: Math.floor( Math.random() * 10 )
  }

});

setInterval(function(){
  orderedNumber.forEach((li,index)=>{
    const { top, left, right, bottom } = li.getBoundingClientRect();
    let { offsetX, offsetY } = liData[index];
    if ( liData[index].hasFlipped ){
      if ( top <= 0 || left <= 0 ){
        liData[index].hasFlipped = false;
      }
      liData[index].targetX -= offsetX;
      liData[index].targetY -= offsetY;

    } else {
      if ( bottom >= window.innerHeight || right >= window.innerWidth ){
        liData[index].hasFlipped = true;
      }
      liData[index].targetX += offsetX;
      liData[index].targetY += offsetY;
    }
      li.style.transform = `translate( ${liData[index].targetX}px,  ${liData[index].targetY}px )`;

  });

}, 50 )

बस इसे अपने जावास्क्रिप्ट से बदलें और यह काम करेगा

-1
webing 1 अगस्त 2020, 18:19