Let’s create a Star Trek Scroll Animation using HTML and CSS to build a cinematic, scroll driven experience inspired by classic sci fi intros. This effect uses modern CSS features like scroll linked animations, custom properties, scaling, blur, and smooth transitions to make character names fade in one by one while detailed character cards move into focus at the center of the screen.
We’ll use:
- HTML to structure the logo, crew names, character sections with images and information, and a scroll indicator element
- CSS to design the space themed background, control layout using grid and container queries, and apply scroll based keyframe animations for opacity, scaling, positioning, and focus effects
Each character is animated with calculated timing so as you scroll, names appear in sequence, the related character image slides into the center, scales up, reveals its info card, then smoothly transitions out while the next one takes focus. The layered space background and subtle lighting effects add depth, making the entire animation feel immersive, polished, and cinematic.
HTML :
This HTML code creates a Star Trek themed scroll animation page where a logo appears at the top, followed by a list of crew names, and then detailed character sections with images, actor names, roles, famous quotes, and personality notes for each member like Kirk and Spock. All characters are wrapped inside a main container for layout and scrolling effects handled by external CSS and JavaScript files. At the bottom, a custom SVG mouse icon is added for visual interaction, and the animation behavior is controlled using the linked style.css and script.js files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Star Trek Scroll Animation | @coding.stella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="logo">
<img src="./Img/logo.png">
</div>
<div class="names">
<h2>Kirk</h2>
<h2>Spock</h2>
<h2>Bones</h2>
<h2>Scotty</h2>
<h2>Uhura</h2>
<h2>Sulu</h2>
<h2>Chekov</h2>
</div>
<div class="wrapper">
<div class="character">
<img src="./Img/kirk.png" width="300">
<div class="data">
<h3>James T. Kirk</h3>
<div>
<label>Actor:</label>
<p>William Shatner</p>
<label>Role:</label>
<p>Captain of the USS Enterprise</p>
<label>Known for:</label>
<p>“Beam me up, Scotty.”</p>
</div>
<p class="notes">Bold, charismatic, impulsive, strategic thinker, morally driven, thrives under pressure.</p>
</div>
</div>
<div class="character">
<img src="./Img/spock-2.png" width="300">
<div class="data">
<h3>Spock</h3>
<div>
<label>Actor: </label>
<p>Leonard Nimoy</p>
<label>Role:</label>
<p>First Officer & Science Officer</p>
<label>Known for:</label>
<p>“Live long and prosper.” 🖖</p>
</div>
<p class="notes">Logical, restrained, intellectually brilliant, emotionally conflicted (human/Vulcan duality),
dry wit.</p>
</div>
</div>
<div class="character">
<img src="./Img/mccoy.png?v=1" width="300">
<div class="data">
<h3>Dr. Leonard “Bones” McCoy</h3>
<div>
<label>Actor: </label>
<p>DeForest Kelley</p>
<label>Role:</label>
<p>Chief Medical Officer</p>
<label>Known for: </label>
<p>“I’m a doctor, not a…”</p>
</div>
<p class="notes">Compassionate, sarcastic, emotional counterbalance to Spock, deeply loyal to Kirk.</p>
</div>
</div>
<div class="character">
<img src="./Img/scotty.png?v=1" width="300">
<div class="data">
<h3>Montgomery “Scotty” Scott</h3>
<div>
<label>Actor: </label>
<p>James Doohan</p>
<label>Role:</label>
<p>Chief Engineer</p>
<label>Known for: </label>
<p>“I canna change the laws of physics!”</p>
</div>
<p class="notes">Brilliant engineer, resourceful, stubbornly optimistic about impossible repairs, quietly
heroic.</p>
</div>
</div>
<div class="character">
<img src="./Img/uhura.png" width="300">
<div class="data">
<h3>Nyota Uhura</h3>
<div>
<label>Actor: </label>
<p>Nichelle Nichols</p>
<label>Role:</label>
<p>Communications Officer</p>
<label>Known for: </label>
<p>Multilingual communications mastery</p>
</div>
<p class="notes">Intelligent, poised, confident, culturally aware, trailblazing representation.</p>
</div>
</div>
<div class="character">
<img src="./Img/sulu.png" width="300">
<div class="data">
<h3>Hikaru Sulu</h3>
<div>
<label>Actor: </label>
<p>George Takei</p>
<label>Role:</label>
<p>Helmsman</p>
<label>Known for: </label>
<p>Sword fighting in “The Naked Time”</p>
</div>
<p class="notes">Calm under pressure, skilled pilot, disciplined, occasionally playful edge.</p>
</div>
</div>
<div class="character">
<img src="./Img/chekov.png" width="300">
<div class="data">
<h3>Pavel Chekov</h3>
<div>
<label>Actor: </label>
<p>Walter Koenig</p>
<label>Role:</label>
<p>Navigator</p>
<label>Known for: </label>
<p>Claiming everything was “invented in Russia.”</p>
</div>
<p class="notes">Eager, youthful, patriotic, ambitious, quick-thinking.</p>
</div>
</div>
</div>
<!-- mouse -->
<div class="mouse">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
<path d="M195 471 c-44 -20 -70 -60 -70 -111 0 -42 5 -54 33 -82 37 -39 42
-76 12 -103 -20 -18 -20 -17 -20 23 0 31 -4 42 -15 42 -12 0 -15 -20 -15 -120
0 -100 3 -120 15 -120 11 0 15 12 15 46 0 31 7 56 22 77 l22 31 6 -24 c5 -21
12 -25 40 -25 28 0 35 4 40 25 l6 24 22 -31 c15 -21 22 -46 22 -77 0 -34 4
-46 15 -46 13 0 15 20 15 120 0 100 -2 120 -15 120 -11 0 -15 -11 -15 -40 0
-41 -7 -49 -28 -28 -23 23 -14 70 21 106 27 28 32 40 32 82 0 42 -5 54 -31 81
-33 33 -92 46 -129 30z m59 -283 c-4 -29 -8 -55 -10 -57 -7 -8 -11 4 -18 57
-6 48 -5 52 14 52 19 0 20 -4 14 -52z" />
</g>
</svg>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS creates a space themed scroll animation inspired by Star Trek where crew names fade in one by one as you scroll, and each character image moves horizontally, scales up, and becomes focused in the center while their info card smoothly appears. It uses custom properties, scroll based animation timelines, keyframes, and container queries to control timing, positioning, scaling, blur, sepia effects, and layout responsiveness. The background shows a dark space effect, characters are evenly spaced and collapse to the center when active, and a mouse scroll indicator animates at the bottom to guide the user.
@import url(https://fonts.bunny.net/css?family=big-shoulders-text:400,700|inconsolata:400);
@layer base, controls, mouse, demo;
@layer demo {
:root {
--info-text-size: .75rem;
--primary-color: rgb(255, 210, 48);
--secondary-color: rgb(0 184 219);
--title-font-family: Big Shoulders Text', display;
}
body {
background-color: #111;
height: 700svh;
margin: 0;
font-family: 'Inconsolata', monospace;
padding: 2rem;
/* space */
&::before {
content: '';
position: fixed;
inset: 0;
z-index: -10;
opacity: .2;
background-image:
radial-gradient(var(--secondary-color), #0000),
url("./Img/space.png");
background-size: cover;
}
}
@property --focus {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.logo {
width: min(80vw, 600px);
margin: 5vh auto;
img {
width: 100%;
object-fit: cover;
filter: drop-shadow(2px 0 0 var(--secondary-color));
}
}
.names {
position: fixed;
inset: 0;
margin: auto;
width: 100vw;
display: grid;
place-content: center;
h2 {
--i: sibling-index();
--total: sibling-count();
@supports not (selector(:sibling-index(0))) {
--total: 7;
&:nth-child(1) {
--i: 1;
}
&:nth-child(2) {
--i: 2;
}
&:nth-child(3) {
--i: 3;
}
&:nth-child(4) {
--i: 4;
}
&:nth-child(5) {
--i: 5;
}
&:nth-child(6) {
--i: 6;
}
&:nth-child(7) {
--i: 7;
}
}
/* for timing */
--item-slot: calc(100% / var(--total));
--item-entry: calc((var(--i) - 1) * var(--item-slot));
--item-exit: calc(var(--item-entry) + var(--item-slot) * 2.5 - 22%);
/* staggered entry and exits with a final offset to allow the last element to return to their original position */
grid-area: 1/1;
text-align:center;
font-family: 'Big Shoulders Text',
display;
font-size: clamp(3rem, 15.5vw + .35rem, 16rem);
text-transform: uppercase;
font-style: italic;
color: var(--primary-color);
filter:drop-shadow(2px 0 0 var(--secondary-color));
animation-name: fade-in;
animation-duration: 1ms;
animation-delay: .2ms;
animation-timeline: scroll();
animation-range: var(--item-entry) var(--item-exit);
animation-fill-mode: both;
}
}
@keyframes fade-in {
0%,
100% {
opacity: 0;
}
15%,
75% {
opacity: 1;
translate: 0 -27vh;
}
}
.wrapper {
position: fixed;
container-type: size;
inset: 0;
margin: auto;
width: min(80vw, 900px);
height: 30vh;
color: white;
display: grid;
place-content: center;
/* floor line behind images*/
&::after {
content: '';
position: absolute;
top: 90cqh;
left: 50%;
translate: -50% 0;
background: linear-gradient(90deg, #0000, var(--secondary-color), #0000);
height: 1px;
width: 90vw;
z-index: -1;
}
.character {
--i: sibling-index();
--total: sibling-count();
@supports not (selector(:sibling-index(0))) {
--total: 7;
&:nth-child(1) {
--i: 1;
}
&:nth-child(2) {
--i: 2;
}
&:nth-child(3) {
--i: 3;
}
&:nth-child(4) {
--i: 4;
}
&:nth-child(5) {
--i: 5;
}
&:nth-child(6) {
--i: 6;
}
&:nth-child(7) {
--i: 7;
}
}
/* for timing */
--item-slot: calc(100% / var(--total));
--item-entry: calc((var(--i) - 1) * var(--item-slot));
--item-exit: calc(var(--item-entry) + var(--item-slot) * 2.5 - 22%);
/* staggered entry and exits with a final offset to allow the last element to return to their original position */
/* for animations */
--focus: 0;
--item-x: calc((var(--i) - (var(--total) + 1) / 2)
/* offsets */
* (100cqw / var(--total))
/* equal spacing */
* (1 - var(--focus))
/* collapse to center when focused */
);
grid-area: 1/1;
place-self: center;
width: 100%;
display: grid;
place-self: end;
isolation: isolate;
transition: scale 300ms ease-in-out,
translate 300ms ease-in-out,
z-index 300ms ease-in-out,
filter 500ms ease-in-out calc((sibling-index() - 1) * 350ms);
scale: calc(0.4 + var(--focus) * 0.8);
/*opacity: calc(0.52 + var(--focus) * 0.8);*/
z-index: calc(1 + var(--focus) * 100);
translate: var(--item-x) 0;
filter: sepia(calc(1 - var(--focus))) blur(0px) hue-rotate(0deg);
animation-name: --item-focus;
animation-timeline: scroll();
animation-range: var(--item-entry) var(--item-exit);
animation-fill-mode: both;
/* intro animation */
@starting-style {
filter: sepia(1) blur(80px) hue-rotate(80deg);
}
}
img {
width: 100%;
height: auto;
object-fit: cover;
}
.data {
position: absolute;
inset: auto 5% 10%;
@container (width > 600px) {
inset: auto -15% 15%;
}
transition: scale 150ms ease-in-out;
scale:var(--info-scale-x) 1;
backface-visibility: hidden;
border-radius: 10px;
border: 1px solid var(--secondary-color);
background-color: rgb(0 184 219 / .2);
backdrop-filter: sepia(1) brightness(20%);
padding: 1rem;
display: grid;
gap: 1rem 2rem;
grid-template-columns: 1fr 1fr;
grid-template-areas: 'title title'
'info info'
'notes notes';
@container (width > 600px) {
grid-template-areas:
'title title'
'info notes'
'info notes';
}
h3 {
grid-area: title;
font-family: 'Big Shoulders Text', display;
font-size: clamp(1rem, 2.5vw + .045rem, 1.2rem);
line-height: 1;
margin: 0;
}
p,
label {
font-size: clamp(.7rem, 1.25vw + .045rem, .85rem);
line-height: 1.3;
margin: 0;
}
div {
grid-area: info;
display: grid;
grid-template-columns: .5fr 1fr;
gap: .5rem;
label {
opacity: .7;
}
}
.notes {
grid-area: notes;
place-self: center;
text-wrap: pretty;
}
}
}
@keyframes --item-focus {
0% {
--focus: 0;
--info-scale-x: 0;
}
20% {
--info-scale-x: 0;
}
30% {
--focus: 1;
--info-scale-x: 1;
}
70% {
--focus: 1;
--info-scale-x: 1;
}
80% {
--info-scale-x: 0;
}
100% {
--focus: 0;
--info-scale-x: 0;
}
}
}
/* scroll indicator svg */
@layer mouse {
.mouse {
position: fixed;
bottom: 4rem;
left: 50%;
translate: -50% 0;
rotate: 180deg;
display: block;
width: 50px;
height: 50px;
opacity: 1;
color: rgb(255 255 255 / .1);
display: none;
animation-name: --mouse, --mouse-move;
animation-duration: 1ms, 1.5s;
animation-timing-function: linear, ease-in-out;
animation-fill-mode: forwards, both;
animation-iteration-count: 1, infinite;
animation-timeline: scroll(), auto;
@supports (animation-timeline: scroll()) {
display: block;
}
}
@keyframes --mouse-move {
50% {
translate: -25px 20px;
}
}
@keyframes --mouse {
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
}
@layer base {
body {
@supports not (animation-timeline: scroll()) {
&::before {
content: "Sorry, your browser doesn't support animation-timeline";
position: fixed;
top: 1rem;
left: 50%;
translate: -50% 0;
font-size: 0.8rem;
color: red;
}
}
}
In conclusion, the Star Trek Scroll Animation combines structured HTML and advanced CSS scroll based animations to create a smooth, cinematic storytelling experience. As users scroll, names, images, and character details transition seamlessly with scaling, focus, and fade effects, resulting in an engaging and visually immersive sci fi inspired presentation that feels modern and dynamic.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
