Panels and Bullets

Developer
Srijon Sarker
Size
2,130 Kb
Views
6,072
  1. Panels and Bullets Previews
  2. Panels and Bullets HTML Codes
  3. Panels and Bullets CSS Codes
  4. Panels and Bullets JS Codes

How do I make an panels and bullets?

Starter pen for course “Practical Web Animation”. What is a panels and bullets? How do you make a panels and bullets? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.

Panels and Bullets Previews
IQ Test

Panels and Bullets - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Panels and Bullets</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3>Check out my list</h3> </div> <div class="panel-body"> <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Led Zeppelin</li> <li><i class="fa-li fa fa-check-square"></i>Bacon</li> <li><i class="fa-li fa fa-check-square"></i>Beards</li> <li><i class="fa-li fa fa-check-square"></i>One-armed push ups</li> </ul> </div> </div> </div> <div class="col-xs-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3>Check out my list</h3> </div> <div class="panel-body"> <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Led Zeppelin</li> <li><i class="fa-li fa fa-check-square"></i>Bacon</li> <li><i class="fa-li fa fa-check-square"></i>Beards</li> <li><i class="fa-li fa fa-check-square"></i>One-armed push ups</li> </ul> </div> </div> </div> <div class="col-xs-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3>Check out my list</h3> </div> <div class="panel-body"> <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Led Zeppelin</li> <li><i class="fa-li fa fa-check-square"></i>Bacon</li> <li><i class="fa-li fa fa-check-square"></i>Beards</li> <li><i class="fa-li fa fa-check-square"></i>One-armed push ups</li> </ul> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Panels and Bullets - Script Codes CSS Codes

body { font-size: 18px; padding-top: 40px;
}
.panel { color: #565; position: relative; top: -50px; opacity: 0;
}
.panel li { position: relative; left: 50px; opacity: 0;
}
.panel h3 { margin-top: 10px;
}
.fa-check-square { color: green; }

Panels and Bullets - Script Codes JS Codes

var panels = $('.panel');
var items = panels.find('li');
var panelDelay = 500;
var i = 0;
panels.each(function () { $(this).delay(i).animate({ top: '0', opacity: '1' }, 800); i += panelDelay;
});
var itemDelay = 200;
var j = 1200;
items.each(function () { $(this).delay(j).animate({ left: '0', opacity: '1' }, 800); j += itemDelay;
});
Panels and Bullets - Script Codes
Panels and Bullets - Script Codes
Home Page Home
Developer Srijon Sarker
Username Creative_Srijon
Uploaded November 29, 2022
Rating 3
Size 2,130 Kb
Views 6,072
Do you need developer help for Panels and Bullets?

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!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Calendar Widget
CSS Slider
Material Login Form
Flat Pricing Table
Image Hover ii
Statics UI
Facebook like button Emoji Reaction
My Profile Card
Flat Pricing Table
Material Design Author Quote
Create amazing sales emails 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!