CSS3 & jQuery Text Intro

Developer
Nick Mkrtchyan
Size
7,789 Kb
Views
18,216
  1. CSS3 & jQuery Text Intro Previews
  2. CSS3 & jQuery Text Intro HTML Codes
  3. CSS3 & jQuery Text Intro CSS Codes
  4. CSS3 & jQuery Text Intro JS Codes

How do I make an css3 & jquery text intro?

What is a css3 & jquery text intro? How do you make a css3 & jquery text intro? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

CSS3 & jQuery Text Intro Previews
IQ Test

CSS3 & jQuery Text Intro - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 & jQuery Text Intro</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- APFF -->
<div class="container">	<div class="os-phrases" id="os-phrases">	<h2>jQuery</h2>	<h2>CSS3</h2>	<h2>Text</h2>	<h2>Animation</h2> <h2>Effect</h2>	</div>
</div>
<!-- /APFF -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- /rashgold -->
<script>
/*rashgold*/
$(document).ready(function() {	$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();	})
</script> <script src="js/index.js"></script>
</body>
</html>

CSS3 & jQuery Text Intro - Script Codes CSS Codes

/*APFF*/
@font-face { font-family: 'Electrolize'; font-style: normal; font-weight: 700px; src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
body {	font-family: 'Lato', Calibri, Arial, sans-serif;	color: #fff;	background: #000;
}
.os-phrases h2 {	font-family: 'Electrolize';	font-size: 100px;	font-weight: 800;	width: 100%;	overflow: hidden;	text-transform: uppercase;	padding: 0;	margin: 0;	position: absolute;	top: 0;	left: 0;	letter-spacing: 14px;	text-align: center;
}
.os-phrases h2,
.os-phrases h2 > span {	font-family: 'Electrolize';	height: 100%;	/* Centering with flexbox */	display: -webkit-box;	display: -moz-box;	display: -ms-flexbox;	display: -webkit-flex;	display: flex;	-webkit-flex-direction: row;	-ms-flex-direction: row;	flex-direction: row;/*APFF*/	-webkit-box-pack: center;	-moz-box-pack: center;	-webkit-justify-content: center;	-ms-flex-pack: center;	justify-content: center;	-webkit-box-align: center;	-moz-box-align: center;	-webkit-align-items: center;	-ms-flex-align: center;	align-items: center;
}
.os-phrases h2 > span {	margin: 0 15px;
}
.os-phrases h2 > span > span {	display: inline-block;	-webkit-perspective: 1000px;	-moz-perspective: 1000px;	perspective: 1000px;	-webkit-transform-origin: 50% 50%;	-moz-transform-origin: 50% 50%;	transform-origin: 50% 50%;
}
.os-phrases h2 > span > span > span {	display: inline-block;	color: hsla(0,0%,0%,0);	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: translate3d(0,0,0);	-moz-transform: translate3d(0,0,0);	transform: translate3d(0,0,0);	-webkit-animation: OpeningSequence 5.2s linear forwards;	-moz-animation: OpeningSequence 5.2s linear forwards;	animation: OpeningSequence 5.2s linear forwards;
}
.os-phrases h2:nth-child(2) > span > span > span {	-webkit-animation-delay: 5s;	-moz-animation-delay: 5s;	animation-delay: 5s;
}
.os-phrases h2:nth-child(3) > span > span > span {	-webkit-animation-delay: 10s;	-moz-animation-delay: 10s;	animation-delay: 10s;
}
.os-phrases h2:nth-child(4) > span > span > span {	-webkit-animation-delay: 15s;	-moz-animation-delay: 15s;	animation-delay: 15s;
}
.os-phrases h2:nth-child(5) > span > span > span {	font-size: 150px;	-webkit-animation-delay: 21s;	-moz-animation-delay: 21s;	animation-delay: 21s;	-webkit-animation-duration: 8s;	-moz-animation-duration: 8s;	animation-duration: 8s;
}
.os-phrases h2:nth-child(6) > span > span > span {	-webkit-animation-delay: 30s;	-moz-animation-delay: 30s;	animation-delay: 30s;
}
.os-phrases h2:nth-child(7) > span > span > span {	-webkit-animation-delay: 34s;	-moz-animation-delay: 34s;	animation-delay: 34s;
}
@-webkit-keyframes OpeningSequence {	0% {	text-shadow: 0 0 50px #fff;	letter-spacing: 80px;	opacity: 0;	-webkit-transform: rotateY(-90deg);	}	50% {	text-shadow: 0 0 1px #fff;	letter-spacing: 14px;	opacity: 0.8;	-webkit-transform: rotateY(0deg);	}	85% {	text-shadow: 0 0 1px #fff;	opacity: 0.8;	-webkit-transform: rotateY(0deg) translateZ(100px);	}	100% {	text-shadow: 0 0 10px #fff;	opacity: 0;	-webkit-transform: translateZ(130px);	pointer-events: none;	}
}
@-moz-keyframes OpeningSequence {	0% {	text-shadow: 0 0 50px #fff;	letter-spacing: 80px;	opacity: 0.2;	-moz-transform: rotateY(-90deg);	}	50% {	text-shadow: 0 0 1px #fff;	letter-spacing: 14px;	opacity: 0.8;/*APFF*/	-moz-transform: rotateY(0deg);	}	85% {	text-shadow: 0 0 1px #fff;	opacity: 0.8;	-moz-transform: rotateY(0deg) translateZ(100px);	}	100% {	text-shadow: 0 0 10px #fff;	opacity: 0;	-moz-transform: translateZ(130px);	pointer-events: none;	}
}
@keyframes OpeningSequence {	0% {	text-shadow: 0 0 50px #fff;	letter-spacing: 80px;	opacity: 0.2;	transform: rotateY(-90deg);	}	50% {	text-shadow: 0 0 1px #fff;	letter-spacing: 14px;	opacity: 0.8;	transform: rotateY(0deg);	}	85% {	text-shadow: 0 0 1px #fff;	opacity: 0.8;	transform: rotateY(0deg) translateZ(100px);	}	100% {	text-shadow: 0 0 10px #fff;	opacity: 0;	transform: translateZ(130px);	pointer-events: none;	}
}
.os-phrases h2:nth-child(8) > span > span > span {	font-size: 30px;	-webkit-animation: FadeIn 4s linear 40s forwards;	-moz-animation: FadeIn 4s linear 40s forwards;	animation: FadeIn 4s linear 40s forwards;
}
@-webkit-keyframes FadeIn {	0% {	opacity: 0;	text-shadow: 0 0 50px #fff;	}	100% {	opacity: 0.8;	text-shadow: 0 0 1px #fff;	}
}
@-moz-keyframes FadeIn {	0% {	opacity: 0;	text-shadow: 0 0 50px #fff;	}	100% {	opacity: 0.8;	text-shadow: 0 0 1px #fff;	}
}
@keyframes FadeIn {	0% {	opacity: 0;	text-shadow: 0 0 50px #fff;	}	100% {	opacity: 0.8;	text-shadow: 0 0 1px #fff;	}
}
/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {	font-weight: 600;
}

CSS3 & jQuery Text Intro - Script Codes JS Codes

/*rashgold*/
/*!	*/
(function ($) { function injector(t, splitter, klass, after) { var a = t.text().split(splitter), inject = ''; if (a.length) { $(a).each(function (i, item) { inject += '<span class="' + klass + (i + 1) + '">' + item + '</span>' + after; }); t.empty().append(inject); } } var methods = { init: function () { return this.each(function () { injector($(this), '', 'char', ''); }); }, words: function () { return this.each(function () { injector($(this), ' ', 'word', ' '); }); }, lines: function () { return this.each(function () { var r = "eefec303079ad17405c889e092e105b0"; // Because it's hard to split a <br/> tag consistently across browsers, // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash // (of the word "split"). If you're trying to use this plugin on that // md5 hash string, it will fail because you're being ridiculous. injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); }); } }; $.fn.lettering = function (method) { // Method calling logic if (method && methods[method]) { return methods[method].apply(this, [].slice.call(arguments, 1)); } else if (method === 'letters' || !method) { return methods.init.apply(this, [].slice.call(arguments, 0)); // always pass an array } $.error('Method ' + method + ' does not exist on jQuery.lettering'); return this; };
})(jQuery);
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build: https://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load */;
window.Modernizr = function (a, b, c) { function w(a) { j.cssText = a } function x(a, b) { return w(m.join(a + ";") + (b || "")) } function y(a, b) { return typeof a === b } function z(a, b) { return !!~ ("" + a).indexOf(b) } function A(a, b, d) { for (var e in a) { var f = b[a[e]]; if (f !== c) return d === !1 ? a[e] : y(f, "function") ? f.bind(d || b) : f } return !1 } var d = "2.6.2", e = {}, f = !0, g = b.documentElement, h = "modernizr", i = b.createElement(h), j = i.style, k, l = {}.toString, m = " -webkit- -moz- -o- -ms- ".split(" "), n = {}, o = {}, p = {}, q = [], r = q.slice, s, t = function (a, c, d, e) { var f, i, j, k, l = b.createElement("div"), m = b.body, n = m || b.createElement("body"); if (parseInt(d, 10)) while (d--) j = b.createElement("div"), j.id = e ? e[d] : h + (d + 1), l.appendChild(j); return f = ["&#173;", '<style id="s', h, '">', a, "</style>"].join(""), l.id = h, (m ? l : n).innerHTML += f, n.appendChild(l), m || (n.style.background = "", n.style.overflow = "hidden", k = g.style.overflow, g.style.overflow = "hidden", g.appendChild(n)), i = c(l, a), m ? l.parentNode.removeChild(l) : (n.parentNode.removeChild(n), g.style.overflow = k), !! i }, u = {}.hasOwnProperty, v; !y(u, "undefined") && !y(u.call, "undefined") ? v = function (a, b) { return u.call(a, b) } : v = function (a, b) { return b in a && y(a.constructor.prototype[b], "undefined") }, Function.prototype.bind || (Function.prototype.bind = function (b) { var c = this; if (typeof c != "function") throw new TypeError; var d = r.call(arguments, 1), e = function () { if (this instanceof e) { var a = function () {}; a.prototype = c.prototype; var f = new a, g = c.apply(f, d.concat(r.call(arguments))); return Object(g) === g ? g : f } return c.apply(b, d.concat(r.call(arguments))) }; return e }), n.touch = function () { var c; return "ontouchstart" in a || a.DocumentTouch && b instanceof DocumentTouch ? c = !0 : t(["@media (", m.join("touch-enabled),("), h, ")", "{#modernizr{top:9px;position:absolute}}"].join(""), function (a) { c = a.offsetTop === 9 }), c }; for (var B in n) v(n, B) && (s = B.toLowerCase(), e[s] = n[B](), q.push((e[s] ? "" : "no-") + s)); return e.addTest = function (a, b) { if (typeof a == "object") for (var d in a) v(a, d) && e.addTest(d, a[d]); else { a = a.toLowerCase(); if (e[a] !== c) return e; b = typeof b == "function" ? b() : b, typeof f != "undefined" && f && (g.className += " " + (b ? "" : "no-") + a), e[a] = b } return e }, w(""), i = k = null, function (a, b) { function k(a, b) { var c = a.createElement("p"), d = a.getElementsByTagName("head")[0] || a.documentElement; return c.innerHTML = "x<style>" + b + "</style>", d.insertBefore(c.lastChild, d.firstChild) } function l() { var a = r.elements; return typeof a == "string" ? a.split(" ") : a } function m(a) { var b = i[a[g]]; return b || (b = {}, h++, a[g] = h, i[h] = b), b } function n(a, c, f) { c || (c = b); if (j) return c.createElement(a); f || (f = m(c)); var g; return f.cache[a] ? g = f.cache[a].cloneNode() : e.test(a) ? g = (f.cache[a] = f.createElem(a)).cloneNode() : g = f.createElem(a), g.canHaveChildren && !d.test(a) ? f.frag.appendChild(g) : g } function o(a, c) { a || (a = b); if (j) return a.createDocumentFragment(); c = c || m(a); var d = c.frag.cloneNode(), e = 0, f = l(), g = f.length; for (; e < g; e++) d.createElement(f[e]); return d } function p(a, b) { b.cache || (b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag()), a.createElement = function (c) { return r.shivMethods ? n(c, a, b) : b.createElem(c) }, a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + l().join().replace(/\w+/g, function (a) { return b.createElem(a), b.frag.createElement(a), 'c("' + a + '")' }) + ");return n}")(r, b.frag) } function q(a) { a || (a = b); var c = m(a); return r.shivCSS && !f && !c.hasCSS && (c.hasCSS = !! k(a, "article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")), j || p(a, c), a } var c = a.html5 || {}, d = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i, e = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i, f, g = "_html5shiv", h = 0, i = {}, j; (function () { try { var a = b.createElement("a"); a.innerHTML = "<xyz></xyz>", f = "hidden" in a, j = a.childNodes.length == 1 || function () { b.createElement("a"); var a = b.createDocumentFragment(); return typeof a.cloneNode == "undefined" || typeof a.createDocumentFragment == "undefined" || typeof a.createElement == "undefined" }() } catch (c) { f = !0, j = !0 } })(); var r = { elements: c.elements || "abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video", shivCSS: c.shivCSS !== !1, supportsUnknownElements: j, shivMethods: c.shivMethods !== !1, type: "default", shivDocument: q, createElement: n, createDocumentFragment: o }; a.html5 = r, q(b) }(this, b), e._version = d, e._prefixes = m, e.testStyles = t, g.className = g.className.replace(/(^|\s)no-js(\s|$)/, "$1$2") + (f ? " js " + q.join(" ") : ""), e
}(this, this.document),
function (a, b, c) { function d(a) { return "[object Function]" == o.call(a) } function e(a) { return "string" == typeof a } function f() {} function g(a) { return !a || "loaded" == a || "complete" == a || "uninitialized" == a } function h() { var a = p.shift(); q = 1, a ? a.t ? m(function () { ("c" == a.t ? B.injectCss : B.injectJs)(a.s, 0, a.a, a.x, a.e, 1) }, 0) : (a(), h()) : q = 0 } function i(a, c, d, e, f, i, j) { function k(b) { if (!o && g(l.readyState) && (u.r = o = 1, !q && h(), l.onload = l.onreadystatechange = null, b)) { "img" != a && m(function () { t.removeChild(l) }, 50); for (var d in y[c]) y[c].hasOwnProperty(d) && y[c][d].onload() } } var j = j || B.errorTimeout, l = b.createElement(a), o = 0, r = 0, u = { t: d, s: c, e: f, a: i, x: j }; 1 === y[c] && (r = 1, y[c] = []), "object" == a ? l.data = c : (l.src = c, l.type = a), l.width = l.height = "0", l.onerror = l.onload = l.onreadystatechange = function () { k.call(this, r) }, p.splice(e, 0, u), "img" != a && (r || 2 === y[c] ? (t.insertBefore(l, s ? null : n), m(k, j)) : y[c].push(l)) } function j(a, b, c, d, f) { return q = 0, b = b || "j", e(a) ? i("c" == b ? v : u, a, b, this.i++, c, d, f) : (p.splice(this.i++, 0, a), 1 == p.length && h()), this } function k() { var a = B; return a.loader = { load: j, i: 0 }, a } var l = b.documentElement, m = a.setTimeout, n = b.getElementsByTagName("script")[0], o = {}.toString, p = [], q = 0, r = "MozAppearance" in l.style, s = r && !! b.createRange().compareNode, t = s ? l : n.parentNode, l = a.opera && "[object Opera]" == o.call(a.opera), l = !! b.attachEvent && !l, u = r ? "object" : l ? "script" : "img", v = l ? "script" : u, w = Array.isArray || function (a) { return "[object Array]" == o.call(a) }, x = [], y = {}, z = { timeout: function (a, b) { return b.length && (a.timeout = b[0]), a } }, A, B; B = function (a) { function b(a) { var a = a.split("!"), b = x.length, c = a.pop(), d = a.length, c = { url: c, origUrl: c, prefixes: a }, e, f, g; for (f = 0; f < d; f++) g = a[f].split("="), (e = z[g.shift()]) && (c = e(c, g)); for (f = 0; f < b; f++) c = x[f](c); return c } function g(a, e, f, g, h) { var i = b(a), j = i.autoCallback; i.url.split(".").pop().split("?").shift(), i.bypass || (e && (e = d(e) ? e : e[a] || e[g] || e[a.split("/").pop().split("?")[0]]), i.instead ? i.instead(a, e, f, g, h) : (y[i.url] ? i.noexec = !0 : y[i.url] = 1, f.load(i.url, i.forceCSS || !i.forceJS && "css" == i.url.split(".").pop().split("?").shift() ? "c" : c, i.noexec, i.attrs, i.timeout), (d(e) || d(j)) && f.load(function () { k(), e && e(i.origUrl, h, g), j && j(i.origUrl, h, g), y[i.url] = 2 }))) } function h(a, b) { function c(a, c) { if (a) { if (e(a)) c || (j = function () { var a = [].slice.call(arguments); k.apply(this, a), l() }), g(a, j, b, 0, h); else if (Object(a) === a) for (n in m = function () { var b = 0, c; for (c in a) a.hasOwnProperty(c) && b++; return b }(), a) a.hasOwnProperty(n) && (!c && !--m && (d(j) ? j = function () { var a = [].slice.call(arguments); k.apply(this, a), l() } : j[n] = function (a) { return function () { var b = [].slice.call(arguments); a && a.apply(this, b), l() } }(k[n])), g(a[n], j, b, n, h)) } else !c && l() } var h = !! a.test, i = a.load || a.both, j = a.callback || f, k = j, l = a.complete || f, m, n; c(h ? a.yep : a.nope, !! i), i && c(i) } var i, j, l = this.yepnope.loader; if (e(a)) g(a, 0, l, 0); else if (w(a)) for (i = 0; i < a.length; i++) j = a[i], e(j) ? g(j, 0, l, 0) : w(j) ? B(j) : Object(j) === j && h(j, l); else Object(a) === a && h(a, l) }, B.addPrefix = function (a, b) { z[a] = b }, B.addFilter = function (a) { x.push(a) }, B.errorTimeout = 1e4, null == b.readyState && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", A = function () { b.removeEventListener("DOMContentLoaded", A, 0), b.readyState = "complete" }, 0)), a.yepnope = k(), a.yepnope.executeStack = h, a.yepnope.injectJs = function (a, c, d, e, i, j) { var k = b.createElement("script"), l, o, e = e || B.errorTimeout; k.src = a; for (o in d) k.setAttribute(o, d[o]); c = j ? h : c || f, k.onreadystatechange = k.onload = function () { !l && g(k.readyState) && (l = 1, c(), k.onload = k.onreadystatechange = null) }, m(function () { l || (l = 1, c(1)) }, e), i ? k.onload() : n.parentNode.insertBefore(k, n) }, a.yepnope.injectCss = function (a, c, d, e, g, i) { var e = b.createElement("link"), j, c = i ? h : c || f; e.href = a, e.rel = "stylesheet", e.type = "text/css"; for (j in d) e.setAttribute(j, d[j]); g || (n.parentNode.insertBefore(e, n), m(c, 0)) }
}(this, document), Modernizr.load = function () { yepnope.apply(window, [].slice.call(arguments, 0))
};
CSS3 & jQuery Text Intro - Script Codes
CSS3 & jQuery Text Intro - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 4
Size 7,789 Kb
Views 18,216
Do you need developer help for CSS3 & jQuery Text Intro?

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!

Nick Mkrtchyan (Sonick) Script Codes
Name
Canvas Hover Effect
Simple Text spining
3D Gallery
Canvas Background Effect 3
Mozilla DevDerby
Canvas Green Particles
CSS3 Text Animation Effect 2
JQuery Gallery Simple 3D Effect
Slider
CSS2 Spotlight
Create amazing love letters 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!