gsap+ScrollTrigger+svg实现页面滚动火箭发射升空动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：gsap+ScrollTrigger+svg实现页面滚动火箭发射升空动画效果代码，鼠标往下滚动页面试试。
代码标签： gsap ScrollTrigger svg 页面滚动火箭发射升空动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
:root {
  --color: #fff;
  --background-color: #000;
}

* {
  margin: 0;
  padding: 0;
}

@keyframes animateStars {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100vh, 0);
  }
}
body {
  overflow-x: hidden;
  min-height: 100%;
  background-color: var(--background-color);
  color: var(--color);
  font-family: -apple-system, Arial, sans-serif;
}

.stratosphere,
.instructions,
.artwork,
.stars {
  visibility: hidden;
  position: fixed;
}

.stratosphere {
  left: -300vw;
  right: -300vw;
  top: 0;
  bottom: 0;
  background-image: radial-gradient(ellipse at bottom, rgba(61, 101, 242, 0.25), rgba(0, 0, 0, 0) 35%);
}

.instructions {
  font-size: clamp(2.5em, 5vw, 5em);
  z-index: 1;
  font-weight: normal;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  left: 1em;
  bottom: 1em;
}
.instructions__notice {
  font-size: 0.35em;
  opacity: 0.3;
}

.scroller {
  max-height: 100vh;
  position: relative;
  overflow: auto;
  z-index: 1;
}
.scroller__panel {
  height: 100vh;
}
.scroller__panel:last-child {
  height: 200vh;
}

.artwork,
.stars {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stars--animated .stars__rear,
.stars--animated .stars__center {
  animation-name: animateStars;
}
.stars__star, .stars__star::after {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width: 1px;
  height: 1px;
}
.stars__star::after {
  content: "";
  display: block;
  margin-top: -100vh;
}
.stars__rear, .stars__center, .stars__front {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  animation: linear infinite;
}
.stars__rear .stars__star:nth-of-type(1) {
  top: 7vh;
  left: 59vw;
  opacity: 0.89;
}
.stars__rear .stars__star:nth-of-type(2) {
  top: 23vh;
  left: 67vw;
  opacity: 0.74;
}
.stars__rear .stars__star:nth-of-type(3) {
  top: 63vh;
  left: 26vw;
  opacity: 0.85;
}
.stars__rear .stars__star:nth-of-type(4) {
  top: 46vh;
  left: 88vw;
  opacity: 0.33;
}
.stars__rear .stars__star:nth-of-type(5) {
  top: 3vh;
  left: 19vw;
  opacity: 0.84;
}
.stars__rear .stars__star:nth-of-type(6) {
  top: 68vh;
  left: 45vw;
  opacity: 0.29;
}
.stars__rear .stars__star:nth-of-type(7) {
  top: 71vh;
  left: 35vw;
  opacity: 0.14;
}
.stars__rear .stars__star:nth-of-type(8) {
  top: 56vh;
  left: 34vw;
  opacity: 0.3;
}
.stars__rear .stars__star:nth-of-type(9) {
  top: 29vh;
  left: 56vw;
  opacity: 0.33;
}
.stars__rear .stars__star:nth-of-type(10) {
  top: 91vh;
  left: 8vw;
  opacity: 1.06;
}
.stars__rear .stars__star:nth-of-type(11) {
  top: 92vh;
  left: 69vw;
  opacity: 0.12;
}
.stars__rear .stars__star:nth-of-type(12) {
  top: 16vh;
  left: 99vw;
  opacity: 0.44;
}
.stars__rear .stars__star:nth-of-type(13) {
  top: 82vh;
  left: 74vw;
  opacity: 0.21;
}
.stars__rear .stars__star:nth-of-type(14) {
  top: 81vh;
  left: 78vw;
  opacity: 0.84;
}
.stars__rear .stars__star:nth-of-type(15) {
  top: 98vh;
  left: 7vw;
  opacity: 0.34;
}
.stars__rear .stars__star:nth-of-type(16) {
  top: 54vh;
  left: 64vw;
  opacity: 0.63;
}
.stars__rear .stars__star:nth-of-type(17) {
  top: 69vh;
  left: 84vw;
  opacity: 0.78;
}
.stars__rear .stars__star:nth-of-type(18) {
  top: 26vh;
  left: 64vw;
  opacity: 0.73;
}
.stars__rear .stars__star:nth-of-type(19) {
  top: 9vh;
  left: 96vw;
  opacity: 0.96;
}
.stars__rear .stars__star:nth-of-type(20) {
  top: 68vh;
  left: 14vw;
  opacity: 0.72;
}
.stars__rear .stars__star:nth-of-type(21) {
  top: 59vh;
  left: 0vw;
  opacity: 0.26;
}
.stars__rear .stars__star:nth-of-type(22) {
  top: 23vh;
  left: 59vw;
  opacity: 0.13;
}
.stars__rear .stars__star:nth-of-type(23) {
  top: 25vh;
  left: 75vw;
  opacity: 0.69;
}
.stars__rear .stars__star:nth-of-type(24) {
  top: 75vh;
  left: 6vw;
  opacity: 0.42;
}
.stars__rear .stars__star:nth-of-type(25) {
  top: 5vh;
  left: 45vw;
  opacity: 0.39;
}
.stars__rear .stars__star:nth-of-type(26) {
  top: 93vh;
  left: 53vw;
  opacity: 0.57;
}
.stars__rear .stars__star:nth-of-type(27) {
  top: 61vh;
  left: 19vw;
  opacity: 0.64;
}
.stars__rear .stars__star:nth-of-type(28) {
  top: 67vh;
  left: 42vw;
  opacity: 0.44;
}
.stars__rear .stars__star:nth-of-type(29) {
  top: 21vh;
  left: 77vw;
  opacity: 0.31;
}
.stars__rear .stars__star:nth-of-type(30) {
  top: 9vh;
  left: 42vw;
  opacity: 0.6;
}
.stars__rear .stars__star:nth-of-type(31) {
  top: 20vh;
  left: 24vw;
  opacity: 0.55;
}
.stars__rear .stars__star:nth-of-type(32) {
  top: 11vh;
  left: 100vw;
  opacity: 0.46;
}
.stars__rear .stars__star:nth-of-type(33) {
  top: 10vh;
  left: 63vw;
  opacity: 1.05;
}
.stars__rear .stars__star:nth-of-type(34) {
  top: 73vh;
  left: 53vw;
  opacity: 0.42;
}
.stars__rear .stars__star:nth-of-type(35) {
  top: 42vh;
  left: 85vw;
  opacity: 0.94;
}
.stars__rear .stars__star:nth-of-type(36) {
  top: 51vh;
  left: 17vw;
  opacity: 0.31;
}
.stars__rear .stars__star:nth-of-type(37) {
  top: 11vh;
  left: 100vw;
  opacity: 0.29;
}
.stars__rear .stars__star:nth-of-type(38) {
  top: 46vh;
  left: 29vw;
  opacity: 0.74;
}
.stars__rear .stars__star:nth-of-type(39) {
  top: 44vh;
  left: 69vw;
  opacity: 0.53;
}
.stars__rear .stars__star:nth-of-type(40) {
  top: 57vh;
  left: 80vw;
  opacity: 0.69;
}
.stars__rear .stars__star:nth-of-type(41) {
  top: 33vh;
  left: 79vw;
  opacity: 0.11;
}
.stars__rear .stars__star:nth-of-type(42) {
  top: 100vh;
  left: 33vw;
  opacity: 0.62;
}
.stars__rear .stars__star:nth-of-type(43) {
  top: 13vh;
  left: 42vw;
  opacity: 0.36;
}
.stars__rear .stars__star:nth-of-type(44) {
  top: 32vh;
  left: 81vw;
  opacity: 0.8;
}
.stars__rear .stars__star:nth-of-type(45) {
  top: 50vh;
  left: 51vw;
  opacity: 0.36;
}
.stars__rear .stars__star:nth-of-type(46) {
  top: 33vh;
  left: 35vw;
  opacity: 0.79;
}
.stars__rear .stars__star:nth-of-type(47) {
  top: 22vh;
  left: 13vw;
  opacity: 0.94;
}
.stars__rear .stars__star:nth-of-type(48) {
  top: 43vh;
  left: 89vw;
  opacity: 0.83;
}
.stars__rear .stars__star:nth-of-type(49) {
  top: 78vh;
  left: 31vw;
  opacity: 1;
}
.stars__rear .stars__star:nth-of-type(50) {
  top: 87vh;
  left: 93vw;
  opacity: 0.33;
}
.stars__rear .stars__star:nth-of-type(51) {
  top: 84vh;
  left: 7vw;
  opacity: 0.18;
}
.stars__rear .stars__star:nth-of-type(52) {
  top: 86vh;
  left: 26vw;
  opacity: 0.42;
}
.stars__rear .stars__star:nth-of-type(53) {
  top: 26vh;
  left: 26vw;
  opacity: 0.5;
}
.stars__rear .stars__star:nth-of-type(54) {
  top: 64vh;
  left: 0vw;
  opacity: 0.9;
}
.stars__rear .stars__star:nth-of-type(55) {
  top: 45vh;
  left: 61vw;
  opacity: 1;
}
.stars__rear .stars__star:nth-of-type(56) {
  top: 17vh;
  left: 44vw;
  opacity: 0.57;
}
.stars__rear .stars__star:nth-of-type(57) {
  top: 28vh;
  left: 27vw;
  opacity: 0.17;
}
.stars__rear .stars__star:nth-of-type(58) {
  top: 79vh;
  left: 21vw;
  opacity: 0.52;
}
.stars__rear .stars__star:nth-of-type(59) {
  top: 40vh;
  left: 48vw;
  opacity: 0.95;
}
.stars__rear .stars__star:nth-of-type(60) {
  top: 70vh;
  left: 39vw;
  opacity: 0.52;
}
.stars__rear .stars__star:nth-of-type(61) {
  top: 94vh;
  left: 85vw;
  opacity: 0.32;
}
.stars__rear .stars__star:nth-of-type(62) {
  top: 67vh;
  left: 97vw;
  opacity: 0.63;
}
.stars__rear .stars__star:nth-of-type(63) {
  top: 87vh;
  left: 36vw;
  opacity: 0.77;
}
.stars__rear .stars__star:nth-of-type(64) {
  top: 71vh;
  left: 96vw;
  opacity: 0.97;
}
.stars__rear .stars__star:nth-of-type(65) {
  top: 42vh;
  left: 44vw;
  opacity: 0.13;
}
.stars__rear .stars__star:nth-of-type(66) {
  top: 68vh;
  left: 8vw;
  opacity: 0.35;
}
.stars__rear .stars__star:nth-of-type(67) {
  top: 27vh;
  left: 77vw;
  opacity: 0.55;
}
.stars__rear .stars__star:nth-of-type(68) {
  top: 50vh;
  left: 32vw;
  opacity: 0.53;
}
.stars__rear .stars__star:nth-of-type(69) {
  top: 57vh;
  left: 77vw;
  opacity: 0.69;
}
.stars__rear .stars__star:nth-of-type(70) {
  top: 14vh;
  left: 44vw;
  opacity: 0.56;
}
.stars__rear .stars__star:nth-of-type(71) {
  top: 95vh;
  left: 53vw;
  opacity: 1.07;
}
.stars__rear .stars__star:nth-of-type(72) {
  top: 98vh;
  left: 82vw;
  opacity: 0.85;
}
.stars__rear .stars__star:nth-of-type(73) {
  top: 9vh;
  left: 81vw;
  opacity: 0.81;
}
.stars__rear .stars__star:nth-of-type(74) {
  top: 38vh;
  left: 10vw;
  opacity: 0.19;
}
.stars__rear .stars__star:nth-of-type(75) {
  top: 63vh;
  left: 58vw;
  opacity: 0.86;
}
.stars__rear .stars__star:nth-of-type(76) {
  top: 70vh;
  left: 77vw;
  opacity: 1.09;
}
.stars__rear .stars__star:nth-of-type(77) {
  top: 99vh;
  left: 75vw;
  opacity: 0.9;
}
.stars__rear .stars__star:nth-of-type(78) {
  top: 2vh;
  left: 56vw;
  opacity: 0.78;
}
.stars__rear .stars__star:nth-of-type(79) {
  top: 97vh;
  left: 1vw;
  opacity: 0.5;
}
.stars__rear .stars__star:nth-of-type(80) {
  top: 76vh;
  left: 62vw;
  opacity: 0.77;
}
.stars__rear .stars__star:nth-of-type(81) {
  top: 81vh;
  left: 81vw;
  opacity: 0.79;
}
.stars__rear .stars__star:nth-of-type(82) {
  top: 95vh;
  left: 42vw;
  opacity: 0.12;
}
.stars__rear .stars__star:nth-of-type(83) {
  top: 29vh;
  left: 3vw;
  opacity: 0.72;
}
.stars__rear .stars__star:nth-of-type(84) {
  top: 27vh;
  left: 52vw;
  opacity: 0.34;
}
.stars__rear .stars__star:nth-of-type(85) {
  top: 10vh;
  left: 36vw;
  opacity: 0.69;
}
.stars__rear .stars__star:nth-of-type(86) {
  top: 9vh;
  left: 19vw;
  opacity: 1.04;
}
.stars__rear .stars__star:nth-of-type(87) {
  top: 72vh;
  left: 74vw;
  opacity: 0.8;
}
.stars__rear .stars__star:nth-of-type(88) {
  top: 90vh;
  left: 34vw;
  opacity: 0.36;
}
.stars__rear .stars__star:nth-of-type(89) {
  top: 71vh;
  left: 18vw;
  opacity: 0.33;
}
.stars__rear .stars__star:nth-of-type(90) {
  top: 33vh;
  left: 91vw;
  opacity: 0.48;
}
.stars__rear .stars__star:nth-of-type(91) {
  top: 68vh;
  left: 8vw;
  opacity: 1.07;
}
.stars__rear .stars__star:nth-of-type(92) {
  top: 29vh;
  left: 15vw;
  opacity: 0.26;
}
.stars__rear .stars__star:nth-of-type(93) {
  top: 68vh;
  left: 51vw;
  opacity: 0.73;
}
.stars__rear .stars__star:nth-of-type(94) {
  top: 85vh;
  left: 44vw;
  opacity: 0.97;
}
.stars__rear .stars__star:nth-of-type(95) {
  top: 13vh;
  left: 57vw;
  opacity: 0.54;
}
.stars__rear .stars__star:nth-of-type(96) {
  top: 88vh;
  left: 5vw;
  opacity: 0.71;
}
.stars__rear .stars__star:nth-of-type(97) {
  top: 30vh;
  left: 9vw;
  opacity: 0.75;
}
.stars__rear .stars__star:nth-of-type(98) {
  top: 83vh;
  left: 83vw;
  opacity: 0.11;
}
.stars__rear .stars__star:nth-of-type(99) {
  top: 79vh;
  left: 82vw;
  opacity: 0.58;
}
.stars__rear .stars__star:nth-of-type(100) {
  top: 4vh;
  left: 37vw;
  opacity: 0.74;
}
.stars__rear .stars__star:nth-of-type(101) {
  top: 21vh;
  left: 98vw;
  opacity: 0.3;
}
.stars__rear .stars__star:nth-of-type(102) {
  top: 58vh;
  left: 47vw;
  opacity: 0.69;
}
.stars__rear .stars__star:nth-of-type(103) {
  top: 96vh;
  left: 91vw;
  opacity: 0.99;
}
.stars__rear .stars__star:nth-of-type(104) {
  top: 86vh;
  left: 94vw;
  opacity: 0.58;
}
.stars__rear .stars__star:nth-of-type(105) {
  top: 79vh;
  left: 51vw;
  opacity: 0.4;
}
.stars__rear .stars__star:nth-of-type(106) {
  top: 76vh;
  left: 44vw;
  opacity: 0.99;
}
.stars__rear .stars__star:nth-of-type(107) {
  top: 40vh;
  left: 55vw;
  opacity: 0.11;
}
.stars__rear .stars__star:nth-of-type(108) {
  top: 14vh;
  left: 98vw;
  opacity: 0.64;
}
.stars__rear .stars__star:nth-of-type(109) {
  top: 63vh;
  left: 36vw;
  opacity: 0.91;
}
.stars__rear .stars__star:nth-of-type(110) {
  top: 95vh;
  left: 18vw;
  opacity: 0.61;
}
.stars__rear .stars__star:nth-of-type(111) {
  top: 83vh;
  left: 82vw;
  opacity: 0.32;
}
.stars__rear .stars__star:nth-of-type(112) {
  top: 59vh;
  left: 17vw;
  opacity: 0.75;
}
.stars__rear .stars__star:nth-of-type(113) {
  top: 8vh;
  left: 34vw;
  opacity: 1.02;
}
.stars__rear .stars__star:nth-of-type(114) {
  top: 81vh;
  left: 97vw;
  opacity: 0.97;
}
.stars__rear .stars__star:nth-of-type(115) {
  top: 38vh;
  left: 2vw;
  opacity: 0.32;
}
.stars__rear .stars__star:nth-of-type(116) {
  top: 45vh;
  left: 62vw;
  opacity: 0.59;
}
.stars__rear .stars__star:nth-of-type(117) {
  top: 36vh;
  left: 48vw;
  opacity: 0.2;
}
.stars__rear .stars__star:nth-of-type(118) {
  top: 87vh;
  left: 86vw;
  opacity: 0.78;
}
.stars__rear .stars__star:nth-of-type(119) {
  top: 91vh;
  left: 57vw;
  opacity: 0.99;
}
.stars__rear .stars__star:nth-of-type(120) {
  top: 50vh;
  left: 22vw;
  opacity: 0.31;
}
.stars__rear .stars__star:nth-of-type(121) {
  top: 27vh;
  left: 81vw;
  opacity: 0.29;
}
.stars__rear .stars__star:nth-of-type(122) {
  top: 32vh;
  left: 43vw;
  opacity: 0.21;
}
.stars__rear .stars__star:nth-of-type(123) {
  top: 96vh;
  left: 68vw;
  opacity: 0.64;
}
.stars__rear .stars__star:nth-of-type(124) {
  top: 40vh;
  left: 80vw;
  opacity: 0.23;
}
.stars__rear .stars__star:nth-of-type(125) {
  top: 18vh;
  left: 0vw;
  opacity: 1.08;
}
.stars__rear .stars__star:nth-of-type(126) {
  top: 34vh;
  left: 43vw;
  opacity: 0.39;
}
.stars__rear .stars__star:nth-of-type(127) {
  top: 100vh;
  left: 51vw;
  opacity: 0.67;
}
.stars__rear .stars__star:nth-of-type(128) {
  top: 54vh;
  left: 15vw;
  opacity: 0.87;
}
.stars__rear .stars__star:nth-of-type(129) {
  top: 80vh;
  left: 46vw;
  opacity: 0.21;
}
.stars__rear .stars__star:nth-of-type(130) {
  top: 62vh;
  left: 89vw;
  opacity: 0.73;
}
.stars__rear .stars__star:nth-of-type(131) {
  .........完整代码请登录后点击上方下载按钮下载查看