Vader Arrives on the Sanctuary Moon
How do I make an vader arrives on the sanctuary moon?
Wanted to do something cinemagraph-ish with Renars Vilnis's excellent grainy overlay (link in editor view). Best viewed in Chrome.. What is a vader arrives on the sanctuary moon? How do you make a vader arrives on the sanctuary moon? This script and codes were developed by Matt Popovich on 02 August 2022, Tuesday.
Vader Arrives on the Sanctuary Moon Previews
Vader Arrives on the Sanctuary Moon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vader Arrives on the Sanctuary Moon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="button" value="rewind" onClick="history.go(0)">
<div class="screen"> <div class="endor"> <div class="tie-fighter tie-fighter--1"></div> <div class="tie-fighter tie-fighter--2"></div> <div class="lambda"> <div class="lamdba__inner"> <div class="lambda__left-wing"> <div class="lambda__light lambda__light--left"></div> </div> <div class="lambda__body"></div> <div class="lambda__light lambda__light--top"></div> <div class="lambda__right-wing"> <div class="lambda__light lambda__light--right"></div> </div> <div class="lambda__hatch"> </div> <div class="lambda__foot--left"> </div> <div class="lambda__foot--right"> </div> </div> </div> <div class="at-at"> <div class="at-at__inner"> <div class="at-at__head"> </div> </div> </div> </div> <canvas class="grain"></canvas>
</div> <script src="js/index.js"></script>
</body>
</html>Vader Arrives on the Sanctuary Moon - Script Codes CSS Codes
html,
body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
body { background-color: #000; position: -webkit-flex; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
@keyframes reload-button { 0% { opacity: 0; display: none; } 90% { opacity: 0; display: auto; } 100% { opacity: 0.5; display: auto; }
}
input { color: white; outline: none; opacity: 0.5; border: 2px solid white; border-radius: 2px; text-transform: uppercase; letter-spacing: 6px; width: 200px; height: 40px; margin: -20px 0 0 -100px; position: absolute; left: 50%; top: 4%; background: transparent; z-index: 9999; transform: scale(0.7); animation: reload-button 18s ease-in-out;
}
input:hover { background-color: rgba(255, 255, 255, 0.8);
}
.screen { position: relative; width: 1000px; height: 500px; overflow: hidden;
}
@keyframes pan { 0% { background-position: 50% 0%; } 100% { background-position: 50% 90%; }
}
.endor { background-color: #00030B; position: absolute; top: 0; left: 0; width: 1000px; height: 100%; z-index: 1; background-image: url("http://res.cloudinary.com/dxscrtoxq/image/upload/v1464486290/ZWUD9ty_avclgv.jpg"); background-position: 50% 90%; animation: pan 18s ease-in-out; background-size: 1000px; background-repeat: no-repeat;
}
.grain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
}
@keyframes patrol--1 { 0% { top: 65%; left: -90%; opacity: 0; } 10% { top: 65%; left: -90%; opacity: 0; } 15% { opacity: 0.2; transform: scale(0.55) rotateY(170deg); } 20% { opacity: 1; } 35% { opacity: 0.4; transform: scale(0.35) rotateY(180deg); } 45% { top: 10%; left: 180%; opacity: 0; } 100% { top: 10%; left: 180%; opacity: 0; }
}
.tie-fighter { position: absolute;
}
.tie-fighter--1 { top: 12%; left: 180%; background-image: url(http://res.cloudinary.com/dxscrtoxq/image/upload/v1464548317/interceptor-1_vtvhwv.png); width: 90px; height: 53px; transform: scale(0.55) rotateY(180deg); -webkit-filter: brightness(0.4); filter: brightness(0.4); animation: patrol--1 18s ease-in-out;
}
@keyframes patrol--2 { 0% { top: 65%; left: -75%; opacity: 0; } 13% { top: 65%; left: -75%; opacity: 0; } 17% { opacity: 0.3; transform: scale(0.4) rotateY(170deg); } 25% { opacity: 1; } 38% { opacity: 0.4; transform: scale(0.22) rotateY(180deg); } 49% { top: 10%; left: 120%; opacity: 0; } 100% { top: 10%; left: 120%; opacity: 0; }
}
.tie-fighter { position: absolute;
}
.tie-fighter--2 { top: 16%; left: 120%; background-image: url(http://res.cloudinary.com/dxscrtoxq/image/upload/v1464548317/interceptor-2_kyistk.png); width: 90px; height: 53px; transform: scale(0.55) rotateY(180deg); -webkit-filter: brightness(0.4); filter: brightness(0.4); animation: patrol--2 18s ease-in-out;
}
@keyframes land { 0% { top: 132%; } 100% { top: 71%; }
}
.lambda { position: absolute; top: 71%; left: 52%; transform: translateX(-50%) translateY(-100%) scale(0.65); animation: land 18s ease-in-out; width: 100px; height: 175px;
}
.lambda__inner { position: relative; width: 100%; height: 100%;
}
@keyframes body { 0% { -webkit-filter: brightness(0.6); filter: brightness(0.6); } 100% { -webkit-filter: brightness(1.15); filter: brightness(1.15); }
}
.lambda__body { position: absolute; bottom: 0; height: 151px; width: 93px; background-image: url(http://res.cloudinary.com/dxscrtoxq/image/upload/v1464486263/lambda-body_sghv5d.png); animation: body 18s ease-in-out; -webkit-filter: brightness(1.15); filter: brightness(1.15);
}
@keyframes leftretract { 0% { -webkit-filter: brightness(0.5); filter: brightness(0.5); transform: translateX(-90px) translateY(-7px) rotate(0deg); } 100% { -webkit-filter: brightness(1.25); filter: brightness(1.25); transform: translateX(-97px) translateY(-17px) rotate(73deg); }
}
.lambda__left-wing { position: absolute; bottom: 0; left: 0; height: 58px; width: 97px; transform: translateX(-97px) translateY(-17px) rotate(73deg); transform-origin: bottom right; animation: leftretract 18s ease-in-out; background-image: url(http://res.cloudinary.com/dxscrtoxq/image/upload/v1464486263/lambda-left-wing_fr1hyk.png); -webkit-filter: brightness(1.25); filter: brightness(1.25);
}
@keyframes rightretract { 0% { -webkit-filter: brightness(0.5); filter: brightness(0.5); transform: translateX(88px) translateY(-7px) rotate(0deg); } 100% { -webkit-filter: brightness(1.3); filter: brightness(1.3); transform: translateX(96px) translateY(-11px) rotate(-73.5deg); }
}
.lambda__right-wing { position: absolute; bottom: 0; right: 0; height: 55px; width: 108px; transform: translateX(96px) translateY(-11px) rotate(-73.5deg); transform-origin: bottom left; animation: rightretract 18s ease-in-out; background-image: url(http://res.cloudinary.com/dxscrtoxq/image/upload/v1464486262/lambda-right-wing_tcc7dw.png); -webkit-filter: brightness(1.3); filter: brightness(1.3);
}
@keyframes blink { 0% { opacity: 0; } 40% { opacity: 0; } 41% { opacity: 1; } 43% { opacity: 1; } 44% { opacity: 0; } 54% { opacity: 0; } 55% { opacity: 1; } 58% { opacity: 1; } 59% { opacity: 0; } 69% { opacity: 0; } 70% { opacity: 1; } 73% { opacity: 1; } 74% { opacity: 0; } 84% { opacity: 0; } 85% { opacity: 1; } 100% { opacity: 1; }
}
.lambda__light { z-index: 25; position: absolute; width: 4.5px; height: 5px; border-radius: 50%; background-color: white; -webkit-filter: blur(0.5px); filter: blur(0.5px); opacity: 1; animation: blink 18s ease-in-out;
}
.lambda__light--top { left: 43px; top: 25px;
}
.lambda__light--left { top: 1px;
}
.lambda__light--right { top: 2px; left: 100px;
}
@keyframes hatch-open { 0% { bottom: 4px; } 72% { bottom: 4px; } 86% { bottom: -2px; } 100% { bottom: -2px; }
}
.lambda__hatch { z-index: -1; position: absolute; bottom: -2px; left: 3px; height: 19px; width: 81px; background-image: url(http://res.cloudinary.com/dxscrtoxq/image/upload/v1464549969/lambda-landing-gear-hatch_cxzrox.png); animation: hatch-open 18s ease-in-out; transform: rotate(-2deg); -webkit-filter: brightness(0.2); filter: brightness(0.2);
}
@keyframes left-gear-lower { 0% { bottom: 5px; } 74% { bottom: 5px; } 86% { bottom: -4px; } 100% { bottom: -4px; }
}
.lambda__foot--left { z-index: -1; position: absolute; bottom: -4px; left: 15px; height: 21px; width: 16px; background-image: url(https://res.cloudinary.com/dxscrtoxq/image/upload/t_media_lib_thumb/v1464549969/lambda-landing-gear-foot_ycuvxn.png); animation: left-gear-lower 18s ease-in-out; transform: rotateY(180deg); -webkit-filter: brightness(0.6); filter: brightness(0.6);
}
@keyframes right-gear-lower { 0% { bottom: 5px; } 74% { bottom: 5px; } 86% { bottom: -5px; } 100% { bottom: -5px; }
}
.lambda__foot--right { z-index: -1; position: absolute; bottom: -5px; left: 49px; height: 21px; width: 16px; background-image: url(https://res.cloudinary.com/dxscrtoxq/image/upload/t_media_lib_thumb/v1464549969/lambda-landing-gear-foot_ycuvxn.png); animation: right-gear-lower 18s ease-in-out; -webkit-filter: brightness(0.8); filter: brightness(0.8);
}
@keyframes at-at-pan { 0% { top: 240%; -webkit-filter: brightness(0); filter: brightness(0); } 50% { -webkit-filter: brightness(0); filter: brightness(0); } 100% { top: 86%; -webkit-filter: brightness(1); filter: brightness(1); }
}
.at-at { position: absolute; top: 86%; left: 310px; transform: translateX(-50%) translateY(-100%) scale(0.9); animation: at-at-pan 18s ease-in-out; width: 78px; height: 74px; -webkit-filter: brightness(1); filter: brightness(1);
}
@keyframes walk { 0% { transform: translate(0, 0); } 100% { transform: translate(79px, 44px); }
}
.at-at__inner { position: relative; width: 100%; height: 100%; animation: walk 24.3s ease-in-out; transform: translate(79px, 44px); background-image: url(http://res.cloudinary.com/dxscrtoxq/image/upload/v1464553239/a-at-body-2_aydgwu.png);
}
@keyframes bob { 0% { transform: scale(0.82) translate(0, 0); } 15% { transform: scale(0.82) translate(0, 0); } 27% { transform: scale(0.83) translate(3px, 4px); } 40% { transform: scale(0.82) translate(0, 0); } 52% { transform: scale(0.83) translate(3px, 4px); } 65% { transform: scale(0.82) translate(0, 0); } 77% { transform: scale(0.83) translate(3px, 4px); } 100% { transform: scale(0.82) translate(0, 0); }
}
.at-at__head { position: absolute; top: 43px; left: 61px; width: 46px; height: 49px; animation: bob 24.3s ease-in-out; transform: scale(0.82) translate(0, 0); background-image: url(http://res.cloudinary.com/dxscrtoxq/image/upload/v1464552135/at-at-head_ofsflc.png);
}
Vader Arrives on the Sanctuary Moon - Script Codes JS Codes
// Canvas grain by Renārs Vilnis:
// http://codepen.io/renarsvilnis/pen/YWKRvE
'use strict';
console.clear();
class Grain { constructor (el) { /** * Options * Increase the pattern size if visible pattern */ this.patternSize = 200; this.patternScaleX = 1000; this.patternScaleY = 1000; this.patternRefreshInterval = 6; this.patternAlpha = 10; /** * Create canvas */ this.canvas = el; this.ctx = this.canvas.getContext('2d'); this.ctx.scale(this.patternScaleX, this.patternScaleY); /** * Create a canvas that will be used to generate grain and used as a * pattern on the main canvas. */ this.patternCanvas = document.createElement('canvas'); this.patternCanvas.width = this.patternSize; this.patternCanvas.height = this.patternSize; this.patternCtx = this.patternCanvas.getContext('2d'); this.patternData = this.patternCtx.createImageData(this.patternSize, this.patternSize); this.patternPixelDataLength = this.patternSize * this.patternSize * 4; // rgba = 4 /** * Prebind prototype function, so later its easier to user */ this.resize = this.resize.bind(this); this.loop = this.loop.bind(this); this.frame = 0; window.addEventListener('resize', this.resize); this.resize(); window.requestAnimationFrame(this.loop); } resize () { this.canvas.width = window.innerWidth * devicePixelRatio; this.canvas.height = window.innerHeight * devicePixelRatio; } update () { const {patternPixelDataLength, patternData, patternAlpha, patternCtx} = this; // put a random shade of gray into every pixel of the pattern for (let i = 0; i < patternPixelDataLength; i += 4) { // const value = (Math.random() * 255) | 0; const value = Math.random() * 255; patternData.data[i] = value; patternData.data[i + 1] = value; patternData.data[i + 2] = value; patternData.data[i + 3] = patternAlpha; } patternCtx.putImageData(patternData, 0, 0); } draw () { const {ctx, patternCanvas, canvas, viewHeight} = this; const {width, height} = canvas; // clear canvas ctx.clearRect(0, 0, width, height); // fill the canvas using the pattern ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat'); ctx.fillRect(0, 0, width, height); } loop () { // only update grain every n frames const shouldDraw = ++this.frame % this.patternRefreshInterval === 0; if (shouldDraw) { this.update(); this.draw(); } window.requestAnimationFrame(this.loop); }
}
/** * Initiate Grain */
const el = document.querySelector('.grain');
const grain = new Grain(el);
| Developer | Matt Popovich |
| Username | mpopv |
| Uploaded | August 02, 2022 |
| Rating | 3 |
| Size | 6,815 Kb |
| Views | 28,336 |
Do you need developer help for Vader Arrives on the Sanctuary Moon?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Matt Popovich (mpopv) Script Codes
| Name | Size |
| Magazine article | 3,672 Kb |
| Trump Twitter Cover Generator | 852,899 Kb |
| SCSS Grid System | 2,630 Kb |
| Fog city night festival | 2,645 Kb |
| Hyperspace | 13,632 Kb |
| Text-rendering comparison | 2,914 Kb |
| CSS Falling Shelf Menu | 1,690 Kb |
| Space Mono | 2,189 Kb |
| A Pen by Matt Popovich | 3,349 Kb |
| Paint on Heat Distortion | 5,614 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
| Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
| Yuliya v krylova | Rafszul | 37,351 Kb |
| Minimelephant | Smashlee | 2,507 Kb |
| Multi-step GSAP animation | Acacheung | 2,668 Kb |
| Awesome textarea | Ayoungh | 1,977 Kb |
| Welcome | Nakome | 6,076 Kb |
| SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
| CSS3 Snow Animation | NickyCDK | 1,695 Kb |
| GLSL Hills | Ykob | 6,991 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!