Vanilla FlowType.js

Developer
Kyle Foster
Size
4,247 Kb
Views
26,312
  1. Vanilla FlowType.js Previews
  2. Vanilla FlowType.js HTML Codes
  3. Vanilla FlowType.js CSS Codes
  4. Vanilla FlowType.js JS Codes

How do I make an vanilla flowtype.js?

Here's a jQuery-less version of the new hotness that is FlowType.js. See the original at http://simplefocus.com/flowtype/. Feel free to use this in your projects, just let me know when you do. :). What is a vanilla flowtype.js? How do you make a vanilla flowtype.js? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.

Vanilla FlowType.js Previews
IQ Test

Vanilla FlowType.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vanilla FlowType.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
<h1>Vanilla FlowType.js <br/><span>( Hint: resize your window )</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta quam at euismod porta. Etiam quis nunc in tellus dictum viverra. Mauris pretium augue a velit aliquet, non malesuada nunc dapibus. Sed ultricies leo magna, non malesuada nunc fermentum eget. Nam laoreet, libero rutrum mattis porttitor, purus neque eleifend libero, a sollicitudin est nisi ut dui. Praesent hendrerit nulla at lorem malesuada, in tristique justo pharetra. In ultricies, neque sed sollicitudin posuere, nisl sapien fermentum justo, nec imperdiet enim tortor sed ipsum. Fusce quam nunc, facilisis quis tortor non, fermentum molestie est. Praesent ornare at libero ac aliquam. Nullam sapien mauris, suscipit sit amet vehicula ac, pellentesque et quam.</p>
<p>Morbi accumsan purus nec vulputate pretium. Vivamus lobortis vitae libero nec porttitor. Nulla venenatis, erat a cursus ullamcorper, nisi tortor rhoncus lorem, eu dignissim odio dui a nunc. Nullam sit amet quam odio. Mauris justo lectus, eleifend pretium tellus non, gravida blandit dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eget volutpat justo. Phasellus venenatis ligula et fermentum sollicitudin. Aliquam tincidunt purus vel eros dignissim gravida.</p>
<p>Vestibulum vel velit enim. Quisque adipiscing interdum pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque sit amet orci justo. Nam rhoncus tincidunt nulla, id tincidunt turpis condimentum in. Aliquam mollis lacinia fermentum. Integer ultrices ante et orci dignissim, ac condimentum leo ultrices. Praesent ornare pellentesque lectus, lacinia feugiat mi pretium vel. Integer sapien velit, venenatis a nulla eget, iaculis molestie dui. Phasellus quis velit ac purus dignissim sollicitudin in vel diam. Donec sed sapien consequat, dignissim urna id, lacinia quam. Ut aliquet augue sit amet volutpat suscipit.</p>
<p>Maecenas placerat ac justo nec blandit. Vestibulum vulputate neque urna, ut sodales dui tincidunt volutpat. Nam cursus tempor odio, non semper turpis rhoncus sit amet. Fusce ac sem accumsan, pretium sem nec, congue tortor. Integer consequat luctus mi, sit amet placerat tellus cursus ut. Maecenas eros mauris, volutpat quis turpis ut, rutrum auctor nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce luctus pellentesque diam eu tincidunt. Nam vitae ligula sit amet magna pharetra volutpat. Nullam id fringilla tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eleifend risus metus, eu egestas dolor aliquet at. Pellentesque aliquam leo at mauris elementum sollicitudin. Sed tincidunt lacinia turpis, sit amet suscipit nulla.</p>
<p>Quisque molestie risus a luctus fringilla. Etiam nulla lorem, adipiscing ut ultrices ut, posuere nec nisl. Nulla odio augue, vulputate eleifend justo non, vulputate suscipit urna. Sed velit est, vestibulum vitae aliquam luctus, tempor ac arcu. Ut commodo dui dignissim rutrum accumsan. Donec elementum a mi elementum tempor. Donec nulla nisl, adipiscing at sodales a, dapibus ut neque. Phasellus rutrum volutpat adipiscing. Praesent scelerisque adipiscing porttitor. Morbi vel posuere leo. Mauris non odio id nunc pretium pulvinar eu at enim. Duis laoreet neque sit amet augue semper congue. Proin ut aliquet nunc. Proin euismod vestibulum eleifend. Nullam tempor nisl vel vehicula interdum. Nulla consectetur, erat eu adipiscing convallis, dui ante scelerisque diam, et vulputate nunc elit in augue.</p> <script src="js/index.js"></script>
</body>
</html>

Vanilla FlowType.js - Script Codes CSS Codes

body { padding: 2em; color: #656D78; background: #F0F2F5; font: 300 18px/1.875 'Lato', 'Avenir', sans-serif;
}
h1 { color: #967ADC; line-height: 1; font-weight: 900; margin: 0 0 1em 0; text-align: center;
}
h1 span { color: #A0D468; font-size: 14px;
}
p { margin: 0 0 2em 0; }

Vanilla FlowType.js - Script Codes JS Codes

/*
* FlowType.js - Vanilla Version
* @author Kyle Foster (@hkfoster)
* @copyright 2013 Simple Focus (https://simplefocus.com)
* @thanks Giovanni Difeterici (http://gdifeterici.com)
* @license MIT
*/
;(function( window, document, undefined ) { 'use strict'; // Extend function function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[ key ] = b[ key ]; } } return a; } // Main function definition function flowtype( selector, options ) { this.selector = Array.prototype.slice.call( document.querySelectorAll( selector ) ); this.options = extend( this.defaults, options ); this.init(); }; // Overridable defaults flowtype.prototype = { defaults : { maximum : 9999, minimum : 1, maxFont : 9999, minFont : 1, fontRatio : 35, lineRatio : 1.45 }, // Magic math stuffs init : function( selector ) { var self = this, selector = self.selector, options = self.options; // Our for each function for ( var i = 0; i < selector.length; i++ ) { var selectorWidth = selector[i].offsetWidth, width = selectorWidth > options.maximum ? options.maximum : selectorWidth < options.minimum ? options.minimum : selectorWidth, fontBase = width / options.fontRatio, fontSize = fontBase > options.maxFont ? options.maxFont : fontBase < options.minFont ? options.minFont : fontBase; // Apply our styles selector[i].style.fontSize = fontSize + 'px'; selector[i].style.lineHeight = fontSize * options.lineRatio + 'px'; } // Fire resize function on ... well, resize window.addEventListener( 'resize', function() { self._resizeHandler(); } ); }, // Resize handler function _resizeHandler : function() { var self = this; function delayed() { self._resize(); self._resizeTimeout = null; } if ( this._resizeTimeout ) { clearTimeout( this._resizeTimeout ); } this._resizeTimeout = setTimeout( delayed, 50 ); }, // The actual resize function _resize : function() { this.init(); } } window.flowtype = flowtype;
})( window, document );
// Instantiate Plugin
new flowtype( 'p', { maxFont : 22, minFont : 11, fontRatio: 50, lineRatio: 1.875
});
Vanilla FlowType.js - Script Codes
Vanilla FlowType.js - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 3
Size 4,247 Kb
Views 26,312
Do you need developer help for Vanilla FlowType.js?

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!

Kyle Foster (hkfoster) Script Codes
Name
Rumble on Hover
Colored Single-Element Sections
Gradual.js
Messing Around with CSS3 Shadows
Ken Burns Banner
JQuery vs. Native JS Selectors
Vanilla Flavored Unorphanize
Vanilla Flavored Hypher
Rift.js
Askew - A Subtle Parallax Banner Plugin
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!