Timeline Blueprint

Developer
Englishextra
Size
5,154 Kb
Views
8,092

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
IQ Test

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 );
Timeline Blueprint - Script Codes
Timeline Blueprint - Script Codes
Home Page Home
Developer Englishextra
Username englishextra
Uploaded January 17, 2023
Rating 3
Size 5,154 Kb
Views 8,092
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
Responsive Flexbox Administration
Grid 2 Go
Metro UI Colors Palettes
Blog Article Template
A Pen by englishextra
CSS angled stripes
Parallax.js
Core.css
JSON based picture gallery with lazyloading
QR code generating with vanilla js
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!