CURRENT MISSION: Conclude the 2026 soyjak.party hack page, aswell as any pages relating to it, such as the Summer 2026 Crisis page.
Update Quotecord with any relevant info. See the blackboard for more info.

Template:Aspie/styles.css: Difference between revisions

From Soyjak Wiki, the free ensoyclopedia
Jump to navigationJump to search
← Older edit
m Cobblestone moved page Template:Aspietrainanimation.css to Template:Aspietrainanimation/styles.css without leaving a redirect: Text replacement - "Aspietrainanimation.css" to "Aspietrainanimation/styles.css"
Undo revision 397053 by Vantared brapped css award
Tag: Undo
 
(34 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* train animation */
.template-aspie {
.train{
overflow: hidden;
  animation: trainaimation 4s linear;
border: 4px ridge #ffd900;
background: url("https://soyjakwiki.org/images/8/8c/Aspie.svg");
background-size: 4rem;
background-position: center;
text-shadow: 0 1px 2px #523200;
color: white;
box-shadow: inset 0 0 5px 0 #523200;
}
}
@keyframes trainaimation {
 
  0% {
.template-aspie a {
    visibility:visible;
color: #8dff99;
    transform: translate(0, 0);
  }
  100% {
    transform: translate(556%, 0);
  }
}
}


.texttraineffect {
.template-aspie .line1 {
  display:inline-flex;
font-size: 170%;
}
}


.texttraineffect span {
.template-aspie .line2 {
  word-break: break-all;
width: 100%;
  height: 1.2em;
  overflow: hidden;
  animation:t 4s linear;
}
}
.texttraineffect span:before {
 
  content:" ";
.template-aspie .random-text-wrapper {
  display:inline-block;
display: flex;
position: relative;
justify-content: center;
}
}
/* The text will have an illusion of appearing as it passes the train using a width effect. */
@keyframes t {
  0%,15% {
    width:0%
  }
  75% {
    width:100%
  }


.template-aspie .random-text {
display: block;
clip-path: inset(0 30rem 0 0);
animation: text-reveal 3s linear forwards 2s;
width: 100%;
}
}


.template-aspie .train {
position: absolute;
justify-self: center;
align-self: center;
animation: train-animation 7s linear forwards;
}


 
@keyframes text-reveal {
/*This changes the autism text to be animated in the colors of colorjak. you know since le heccing autism
   from {
I chose this in a very spefic way as the colors are the exact colors found on colorjak to the exact hex number but also added new ones
     clip-path: inset(0 30rem 0 0);
*/
.colorjaktext{
  animation: colors 3s steps(1) infinite;
}
@keyframes colors {
   0% {
     color: #1E90FF; /* Bright blue */
    text-shadow: 0 0 5px #339FFF, 0 0 10px #339FFF, 0 0 15px #1E90FF;
   }
   }
   14.28% {
   to {
     color: #00FFFF; /* Aqua */
     clip-path: inset(0 0rem 0 0);
    text-shadow: 0 0 5px #00DDDD, 0 0 10px #00DDDD, 0 0 15px #00FFFF;
   }
   }
  28.56% {
}
    color: #FF4500; /* Bright red */
 
    text-shadow: 0 0 5px #FF6347, 0 0 10px #FF6347, 0 0 15px #FF4500;
@keyframes train-animation {
  }
   from {
  42.84% {
     transform: translateX(-30rem);
    color: #32CD32; /* Bright lime green */
    text-shadow: 0 0 5px #4DF24D, 0 0 10px #4DF24D, 0 0 15px #32CD32;
  }
  57.12% {
    color: #FF69B4; /* Bright pink */
    text-shadow: 0 0 5px #FF85C0, 0 0 10px #FF85C0, 0 0 15px #FF69B4;
   }
  71.40% {
     color: #8A2BE2; /* Electric Purple (replaces black) */
    text-shadow: 0 0 5px #A855FF, 0 0 10px #A855FF, 0 0 15px #8A2BE2;
  }
  85.68% {
    color: #DA70D6; /* Bright magenta */
    text-shadow: 0 0 5px #EE82EE, 0 0 10px #EE82EE, 0 0 15px #DA70D6;
   }
   }
   100% {
   to {
     color: #1E90FF; /* Back to Bright blue */
     transform: translateX(30rem);
    text-shadow: 0 0 5px #339FFF, 0 0 10px #339FFF, 0 0 15px #1E90FF;
   }
   }
}
}

Latest revision as of 15:12, 20 May 2026

.template-aspie {
	overflow: hidden;
	border: 4px ridge #ffd900;
	background: url("https://soyjakwiki.org/images/8/8c/Aspie.svg");
	background-size: 4rem;
	background-position: center;
	text-shadow: 0 1px 2px #523200;
	color: white;
	box-shadow: inset 0 0 5px 0 #523200;
}

.template-aspie a {
	color: #8dff99;
}

.template-aspie .line1 {
	font-size: 170%;
}

.template-aspie .line2 {
	width: 100%;
}

.template-aspie .random-text-wrapper {
	display: flex;
	position: relative;
	justify-content: center;
}

.template-aspie .random-text {
	display: block;
	clip-path: inset(0 30rem 0 0);
	animation: text-reveal 3s linear forwards 2s;
	width: 100%;
}

.template-aspie .train {
	position: absolute;
	justify-self: center;
	align-self: center;
	animation: train-animation 7s linear forwards;
}

@keyframes text-reveal {
  from {
    clip-path: inset(0 30rem 0 0);
  }
  to {
    clip-path: inset(0 0rem 0 0);
  }
}

@keyframes train-animation {
  from {
    transform: translateX(-30rem);
  }
  to {
    transform: translateX(30rem);
  }
}
Retrieved from "https://soyjakwiki.org/index.php?title=Template:Aspie/styles.css&oldid=397062"