Transformers Pallete Swap

Developer

Size

7,527 Kb

Views

32,384

Transformers Pallete Swap Previews
Transformers Pallete Swap HTML Codes
Transformers Pallete Swap CSS Codes
Transformers Pallete Swap JS Codes

How do I make an transformers pallete swap?

I used SASS maps to create different color palletes that can be swapped out with Javascript by simply switching the body class. The colors used are based off of the famous Decepticons Seekers, such as Starscream, Skywarp, and Thundercracker. Each Seeker has the same body model, but have their own individual color schemes.. What is a transformers pallete swap? How do you make a transformers pallete swap? This script and codes were developed by Jeremy Paris on 08 September 2022, Thursday.

Transformers Pallete Swap Previews

Transformers Pallete Swap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Transformers Pallete Swap</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Decepticon Seekers</h1>
<h2>Choose Your Theme</h2>
<nav> <ul> <li><a href="#" data-palette="starscream">Starscream</a></li> <li><a href="#" data-palette="thundercracker">Thundercracker</a></li> <li><a href="#" data-palette="skywarp">Skywarp</a></li> <li><a href="#" data-palette="ramjet">Ramjet</a></li> <li><a href="#" data-palette="thrust">Thrust</a></li> <li><a href="#" data-palette="dirge">Dirge</a></li> </ul>
</nav>
<section> <!-- SVG Logo found here: http://seeklogo.com/decepticon-g1-logo-229304.html --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="decepticon_logo" x="0px" y="0px" viewBox="0 0 309 309" enable-background="new 0 0 309 309" xml:space="preserve"> <polygon class="bg" points="155.2,192 193.5,143.5 215,14 172,63.5 138.5,63.5 91.5,14 116.5,143.5"/> <polygon class="bg" points="0,0 43.5,59.5 96.5,77.5 103.5,112.5 51.8,100.5 51.8,105 103.5,123 108,149.5 54,135 56.5,140.5 118.5,160.5 153.5,202 188.5,160.5 252,143.5 252,138.5 201,152 203.5,125 256,109 256,104 203.5,116 211.5,80 264,62 309,3 292.5,138.5 154.5,301 15,136"/> <polygon class="eyes" points="154.5,143.5 172,99.5 138.5,99.5"/> <polygon class="bg" points="39,277 25,168 143,309"/> <polygon class="bg" points="166,309 269,278.5 284,168"/> <polygon class="eyes" points="129,243.5 138.5,211.5 86.5,188.5"/> <polygon class="eyes" points="182.5,243.5 225,188.5 172,210.5"/> </svg> <p> <strong>Seeker</strong> was a term originally coined by fans to describe the Decepticon Jets of the same mode, eventually adopted by Hasbro and various comic continuities. Only Starscream, Skywarp and Thundercracker were named during Season 1 of the animated series. Ramjet, Thrust, and Dirge (introduced in Season 2) essentially used the same mold as their Season 1 counterparts but with small modifications, and because of this, they are also known as the "Coneheads". <a href="http://en.wikipedia.org/wiki/List_of_Decepticons#Decepticon_Jets.2FSeekers">[Source]</a> </p> <blockquote cite="http://tfwiki.net/wiki/Seeker_(body-type)"> The term Seeker refers to Decepticon jet troopers who share Starscream's body-type but with different colors or minor variations in wing and head shapes. This is most clearly and commonly known from Generation 1, but any franchise with a Starscream is almost inevitably going to feature a similar "family" of redecoed jet-formers. </blockquote> <p> In the Generation One cartoon there were large numbers of generic, unnamed Seekers in addition to the named characters. They came in a wide variety of colors, from extra duplicates of Starscream or one of the other named guys, to original and distinct looks all their own. They seem to have formed the bulk of the Decepticon forces on Cybertron, as well as among Megatron's initial troops on Earth. They gradually became less common, perhaps as a result of casualties... or the cartoon's production team becoming more careful, or more-likely having more "actual" Decepticons to work with as the toy line expanded. <a href="http://transformers.wikia.com/wiki/Seeker_(group)#And_all_the_rest">[Source]</a> </p>
</section>
<footer> <p> Transformers is owned and copyrighted by Hasbro, Inc.<br /> Names and imagery used for fun and learning. </p>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Transformers Pallete Swap - Script Codes CSS Codes

/*
========= FONTS =========
*/
@import url(https://fonts.googleapis.com/css?family=Orbitron:700|Open+Sans:400italic,700italic,400,700);
/*
========= LAYOUT =========
*/
body { font: 16px 'Open Sans', Helvetica, sans-serif; padding: 2.5em; min-width: 300px; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
strong { font-weight: bold;
}
a { text-decoration: none; display: inline-block; padding: 0; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
a:hover { padding: 0 1em;
}
section { padding-top: 1.5em; clear: both;
}
h1 { font-family: "Orbitron", sans-serif; font-size: 2em; font-weight: bold; padding: 0.5em 0; text-transform: uppercase; letter-spacing: 0.15em; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
h2 { font-family: "Orbitron", sans-serif; font-size: 1.5em; font-weight: bold; padding: 0.5em 0; letter-spacing: 0.1em; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
p { font-size: 0.9em; line-height: 1.5em; margin-bottom: 0.75em; text-align: justify; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
@media screen and (min-width: 800px) { p { font-size: 1em; }
}
blockquote { clear: both; margin: 1em 2em; padding: 2em; font-size: 1em; cursor: pointer; text-align: justify; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
@media screen and (min-width: 800px) { blockquote { font-size: 1.25em; }
}
footer { margin: 4em 0; font-size: 0.75em;
}
footer p { text-align: center;
}
/*
========= NAVIGATION =========
*/
nav { font-size: 0.8em;
}
nav ul li { float: none;
}
@media screen and (min-width: 800px) { nav ul li { float: left; }
}
nav ul li a { display: block; padding: 0.5em 2em; text-decoration: none; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
nav ul li a:hover { padding: 0.5em 2em;
}
/*
========= SVG LOGO STYLES =========
*/
#decepticon_logo { float: left; width: 50px; height: 50px; margin-right: 10px; margin-bottom: 5px;
}
@media screen and (min-width: 800px) { #decepticon_logo { width: 100px; height: 100px; margin-right: 25px; margin-bottom: 15px; }
}
#decepticon_logo .bg, #decepticon_logo .eyes { -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
/*
========= MAP OUT THE PALETTES =========
*/
/*
========= LOOP THROUGH THE PALETTES TO ADD COLORS =========
*/
body.starscream { background-color: #e3dddf; color: #060c0c;
}
body.starscream h1 { color: #a32800;
}
body.starscream h2 { color: #060c0c;
}
body.starscream #decepticon_logo .bg { fill: #060c0c;
}
body.starscream #decepticon_logo .eyes { fill: #e3dddf;
}
body.starscream blockquote { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2EzMjgwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzcwMWIwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a32800), color-stop(100%, #701b00)); background-image: -moz-linear-gradient(#a32800, #701b00); background-image: -webkit-linear-gradient(#a32800, #701b00); background-image: linear-gradient(#a32800, #701b00); color: #e3dddf;
}
body.starscream nav ul li a { background-color: #2772cd; color: #e3dddf;
}
body.starscream nav ul li a:hover { background-color: #cfa52d; color: #060c0c;
}
body.starscream nav ul li a.active { -moz-box-shadow: inset 5px 0px 0px #a32800; -webkit-box-shadow: inset 5px 0px 0px #a32800; box-shadow: inset 5px 0px 0px #a32800;
}
@media screen and (min-width: 800px) { body.starscream nav ul li a.active { -moz-box-shadow: inset 0px 3px 0px #a32800; -webkit-box-shadow: inset 0px 3px 0px #a32800; box-shadow: inset 0px 3px 0px #a32800; }
}
body.starscream a { color: #a32800;
}
body.starscream a:hover { background-color: #cfa52d;
}
body.thundercracker { background-color: #4575b7; color: #101221;
}
body.thundercracker h1 { color: #e3dddf;
}
body.thundercracker h2 { color: #101221;
}
body.thundercracker #decepticon_logo .bg { fill: #101221;
}
body.thundercracker #decepticon_logo .eyes { fill: #4575b7;
}
body.thundercracker blockquote { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UzZGRkZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjYzFjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e3dddf), color-stop(100%, #ccc1c5)); background-image: -moz-linear-gradient(#e3dddf, #ccc1c5); background-image: -webkit-linear-gradient(#e3dddf, #ccc1c5); background-image: linear-gradient(#e3dddf, #ccc1c5); color: #4575b7;
}
body.thundercracker nav ul li a { background-color: #a9030f; color: #e3dddf;
}
body.thundercracker nav ul li a:hover { background-color: #ff9429; color: #101221;
}
body.thundercracker nav ul li a.active { -moz-box-shadow: inset 5px 0px 0px #e3dddf; -webkit-box-shadow: inset 5px 0px 0px #e3dddf; box-shadow: inset 5px 0px 0px #e3dddf;
}
@media screen and (min-width: 800px) { body.thundercracker nav ul li a.active { -moz-box-shadow: inset 0px 3px 0px #e3dddf; -webkit-box-shadow: inset 0px 3px 0px #e3dddf; box-shadow: inset 0px 3px 0px #e3dddf; }
}
body.thundercracker a { color: #e3dddf;
}
body.thundercracker a:hover { background-color: #a9030f;
}
body.skywarp { background-color: #222433; color: #cec5bc;
}
body.skywarp h1 { color: #7f75aa;
}
body.skywarp h2 { color: #cec5bc;
}
body.skywarp #decepticon_logo .bg { fill: #cec5bc;
}
body.skywarp #decepticon_logo .eyes { fill: #222433;
}
body.skywarp blockquote { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdmNzVhYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY1NWE5MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7f75aa), color-stop(100%, #655a92)); background-image: -moz-linear-gradient(#7f75aa, #655a92); background-image: -webkit-linear-gradient(#7f75aa, #655a92); background-image: linear-gradient(#7f75aa, #655a92); color: #222433;
}
body.skywarp nav ul li a { background-color: #cec5bc; color: #222433;
}
body.skywarp nav ul li a:hover { background-color: #f19c1d; color: #222433;
}
body.skywarp nav ul li a.active { -moz-box-shadow: inset 5px 0px 0px #7f75aa; -webkit-box-shadow: inset 5px 0px 0px #7f75aa; box-shadow: inset 5px 0px 0px #7f75aa;
}
@media screen and (min-width: 800px) { body.skywarp nav ul li a.active { -moz-box-shadow: inset 0px 3px 0px #7f75aa; -webkit-box-shadow: inset 0px 3px 0px #7f75aa; box-shadow: inset 0px 3px 0px #7f75aa; }
}
body.skywarp a { color: #f19c1d;
}
body.skywarp a:hover { background-color: #7f75aa;
}
body.ramjet { background-color: #ffeaec; color: #45393d;
}
body.ramjet h1 { color: #45393d;
}
body.ramjet h2 { color: #45393d;
}
body.ramjet #decepticon_logo .bg { fill: #45393d;
}
body.ramjet #decepticon_logo .eyes { fill: #ffeaec;
}
body.ramjet blockquote { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1MzkzZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI5MjIyNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #45393d), color-stop(100%, #292224)); background-image: -moz-linear-gradient(#45393d, #292224); background-image: -webkit-linear-gradient(#45393d, #292224); background-image: linear-gradient(#45393d, #292224); color: #ffeaec;
}
body.ramjet nav ul li a { background-color: #dc4335; color: #ffeaec;
}
body.ramjet nav ul li a:hover { background-color: #f9e872; color: #45393d;
}
body.ramjet nav ul li a.active { -moz-box-shadow: inset 5px 0px 0px #45393d; -webkit-box-shadow: inset 5px 0px 0px #45393d; box-shadow: inset 5px 0px 0px #45393d;
}
@media screen and (min-width: 800px) { body.ramjet nav ul li a.active { -moz-box-shadow: inset 0px 3px 0px #45393d; -webkit-box-shadow: inset 0px 3px 0px #45393d; box-shadow: inset 0px 3px 0px #45393d; }
}
body.ramjet a { color: #dc4335;
}
body.ramjet a:hover { background-color: #f9e872;
}
body.thrust { background-color: #7e2401; color: #ffe0ff;
}
body.thrust h1 { color: #060c0c;
}
body.thrust h2 { color: #ffe0ff;
}
body.thrust #decepticon_logo .bg { fill: #ffe0ff;
}
body.thrust #decepticon_logo .eyes { fill: #7e2401;
}
body.thrust blockquote { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTBmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYWRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffe0ff), color-stop(100%, #ffadff)); background-image: -moz-linear-gradient(#ffe0ff, #ffadff); background-image: -webkit-linear-gradient(#ffe0ff, #ffadff); background-image: linear-gradient(#ffe0ff, #ffadff); color: #8e4e9c;
}
body.thrust nav ul li a { background-color: #ffe0ff; color: #060c0c;
}
body.thrust nav ul li a:hover { background-color: #f9e872; color: #060c0c;
}
body.thrust nav ul li a.active { -moz-box-shadow: inset 5px 0px 0px #060c0c; -webkit-box-shadow: inset 5px 0px 0px #060c0c; box-shadow: inset 5px 0px 0px #060c0c;
}
@media screen and (min-width: 800px) { body.thrust nav ul li a.active { -moz-box-shadow: inset 0px 3px 0px #060c0c; -webkit-box-shadow: inset 0px 3px 0px #060c0c; box-shadow: inset 0px 3px 0px #060c0c; }
}
body.thrust a { color: #f9e872;
}
body.thrust a:hover { background-color: #8e4e9c;
}
body.dirge { background-color: #021f83; color: #f3f1f4;
}
body.dirge h1 { color: #f4b71e;
}
body.dirge h2 { color: #f3f1f4;
}
body.dirge #decepticon_logo .bg { fill: #f3f1f4;
}
body.dirge #decepticon_logo .eyes { fill: #021f83;
}
body.dirge blockquote { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM5MjczNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFiMTIxOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #392735), color-stop(100%, #1b1219)); background-image: -moz-linear-gradient(#392735, #1b1219); background-image: -webkit-linear-gradient(#392735, #1b1219); background-image: linear-gradient(#392735, #1b1219); color: #f4b71e;
}
body.dirge nav ul li a { background-color: #392735; color: #f3f1f4;
}
body.dirge nav ul li a:hover { background-color: #dc4335; color: #f3f1f4;
}
body.dirge nav ul li a.active { -moz-box-shadow: inset 5px 0px 0px #f4b71e; -webkit-box-shadow: inset 5px 0px 0px #f4b71e; box-shadow: inset 5px 0px 0px #f4b71e;
}
@media screen and (min-width: 800px) { body.dirge nav ul li a.active { -moz-box-shadow: inset 0px 3px 0px #f4b71e; -webkit-box-shadow: inset 0px 3px 0px #f4b71e; box-shadow: inset 0px 3px 0px #f4b71e; }
}
body.dirge a { color: #f4b71e;
}
body.dirge a:hover { background-color: #392735;
}

Transformers Pallete Swap - Script Codes JS Codes

$(document).ready(function(){ paletteSwap.init(); $('blockquote').on('click', function(){ window.open($(this).attr('cite')); });
});
/*
=========================
paletteSwap
-Handles the swapping of classes of each color palette
=========================
*/
var paletteSwap = { lastPalette : null, //-- initial setup: nav link JS and default style (1st option in nav) init : function(){ $('nav ul li a').on('click', paletteSwap.click); var defaultPalette = $('nav ul li a:first-of-type').attr('data-palette'); this.swap(defaultPalette); }, //-- navigation click event: fire palette swap click : function(e){ e.preventDefault(); paletteSwap.swap($(e.currentTarget).attr('data-palette')); }, //-- palette swap logic: add class to new palette class to the body and remove old palette class swap : function(palette){ $('body').removeClass(this.lastPalette); $('body').addClass(palette); $('nav ul li a').removeClass('active'); $('a[data-palette="'+palette+'"]').addClass('active'); this.lastPalette = palette; }
};

Home Page	Home
Developer	Jeremy Paris
Username	digsite_
Uploaded	September 08, 2022
Rating	4
Size	7,527 Kb
Views	32,384

Do you need developer help for Transformers Pallete Swap?

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!

Jeremy Paris (digsite_) Script Codes

Name	Size
Push It	7,211 Kb
Beating Pixel Heart	3,940 Kb
Pulsating Glowing Ball	2,268 Kb
Animated Redacted Text	3,601 Kb
Fieldset Style Sketching	3,073 Kb
Shadow Focus Effect	2,325 Kb
Fun with Dropcap.JS	4,712 Kb
Diamond Loader	2,595 Kb
Sample Profile Page	4,816 Kb
Pinstripes	1,816 Kb

Create amazing blog posts 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
Electric worm	Jeffibacache	2,377 Kb
Wikipedia Viewer	Codinger	4,681 Kb
CSS3 Fullscreen Background Slideshow	Leetech	3,435 Kb
Sitemap generator for Sharepoint	Gyusza	2,518 Kb
Portfolio Page	KaylaMT	1,983 Kb
Twitch API	Coderpilot	3,412 Kb
Filtering with shuffle.js	Deyand	2,712 Kb
Ionic - Wordpress REST API starter	Superpikar	2,961 Kb
Modal Dialog	Gigaleet	2,251 Kb
NT Tribute	Skybutterfly	2,850 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!