Анимации не рендеринг на мобильных платформах ⇐ Jquery

[Anonymous]

Я создал веб -сайт портфеля с использованием React JS с Node JS на VSCODE, чтобы продемонстрировать мой набор навыков с помощью анимации для пишущей машинки терминала. Все отлично работает в браузерах для ноутбуков/ПК, но когда я пытался получить доступ к своему веб -сайту на мобильном телефоне, он не показывает ни одной из анимации, даже когда я переключаюсь на веб -сайт настольных компьютеров на моем устройстве Android, все еще нет анимации.import './App.css';
import React, { use, useState } from 'react';
import Windowz from './RoomWindow';
import Table from './Tables';
import Footer from './Footer';
import Contents from './ScreenContent';

function App() {

return (








);
}

export default App;

< /code>
Это часть анимации для Windowz, показывающая солнце и лунную орбиту -> < /p>
import './App.css';
import React, { useState } from 'react';

function Windowz() {
//////////////////////////////////////////////////////
const starsArray = [];
const stars = 40;
let x,y = 0;

// Generate stars randomly using absolute position
for (let i = 0; i < stars; i++) {
x = Math.floor(Math.random() * 100 + 1) + "%";
y = Math.floor(Math.random() * 100 + 1) + "%";
starsArray.push(x);
starsArray.push(y);
}
//////////////////////////////////////////////////////

return (



















{starsArray.map((element,index) => {
return();
})}








);
}

export default Windowz;

< /code>
И это основная часть содержимого экрана -> < /p>
import './App.css';
import React, { useState } from 'react';

function Contents () {

const [state, setState] = useState(false);
const [stype, setTyping] = useState("");
const [state3, setState3] = useState(false);
////////////////////////////////// OPTION SELECTION ///////////////////////////////////////
const [BIO, setBio] = useState(" -bio/");
const [WORK, setWork] = useState(" -work_Experiences/");
const [PROJECTS, setProjects] = useState(" -projects/");
const [state4, setState4] = useState(false);
const [state5, setState5] = useState(false);
const [state6, setState6] = useState(false);
const [state7, setState7] = useState(false);
const [state8, setState8] = useState(false);
const [state9, setState9] = useState(false);

function option1() {
setTimeout(() => {
//setState3(false);
setState4(true);
setState5(true);
setState6(false);
setState7(false);
setState8(false);
setState9(false);
lineThree.classList.remove("typewriter");

}, 500);

}
function option2() {
setState4(false);
setState5(false);
setState6(true);
setState7(true);
setState8(false);
setState9(false);
lineThree.classList.remove("typewriter");

}
function option3() {
setState4(false);
setState5(false);
setState6(false);
setState7(false);
setState8(true);
setState9(true);
lineThree.classList.remove("typewriter");
}
function fullScreen() {
var el = document.getElementById('fake__Screen');
el.requestFullscreen();
}

//////////////////////////////////** OPTION SELECTION **///////////////////////////////////////
function nextLine1() {
setTimeout(() => {
setState(true);
setTyping("hide");
console.log("animation ended1");
}, 2000);
}
function nextLine2() {
setTimeout(() => {
setState3(true);
setState(false);
setTyping("hide");
console.log("animation ended2");
}, 2000);
}
const lineOne = document.getElementById("line1");
const lineTwo = document.getElementById("line2");
const lineThree = document.getElementById("line3");
if (lineOne) {
lineOne.addEventListener("animationend", nextLine1);
}
if (lineTwo) {
lineTwo.addEventListener("animationend", nextLine2);
}

window.onload = () => {
setTyping("typewriter");
console.log("applied");
}

return (










user@sleepyCoderz~$ 

sudo pip i mirza_Asim/portfolio



..........!!!content downloaded!


Select the commands to view ->  sudo cat  {BIO} {WORK} {PROJECTS} 



Professional Summary

$~ An experienced engineer with a Master’s degree in Electrical and Computer
Engineering, currently pursuing a Full-Stack Web/Cloud Development, AI/ML,
and Cybersecurity IT position.

$~ Proficient in a wide range of programming languages, frameworks, and tools.
Hands-on experience in building monitoring dashboards, optimizing queries, and
deploying solutions in cloud environments, combined with a solid foundation in
Cybersecurity and Network management.

Skills and Areas of Expertise

# Languages & Framework: JSX, JavaScript, SQL, React.js, HTML, CSS,
Bootstrap, Spring Boot, Node.js, RESTful APIs, python, C#, C++, MATLAB, ROS,
Express, Shell.

# Databases: MySQL, PostgreSQL

# Tools & Technology: GitHub Actions, Docker, Kubernetes,
Cisco Packet tracer, CI/CD Pipelines, Virtualization (Hyper-V), SNMP,
Prometheus, Grafana, InfluxDB, Netbox, Juniper Networks, Unity, CATIA v5,
AutoCAD, Fusion 360, SolidWorks, Camlytics, Simatic Siemens S7 300,
ServiceNow Administrators course.



$~:  sudo cat  {WORK} {PROJECTS} 


Work Experience

Security Intern, Bell, Mississauga ON

# Conducted research and built monitoring dashboards using Prometheus and
Grafana, provided Level 1 technical support by configuring SNMP for data
collection, and compared Prometheus with InfluxDB for efficiency.
Provisioned new Juniper EX4650 switches, managed Netbox for server room device
data as well as network topology building, collaborated with IBM on SNMP
setup, and gained experience in GitLab CI/CD, Docker deployment, Hyper-V
setup, and full-stack web development.

Data Scientist Developer, Magnify Access Inc, Toronto (remote internship)

# Developed expertise in data science techniques for analyzing and
visualizing complex datasets, optimized user queries for accommodation
recommendations, streamlined queries on the Magnify Access platform to improve
user experience, and built an OCR text extraction project using Python's
Tesseract library for accurate data retrieval and processing.

Cybersecurity Technology Consultant, Amiviz, Dubai (internship)

# Gained expertise in EDR and Network Detection solutions with a CrowdStrike
EDR certification, actively participated in cybersecurity strategy meetings
with partner vendors, demonstrated strong knowledge of the AmiViz product
portfolio, networking, and CCNA concepts, and provided technical support for
DIMM Module replacement and troubleshooting in ExtraHop devices at client
premises.

Mechatronics Engineer, Magna Innovations, Magna Innovations, Dubai (internship) 2021

# Successfully designed the Automated Sliding Screen Robot development project
using SolidWorks, researched materials, and developed a People Counting program by
successfully establishing TCP socket communication between Python and Unity. Served
as an audiovisual representative at the GITEX 2022 event, handling device
maintenance and optimization.



$~:  sudo cat  {BIO} {PROJECTS} 


Academic Projects

QoS Analysis across Tree, Ring, Half-Mesh, and Full-Mesh Network Technology | Winter 2024

# Conducted in-depth comparison of Quality of Service (QoS) metrics across
diverse network topologies.

# Utilized Cisco Packet Tracer and Python to simulate and configure network
environments realistically.

# Analyzed QoS parameters meticulously to discern nuanced performance differences.

# Established a robust framework for future investigations into network performance.

Fake News Detection using CNN-LSTM model (Python)| Winter 2024

# Modified and designed the AI program for improved detection of Fake news present
online employing a combination of CNN and LSTM algorithms to achieve an AUC score
of 97.50%.

# Addressed challenges in processing human language. Aimed to contribute to more
reliable detection systems for a healthier information ecosystem.

# Worked in a group of two for this post-graduation project and successfully
drafted the IEEE research paper.


$~:  sudo cat {BIO}  {WORK} 












);
}

export default Contents;
< /code>
Редактировать:
Спасибо за быстрый ответ! Я попробовал некоторые из упомянутых вами решений, и результаты -> < /p>
The position change from "relative" to "absolute" makes the stars align randomly only on a diagonal line from top left corner to bottom right rectangle corner.
I will link the HTML code here as I think that there are no problems with the HTML code below.
There could be some problem with the css gradient or z-axis part as you mentioned but Im not quite sure which part. Im sorry if the code is messy let me know and I can clear it up a little bit.
When I try Mobile browser simulation on chrome dev tools it displays all animations properly but when i switch to my android device it doesnt. or even on iphone I had to enable animations and then it displayed. but on my android device I cant find any show animations option in settings only on iphone settings.
< /code>
Почему это и почему анимации не могут играть по умолчанию на мобильных устройствах для Apple, а для Android это даже не работает вообще? Я попробовал некоторые из решений, которые вы упомянули, и результаты -> < /p>
Изменение положения от «относительного» на «абсолютное» вызывает звезды случайным образом только на диагональной линии из верхнего левого углу в правый прямоугольник. Часть оси Z, как вы упомянули, но я не совсем уверен, какая часть. Мне жаль, если код грязный, дайте мне знать, и я могу немного его очистить. Или даже на iPhone мне пришлось включить анимацию, а затем он отображался. Но на моем устройстве Android я не могу найти какую -либо опцию Animations Show в настройках только в настройках iPhone.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... -platforms