Javascript Starfleet Basics

Developer
Kevin Alford
Size
2,612 Kb
Views
8,096
  1. Javascript Starfleet Basics Previews
  2. Javascript Starfleet Basics HTML Codes
  3. Javascript Starfleet Basics CSS Codes
  4. Javascript Starfleet Basics JS Codes

How do I make an javascript starfleet basics?

Use jQuery to react to input and energize nerds. What is a javascript starfleet basics? How do you make a javascript starfleet basics? This script and codes were developed by Kevin Alford on 07 January 2023, Saturday.

Javascript Starfleet Basics Previews
IQ Test

Javascript Starfleet Basics - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Javascript Starfleet Basics</title> <meta property="og:image" content="https://octodex.github.com/images/trekkie.jpg" /> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
body { font-family: 'Press Start 2P', cursive; text-align: center;
}
img { height: 300px; width: 300px; opacity: 0; border-bottom: 5px solid white;
}
img:hover { border-bottom: 5px solid #CDF;
}
.starfleet
{ animation: beam_up 5s cubic-bezier(.76, 0, 1, .20); animation-fill-mode: both;
}
.beam_down
{ animation: transport 5s cubic-bezier(.64, .52, 1, 0); animation-fill-mode: both;
}
@keyframes transport { 0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes beam_up { 0% { opacity: 0; } 100% { opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- the javascript on the 3rd pane will energize these trekkers(ies) -->
<h1>beam me up!</h1>
<img class="starfleet" src="https://octodex.github.com/images/trekkie.jpg" />
<img class="starfleet" src="https://octodex.github.com/images/spocktocat.jpg "/>
<img class="starfleet" src="https://octodex.github.com/images/jean-luc-picat.jpg" />
<audio id="audio_playa"> <source src="http://www.mediacollege.com/downloads/sound-effects/star-trek/tos/tos-transporter.mp3" type="audio/mpeg" /> <source src="http://www.mediacollege.com/downloads/sound-effects/star-trek/tos/tos-transporter.ogg" type="audio/ogg" />
</audio> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Javascript Starfleet Basics - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
body { font-family: 'Press Start 2P', cursive; text-align: center;
}
img { height: 300px; width: 300px; opacity: 0; border-bottom: 5px solid white;
}
img:hover { border-bottom: 5px solid #CDF;
}
.starfleet
{ animation: beam_up 5s cubic-bezier(.76, 0, 1, .20); animation-fill-mode: both;
}
.beam_down
{ animation: transport 5s cubic-bezier(.64, .52, 1, 0); animation-fill-mode: both;
}
@keyframes transport { 0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes beam_up { 0% { opacity: 0; } 100% { opacity: 1; }
}

Javascript Starfleet Basics - Script Codes JS Codes

$(document).ready(function() { $('.starfleet').on('click', function() { $(this).toggleClass("beam_down"); $('#audio_playa').get(0).play(); }); $('#audio_playa').get(0).volume = 0.2; $('#audio_playa').get(0).play();
});
Javascript Starfleet Basics - Script Codes
Javascript Starfleet Basics - Script Codes
Home Page Home
Developer Kevin Alford
Username zeroeth
Uploaded January 07, 2023
Rating 3
Size 2,612 Kb
Views 8,096
Do you need developer help for Javascript Starfleet Basics?

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!

Kevin Alford (zeroeth) Script Codes
Name
Animation Sine Movement
A Pen by Kevin Alford
Glsl.heroku.com sandbox
CARROT
Three.js Shader Fun
Css text wave
Marqueeception
Angle Border
Three.js WebGL Clock
Twitter Bootstrap Grids
Create amazing SEO 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!