Flex Stuff

Developer
Joseph1401
Size
2,107 Kb
Views
30,360
  1. Flex Stuff Previews
  2. Flex Stuff HTML Codes
  3. Flex Stuff CSS Codes
  4. Flex Stuff JS Codes

How do I make an flex stuff?

What is a flex stuff? How do you make a flex stuff? This script and codes were developed by Joseph1401 on 16 September 2022, Friday.

Flex Stuff Previews
IQ Test

Flex Stuff - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex Stuff</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bound"> <div class="container"> </div>
</div>
<button id="compress">Compress</button>
<button id="wave">Wave</button> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flex Stuff - Script Codes CSS Codes

.bound{ height: 40em; width : 100%; max-width : 40em; overflow:hidden;
}
.container{ height : .5em; display: flex; align-content: center; justify-content: center;
}
.bar{ margin: .1em; height:.5em; width: .5em; border-radius:5em; background-color: #E4572E; transition: all 5s;
}
.bar.touched{ background-color: #76B041;
}
.bar:hover,.bar.hover{ transition: all 0s; height:.5em; width: 7em; border-radius:5em; background-color: E4572E; box-shadow: 1em 2em #76B041, -2em 5em #17BEBB;
}
body{ background-color : #466362; font-family: arial;
}

Flex Stuff - Script Codes JS Codes

$(function(){ var num = 80; for(var i = 0 ; i < num ; i++){ $('.bound').append($('<div class="container">')); } for(var i = 0 ; i < num ; i++){ $('.container').append($('<div class="bar">')); } $('.bar').on('mouseover',function(){ $(this).addClass('touched'); }); $('#compress').on('click',function(){ $('.container .bar:last-child').trigger('mouseover'); $('.container .bar:last-child').addClass('hover'); setTimeout(function(){$('.container .bar:last-child').removeClass('hover')}, 500); }) $('#wave').on('click',function(){ var arr = $('.container .bar:last-child'); $(arr).addClass("hover").delay(1000).queue(function(){ $(this).removeClass("hover").dequeue(); }); });
})
Flex Stuff - Script Codes
Flex Stuff - Script Codes
Home Page Home
Developer Joseph1401
Username jmills4122
Uploaded September 16, 2022
Rating 3
Size 2,107 Kb
Views 30,360
Do you need developer help for Flex Stuff?

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!

Joseph1401 (jmills4122) Script Codes
Name
WebGL
Collections Viewer
Diagonal menu Test
A Pen by Joseph1401
Button Stuff
Quote Generator
Pomodoro
Joe Test Pen
Eyes
Sorty
Create amazing captions 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!