Timeline Blueprint
How do I make an timeline blueprint?
SCSS Timeline with small animations / Vanilla JS. What is a timeline blueprint? How do you make a timeline blueprint? This script and codes were developed by Englishextra on 17 January 2023, Tuesday.
Timeline Blueprint Previews
Timeline Blueprint - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Timeline Blueprint</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/normalize/5.0.0/normalize.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=Open+Sans:300,700);
body { background: #c5670a; margin: 0; font-family: "Open Sans", sans-serif; font-weight: 300;
}
* { box-sizing: border-box;
}
.timeline { margin-top: 2em;
}
.timeline > ul { display: inline-block; position: relative; left: 50%; border-left: 1px solid #eee; margin-top: 2.3125em; padding: 0; padding-top: 4em; color: #eee;
}
.timeline > ul:before, .timeline > ul:after { content: ""; background: #eee; border-radius: 100%; display: block; position: absolute;
}
.timeline > ul:before { left: -1.03125em; top: -2.0625em; width: 2.0625em; height: 2.0625em; box-shadow: 0 0 0 0.25em rgba(238, 238, 238, 0.3);
}
.timeline > ul:after { bottom: -0.6875em; left: -0.34375em; width: 0.6875em; height: 0.6875em;
}
.timeline li { position: relative; width: 8em; list-style: none; margin: 0 0 4em 8em; padding: 0; padding-left: 1em;
}
.timeline li:before, .timeline li:after { content: ""; background: #eee; display: block; position: absolute;
}
.timeline li:before { left: -8em; top: 50%; width: 8em; height: 1px;
}
.timeline li:after { left: -8.21875em; top: 50%; transform: translateY(-50%); height: 0.4375em; width: 0.4375em; border-radius: 100%;
}
.timeline li p { margin: 0;
}
.timeline__date { font-weight: 700; margin-bottom: .25em;
}
.timeline li:nth-child(2n) { left: -17em; margin-left: 0; padding-left: 0; text-align: right;
}
.timeline li:nth-child(2n):before { left: 9em;
}
.timeline li:nth-child(2n):after { left: 16.78125em; top: 50%;
}
.timeline li:last-child { margin-bottom: 4em;
}
.js .timeline li p, .js .timeline li:after { opacity: 0;
}
.js .timeline li:before { width: 0;
}
.js .timeline .timeline--active p { opacity: 1; transition: opacity .5s .5s ease-in;
}
.js .timeline .timeline--active:before { width: 8em; transition: width 0.5s .25s ease-in;
}
.js .timeline .timeline--active:after { opacity: 1; transition: opacity 0.25s ease-in;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="timeline"> <ul> <li> <div class="timeline__date">2008:</div> <p>Graduated London Design School</p> </li> <li> <div class="timeline__date">2010:</div> <p>Art Director at Sensa Nostra</p> </li> <li> <div class="timeline__date">2010-2013:</div> <p>Freelancer in Berlin</p> </li> </ul>
</section> <script src="js/index.js"></script>
</body>
</html>Timeline Blueprint - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);
body { background: #c5670a; margin: 0; font-family: "Open Sans", sans-serif; font-weight: 300;
}
* { box-sizing: border-box;
}
.timeline { margin-top: 2em;
}
.timeline > ul { display: inline-block; position: relative; left: 50%; border-left: 1px solid #eee; margin-top: 2.3125em; padding: 0; padding-top: 4em; color: #eee;
}
.timeline > ul:before, .timeline > ul:after { content: ""; background: #eee; border-radius: 100%; display: block; position: absolute;
}
.timeline > ul:before { left: -1.03125em; top: -2.0625em; width: 2.0625em; height: 2.0625em; box-shadow: 0 0 0 0.25em rgba(238, 238, 238, 0.3);
}
.timeline > ul:after { bottom: -0.6875em; left: -0.34375em; width: 0.6875em; height: 0.6875em;
}
.timeline li { position: relative; width: 8em; list-style: none; margin: 0 0 4em 8em; padding: 0; padding-left: 1em;
}
.timeline li:before, .timeline li:after { content: ""; background: #eee; display: block; position: absolute;
}
.timeline li:before { left: -8em; top: 50%; width: 8em; height: 1px;
}
.timeline li:after { left: -8.21875em; top: 50%; transform: translateY(-50%); height: 0.4375em; width: 0.4375em; border-radius: 100%;
}
.timeline li p { margin: 0;
}
.timeline__date { font-weight: 700; margin-bottom: .25em;
}
.timeline li:nth-child(2n) { left: -17em; margin-left: 0; padding-left: 0; text-align: right;
}
.timeline li:nth-child(2n):before { left: 9em;
}
.timeline li:nth-child(2n):after { left: 16.78125em; top: 50%;
}
.timeline li:last-child { margin-bottom: 4em;
}
.js .timeline li p, .js .timeline li:after { opacity: 0;
}
.js .timeline li:before { width: 0;
}
.js .timeline .timeline--active p { opacity: 1; transition: opacity .5s .5s ease-in;
}
.js .timeline .timeline--active:before { width: 8em; transition: width 0.5s .25s ease-in;
}
.js .timeline .timeline--active:after { opacity: 1; transition: opacity 0.25s ease-in;
}
Timeline Blueprint - Script Codes JS Codes
// Vainlla timeline helper function (uses classie helper functions by desandro)
var timeline = (function() { var init = function() { var timelineItems = document.querySelectorAll(".timeline li"); for (var i=0;i < timelineItems.length;i++) { classie.add( timelineItems[i],"timeline--active"); } }; return { init: init };
})();
window.onload = function() { timeline.init();
};
/*! * classie v1.0.0 * class helper functions * from bonzo https://github.com/ded/bonzo * MIT license * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */
/*jshint browser: true, strict: true, undef: true, unused: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); };
}
else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); };
}
function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );
}
var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) { // AMD define( classie );
} else { // browser global window.classie = classie;
}
})( window );
| Developer | Englishextra |
| Username | englishextra |
| Uploaded | January 17, 2023 |
| Rating | 3 |
| Size | 5,154 Kb |
| Views | 8,096 |
Do you need developer help for Timeline Blueprint?
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!
Englishextra (englishextra) Script Codes
| Name | Size |
| Core.css | 4,958 Kb |
| JSON based picture gallery with lazyloading | 10,270 Kb |
| Grid 2 Go | 3,049 Kb |
| A Pen by englishextra | 6,117 Kb |
| QR code generating with vanilla js | 5,758 Kb |
| Typeboost.css | 25,474 Kb |
| Responsive Flexbox Administration | 7,376 Kb |
| Parallax.js | 11,997 Kb |
| Blog Article Template | 14,860 Kb |
| Metro UI Colors Palettes | 53,243 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Konami Code Easter Egg | Teolitto | 3,051 Kb |
| Svg sky | Omodev | 7,070 Kb |
| Price Comparison Table | Orrinward | 3,459 Kb |
| Hexagons | Ashmind | 4,360 Kb |
| Slide out Menu | Rbiggs | 4,936 Kb |
| A Pen by Ash | Littleginger | 2,386 Kb |
| Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
| Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
| GrcJS | Vino6 | 2,047 Kb |
| Apex Calculator | Michaelwnelson | 2,370 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!