Flashy Rating Page

Developer
Aaron Levine
Size
4,375 Kb
Views
2,024
  1. Flashy Rating Page Previews
  2. Flashy Rating Page HTML Codes
  3. Flashy Rating Page CSS Codes
  4. Flashy Rating Page JS Codes

How do I make an flashy rating page?

What is a flashy rating page? How do you make a flashy rating page? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

Flashy Rating Page Previews
IQ Test

Flashy Rating Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flashy Rating Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta content='width=device-width, minimum-scale=1, maximum-scale=1' name='viewport'>
<div class='slide-select'> <h2>Rate Me</h2> <input id='rad1' name='rad' type='radio'> <input id='rad2' name='rad' type='radio'> <input id='rad3' name='rad' type='radio'> <input id='rad4' name='rad' type='radio'> <input id='rad5' name='rad' type='radio'> <div class='slider'></div> <label data-text='One' for='rad1'></label> <label data-text='Two' for='rad2'></label> <label data-text='Three' for='rad3'></label> <label data-text='Four' for='rad4'></label> <label data-text='Five' for='rad5'></label> <div class='underlay'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.2/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flashy Rating Page - Script Codes CSS Codes

.underlay { position: fixed; left: 0; top: 0; display: inline-block; width: 100%; height: 100%; background: #00ACFF; z-index: -1; -moz-transition: background 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); -o-transition: background 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); -webkit-transition: background 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); transition: background 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51);
}
.slide-select { position: relative; width: 80%; margin: auto; z-index: 1000; -webkit-tap-highlight-color: transparent; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
}
.slide-select, .slide-select * { box-sizing: border-box;
}
.slide-select > input[type="radio"] { display: none;
}
.slide-select > input[type="radio"]:checked ~ .slider { background: #FFF; -moz-box-shadow: 0 3px 0 #FFF, 0 -2px 0 #FFF; -webkit-box-shadow: 0 3px 0 #FFF, 0 -2px 0 #FFF; box-shadow: 0 3px 0 #FFF, 0 -2px 0 #FFF;
}
.slide-select > input[type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(1) { color: #00ACFF;
}
.slide-select > input[type="radio"]:nth-of-type(1):checked ~ .slider { -moz-transform: translate(0%, 0); -ms-transform: translate(0%, 0); -webkit-transform: translate(0%, 0); transform: translate(0%, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px; border-radius: 5px 0 0 5px;
}
.slide-select > input[type="radio"]:nth-of-type(1):checked ~ .underlay { /* * Color stuff, would like to come up with a less pre-defined mixer. */ background: #FF5F5F;
}
.slide-select > input[type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(2) { color: #00ACFF;
}
.slide-select > input[type="radio"]:nth-of-type(2):checked ~ .slider { -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
}
.slide-select > input[type="radio"]:nth-of-type(2):checked ~ .underlay { /* * Color stuff, would like to come up with a less pre-defined mixer. */ background: #ff8630;
}
.slide-select > input[type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(3) { color: #00ACFF;
}
.slide-select > input[type="radio"]:nth-of-type(3):checked ~ .slider { -moz-transform: translate(200%, 0); -ms-transform: translate(200%, 0); -webkit-transform: translate(200%, 0); transform: translate(200%, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -webkit-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0);
}
.slide-select > input[type="radio"]:nth-of-type(3):checked ~ .underlay { /* * Color stuff, would like to come up with a less pre-defined mixer. */ background: #FFAD00;
}
.slide-select > input[type="radio"]:nth-of-type(4):checked ~ label:nth-of-type(4) { color: #00ACFF;
}
.slide-select > input[type="radio"]:nth-of-type(4):checked ~ .slider { -moz-transform: translate(300%, 0); -ms-transform: translate(300%, 0); -webkit-transform: translate(300%, 0); transform: translate(300%, 0); -moz-transform: translate3d(300%, 0, 0); -ms-transform: translate3d(300%, 0, 0); -webkit-transform: translate3d(300%, 0, 0); transform: translate3d(300%, 0, 0);
}
.slide-select > input[type="radio"]:nth-of-type(4):checked ~ .underlay { /* * Color stuff, would like to come up with a less pre-defined mixer. */ background: #a2d623;
}
.slide-select > input[type="radio"]:nth-of-type(5):checked ~ label:nth-of-type(5) { color: #00ACFF;
}
.slide-select > input[type="radio"]:nth-of-type(5):checked ~ .slider { -moz-transform: translate(400%, 0); -ms-transform: translate(400%, 0); -webkit-transform: translate(400%, 0); transform: translate(400%, 0); -moz-transform: translate3d(400%, 0, 0); -ms-transform: translate3d(400%, 0, 0); -webkit-transform: translate3d(400%, 0, 0); transform: translate3d(400%, 0, 0); -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0; border-radius: 0 5px 5px 0;
}
.slide-select > input[type="radio"]:nth-of-type(5):checked ~ .underlay { /* * Color stuff, would like to come up with a less pre-defined mixer. */ background: #45FF45;
}
.slide-select .slider { position: absolute; display: inline-block; width: 20%; height: 3rem; -moz-transition: -moz-transform 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51), border-radius 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51), background 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); -o-transition: -o-transform 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51), border-radius 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51), background 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); -webkit-transition: -webkit-transform 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51), border-radius 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51), background 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); transition: transform 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51), border-radius 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51), background 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51);
}
.slide-select > label { position: relative; float: left; display: inline-block; width: 20%; line-height: 3rem; text-align: center; border: solid 1px #FFF; border-right: none; color: #FFF; -moz-transition: color 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); -o-transition: color 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); -webkit-transition: color 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51); transition: color 0.33s cubic-bezier(0.46, 0.1, 0.2, 1.51);
}
.slide-select > label:first-of-type { -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px; border-radius: 5px 0 0 5px;
}
.slide-select > label:last-of-type { border-right: solid 1px #FFF; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0; border-radius: 0 5px 5px 0;
}
.slide-select > label:after { content: attr(data-text);
}
h2 { text-align: center;
}
html, body { box-sizing: border-box; width: 100%; height: 100%; padding: 1rem; margin: 0; background: #00ACFF; color: #FFF; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

Flashy Rating Page - Script Codes JS Codes

/* * Adds ability to deselect and places event on touchstart / mousedown insetead of click. */
$('label').on('mousedown touchstart', function(){ var $rad = $('#'+$(this).attr('for')); if($rad.prop('checked')){ $rad.prop('checked', false); $rad.one('click', function(e){ $rad.prop('checked', false); e.preventDefault(); return false; }); }
});
/* * Adds responsiveness */
FastClick.attach(document.body);
Flashy Rating Page - Script Codes
Flashy Rating Page - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3
Size 4,375 Kb
Views 2,024
Do you need developer help for Flashy Rating Page?

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!

Aaron Levine (Aldlevine) Script Codes
Name
Kaskade 0.3 - Desktop Demo
Colorful Slider Graph
Price is Right Wheel - Better Inertia
A Pen by Aaron Levine
Custom Scroll with Momentum and Parallax
JQuery.momentus
Pure CSS Rating Scale
Colored Rain
Card Mockup
Canvas Falloff Test
Create amazing marketing copy 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!