Animationen, die auf mobilen Plattformen nicht rendern [geschlossen] ⇐ Jquery

JQuery-Programmierung
Post Reply Previous topicNext topic
Anonymous
 Animationen, die auf mobilen Plattformen nicht rendern [geschlossen]

Post by Anonymous »

Ich habe eine Portfolio -Website mit React JS mit Node JS auf VSCODE erstellt, um meine Fähigkeiten mit einer Terminal -Schreibmaschinenanimation zu präsentieren. Bei Laptop-/PC -Browsern funktioniert alles vollkommen in Ordnung, aber als ich versucht habe, auf Mobile auf meine Website zugegriffen zu haben

Code: Select all

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>
Der CSS -Teil -> < /p>


/* TERMINAL WINDOW ------------------------------------------------ */

/* CONTENT ----------------------------------- */

#fake__Screen:-ms-fullscreen p {
visibility: visible;
font-size: 2.0em;
overflow: auto;
}
#fake__Screen:fullscreen {
font-size: 2.0em;
width: 100vw;
height: 100vh;
overflow: auto;
}

span {
color: #fff;
font-family: monospace;
text-align: left;
font-size: 1.5em;
display: inline-flex;
}
a {
color: #fff;
font-family: monospace;
text-align: left;
}
.codeHead {
color: rgb(0, 229, 255);
font-family: monospace;
text-align: left;
font-size: 1.5em;
display: inline-flex;
}

.typewriter {
width: fit-content;
color: #fff;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .7em solid rgb(0, 229, 255); /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: -10 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
-webkit-animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
animation:
typing 3.5s steps(30, end),
blink-caret .9s step-end infinite;
}
.typewriter1 {
width: fit-content;
color: #fff;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .7em solid rgb(0, 229, 255); /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: -10 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;  /* Adjust as needed */
-webkit-animation:
typing 1s steps(60, end),
blink-caret .5s step-end infinite;
animation:
typing 1s steps(60, end),
blink-caret .9s step-end infinite;
}
.bio:hover {
color: rgb(0, 229, 255);
}
.work:hover {
color: rgb(0, 229, 255);
}
.projects:hover {
color: rgb(0, 229, 255);
}
/* The typing effect */
@-webkit-keyframes typing {
from { width: 0 }
to { width: 40% }
}
@keyframes typing {
from { width: 0 }
to { width: 40% }
}
/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: rgb(0, 238, 255) }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: rgb(0, 208, 255) }
}

#id {
overflow-y:auto;
}
/* CONTENT ----------------------------------- */

body {
background-color: rgb(84, 96, 97);
padding: 10px;
margin-bottom: 0;
padding-bottom: 0;
}

.fakeButtons {
height: 10px;
width: 10px;
border-radius: 50%;
border: 1px solid #000;
position: relative;
top: 6px;
left: 6px;
background-color: #ff3b47;
border-color: #9d252b;
display: inline-block;
}

.fakeMinimize {
left: 11px;
background-color: #ffc100;
border-color: #9d802c;
}

.fakeZoom {
left: 16px;
background-color: #00d742;
border-color: #049931;
}

.fakeMenu {
max-width: 748px;
box-sizing: border-box;
height: 25px;
background-color: #bbb;
margin: 0 auto;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
text-align: left;
}

.fakeScreen {
background-color: #151515;
box-sizing: border-box;
max-width: 748px;
height: 467.50px;
margin: 0 auto;
padding: 20px;
overflow: auto;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

}

p {
position: relative;
left: 22%;
margin-left: -8.5em;
text-align: left;
font-size: 2.5em;
font-family: monospace;
white-space: normal;
overflow: hidden;
width: 0;
}

.hide {
display: none;
}

/* TERMINAL WINDOW ------------------------------------------------ */

/* CLOUDS SYLE 000000000000000000000000000000000000000000000000*/

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
0% {
margin-left: -1000px;
}
100% {
margin-left: 100%;
}
}

@-moz-keyframes animateCloud {
0% {
margin-left: -1000px;
}
100% {
margin-left: 100%;
}
}

@keyframes animateCloud {
0% {
margin-left: -1000px;
}
100% {
margin-left: 100%;
}
}

/* ANIMATIONS */

.x1 {
-webkit-animation: animateCloud 35s linear infinite;
-moz-animation: animateCloud 35s linear infinite;
animation: animateCloud 35s linear infinite;

-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
transform: scale(0.65);
}

.x2 {
-webkit-animation: animateCloud 20s linear infinite;
-moz-animation: animateCloud 20s linear infinite;
animation: animateCloud 20s linear infinite;

-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}

.x3 {
-webkit-animation: animateCloud 30s linear infinite;
-moz-animation: animateCloud 30s linear infinite;
animation: animateCloud 30s linear infinite;

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}

.x4 {
-webkit-animation: animateCloud 18s linear infinite;
-moz-animation: animateCloud 18s linear infinite;
animation: animateCloud 18s linear infinite;

-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}

.x5 {
-webkit-animation: animateCloud 25s linear infinite;
-moz-animation: animateCloud 25s linear infinite;
animation: animateCloud 25s linear infinite;

-webkit-transform: scale(0.55);
-moz-transform: scale(0.55);
transform: scale(0.55);
}

/* OBJECTS */

.cloud {
background: #fff;
background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
background:  -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;

-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

height: 120px;
position: relative;
width: 350px;
}

.cloud:after, .cloud:before {
background: #fff;
content: '';
position: absolute;
z-indeX: -1;
}

.cloud:after {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;

height: 100px;
left: 50px;
top: -50px;
width: 100px;
}

.cloud:before {
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;

width: 180px;
height: 180px;
right: 50px;
top: -90px;
}

/* CLOUDS SYLE 000000000000000000000000000000000000000000000000*/

/* SUNRISE - SUNSET END ------------------------------------------- */

@keyframes sunrise {
from {
transform: rotate(-45deg);
}

to {
transform: rotate(315deg);
}
}

@keyframes moonrise {
from {
transform: rotate(0deg);
}

to {
transform: rotate(180deg);
}
}

@keyframes dawn {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
60% {
opacity: 0;
}
}

@keyframes noon {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
}

@keyframes dusk {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
70% {
opacity: 1;
}
90% {
opacity: 0;
}
}

@keyframes midnight {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 0;
}
80% {
opacity: 1;
}
}

body {
--animation-speed: 1200s;
background-color: #63689b;

}

body.pause {
--animation-speed: 0;
}

.sky {
width: 85vw;
height: 100vh;
position: fixed;
top: 2%;
left: 7%;
max-height: 600px;
overflow: hidden;
}

.sky__phase {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: opacity 0.2s;
}

.sky__dawn {
background: linear-gradient(
0deg,
rgba(254, 215, 102, 1) 0%,
rgba(205, 237, 246, 1) 100%
);
animation: linear dawn infinite var(--animation-speed);
}

.sky__noon {
background: linear-gradient(
0deg,
rgba(205, 237, 246, 1) 0%,
rgba(36, 123, 160, 1) 100%
);
animation: linear noon infinite var(--animation-speed);
}

.sky__dusk {
background: linear-gradient(
0deg,
rgba(255, 32, 110, 1) 0%,
rgba(10, 0, 94, 1) 100%
);
animation: linear dusk infinite var(--animation-speed);
}

.sky__midnight {
background: linear-gradient(
0deg,
rgba(2, 0, 20, 1) 0%,
rgba(10, 0, 94, 1) 100%
);
animation: linear midnight infinite var(--animation-speed);
}

.orbit {
position: relative;
width: 500px;
height: 500px;
margin: 200px auto;
transform: rotate(-45deg);
animation: linear sunrise infinite var(--animation-speed);
}

@media (min-width: 768px) {
.sky {
max-height: 600px;
}
.orbit {
width: 700px;
height:  700px;
margin: 150px auto;
}
}

@media (min-width: 940px) {
.orbit {
width: 800px;
height: 800px;
}
}

@media (min-width: 1200px) {
body {
--animation-speed: 1204s;
}
.orbit {
width: 1000px;
height: 1000px;
margin: 200px auto;
}
}

@media (min-width: 1500px) {
body {
--animation-speed: 1206s;
}
.orbit {
width: 1300px;
height: 1300px;
}
}

.sun {
position: absolute;
top: -40px;
left: -40px;
width: 80px;
height: 80px;
background-color: rgb(254, 215, 102);
border-radius: 50%;
box-shadow: 0 0 14px 14px rgba(254, 215, 102, 0.2);
}

.moon {
position: absolute;
bottom: -40px;
right: -40px;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #ebf3fe;
box-shadow: inset -40px 0px 0px #d8e8f7, inset 20px 0px 0px #ffffff, inset -50px 0px 0px 20px #e2eefa, 0px 0px 0px 20px  rgba(255, 255, 255, 0.05), 0px 0px 0px 40px  rgba(255, 255, 255, 0.025), 0px 0px 0px 60px  rgba(255, 255, 255, 0.0125);
transition: all 0.2s ease-in;
}
.moon:after {
content: "";
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #d8e8f7;
position: absolute;
top: 20%;
left: 20%;
box-shadow: 40px -20px 0px -10px #d8e8f7, 40px 10px 0px -15px #d8e8f7;
}

#sky__stars > div {
width: 3px;
height: 3px;
background-color: #fff;
border-radius: 50%;
position: absolute;
}

#toggle-animation {
position: fixed;
bottom: 1em;
right: 1em;
text-transform: uppercase;
background-color: rgb(2, 0, 20);
color: #fff;
border: 0;
padding: 0.5em 1em;
letter-spacing: 0.5px;
}

#toggle-animation:hover {
background-color: rgb(61, 0, 21);
cursor: pointer;
}

.paused {
display: none;
}

.pause .paused {
display: block;
}

.pause .playing {
display: none;
}

/* SUNRISE - SUNSET END ------------------------------------------- */
< /code>
Das Raumfenster JSX Code -> < /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;
Top
Post Reply Previous topicNext topic

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery”