Skills Display, using jQuery

Developer
Keith Light
Size
4,084 Kb
Views
12,144
  1. Skills Display, using jQuery Previews
  2. Skills Display, using jQuery HTML Codes
  3. Skills Display, using jQuery CSS Codes
  4. Skills Display, using jQuery JS Codes

How do I make an skills display, using jquery?

Saw a pen on the front page I liked, thought Id try and recreate it.Original pen - http://codepen.io/jlegosama/pen/XbGGEE. What is a skills display, using jquery? How do you make a skills display, using jquery? This script and codes were developed by Keith Light on 18 November 2022, Friday.

Skills Display, using jQuery Previews
IQ Test

Skills Display, using jQuery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Skills Display, using jQuery</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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=Lato:300,400,700);
.container { max-width: 480px; position: relative; margin: 0 auto; padding: 0 10px;
}
.container:before, .container:after { content: ""; display: table;
}
.container:after { clear: both;
}
html { font-size: 16px;
}
body { font-family: 'Lato', Tahoma, Geneva, sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.6; background: #f4f4f4; color: #212121;
}
.header { background: #212121; position: relative; overflow: hidden;
}
.header:after { content: ""; background: #f4f4f4; width: 120%; height: 20%; position: absolute; bottom: -10%; left: -10%; transform: rotate(-2deg);
}
h1 { color: #f4f4f4; font-size: 2rem; text-align: center; padding: 10rem 0;
}
.spacer { min-height: 20rem;
}
dt:after { width: 100%; background-color: #e0e0e0; height: 0.5rem; content: ""; display: block;
}
dd { background: red; width: 0; height: 0.5rem; position: relative; top: -0.5rem;
}
dd.html { background: #F44336;
}
dd.css { background: #2196F3;
}
dd.jquery { background: #FFCA28;
}
dd.scss { background: #F06292;
}
dd.javascript { background: #FFA000;
}
dd.php { background: #303F9F;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="spacer header"> <h1>Scroll Down</h1>
</div>
<div class="container skills"> <dl> <dt>HTML</dt> <dd class="skill-percent html" data-percent="90"></dd> <dt>CSS</dt> <dd class="skill-percent css" data-percent="85"></dd> <dt>jQuery</dt> <dd class="skill-percent jquery" data-percent="60"></dd> <dt>SCSS</dt> <dd class="skill-percent scss" data-percent="50"></dd> <dt>Javascript</dt> <dd class="skill-percent javascript" data-percent="40"></dd> <dt>PHP</dt> <dd class="skill-percent php" data-percent="10"></dd> </dl>
</div>
<div class="container spacer">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Skills Display, using jQuery - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
.container { max-width: 480px; position: relative; margin: 0 auto; padding: 0 10px;
}
.container:before, .container:after { content: ""; display: table;
}
.container:after { clear: both;
}
html { font-size: 16px;
}
body { font-family: 'Lato', Tahoma, Geneva, sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.6; background: #f4f4f4; color: #212121;
}
.header { background: #212121; position: relative; overflow: hidden;
}
.header:after { content: ""; background: #f4f4f4; width: 120%; height: 20%; position: absolute; bottom: -10%; left: -10%; transform: rotate(-2deg);
}
h1 { color: #f4f4f4; font-size: 2rem; text-align: center; padding: 10rem 0;
}
.spacer { min-height: 20rem;
}
dt:after { width: 100%; background-color: #e0e0e0; height: 0.5rem; content: ""; display: block;
}
dd { background: red; width: 0; height: 0.5rem; position: relative; top: -0.5rem;
}
dd.html { background: #F44336;
}
dd.css { background: #2196F3;
}
dd.jquery { background: #FFCA28;
}
dd.scss { background: #F06292;
}
dd.javascript { background: #FFA000;
}
dd.php { background: #303F9F;
}

Skills Display, using jQuery - Script Codes JS Codes

// this has nothing to do with the animation, just forces the window to be a size that allows a scroll
var containerHeight = $(window).height() / 2;
$('.spacer').css("height", containerHeight);
// Find the height of the previous section, half it so when you have scrolled more than half past the section, it triggers the animation
var x = $('.skills').prev().height() / 4;
$(window).scroll(function() { // checks to see if you have scrolled far enough down to activate the animation if ($(window).scrollTop() >= x) { //find each element with the class .skill-percent $('.skill-percent').each(function() { // animate $(this).animate({ //finds the width from the data-percent attribute width: $(this).data('percent') + '%' }, 1000); }); }
});
Skills Display, using jQuery - Script Codes
Skills Display, using jQuery - Script Codes
Home Page Home
Developer Keith Light
Username keefyboooo
Uploaded November 18, 2022
Rating 3.5
Size 4,084 Kb
Views 12,144
Do you need developer help for Skills Display, using jQuery?

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!

Keith Light (keefyboooo) Script Codes
Name
Off Canvas Pop Out Menu
Overlay Menu Concept
DevWars weekly challenge week 1
Weather App Concept
Responsive Dock Menu Concept
Rainbow Text
Colour Palette From Material Design
Mobile Menu Concept
Animated Burger Menu
Destiny Style Loading Icon
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!