And just like that...

Developer
Nick Williams
Size
4,503 Kb
Views
30,360
  1. And just like that... Previews
  2. And just like that... HTML Codes
  3. And just like that... CSS Codes
  4. And just like that... JS Codes

How do I make an and just like that...?

Playing about with some effects to make some text disappear in a puff of smoke. Like the Flickr signup page. What is a and just like that...? How do you make a and just like that...? This script and codes were developed by Nick Williams on 27 August 2022, Saturday.

And just like that... Previews
IQ Test

And just like that... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>And just like that...</title> <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! */ body { font-family: Georgia, serif; background-color: #3C454E; color: #fff; font-size: 100%;
}
@media (min-width: 30em) { body { font-size: 120%; }
}
@media (min-width: 40em) { body { font-size: 140%; }
}
@media (min-width: 50em) { body { font-size: 160%; }
}
@media (min-width: 60em) { body { font-size: 180%; }
}
@media (min-width: 70em) { body { font-size: 200%; }
}
.container { margin: 0 auto; max-width: 20em;
}
.menu { list-style: none; padding: 0; margin: 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.menu__item { cursor: pointer; color: rgba(255, 255, 255, 0.5); font-size: 0.8em; display: inline-block; padding: 1.5em 1em; transition: color 0.1s ease-in;
}
.menu__item:hover { color: #fff;
}
.menu__item--active { color: #fff;
}
.quote { font-size: 2em; text-align: center; color: rgba(255, 255, 255, 0.5);
}
.target { font-weight: 900; transition-duration: 0.15s; transition-timing-function: ease-in; color: #fff; transform: translateZ(0);
}
.shadow { text-shadow: 0 0 0 #ffffff; color: transparent; transition-property: text-shadow;
}
.shadow:hover { text-shadow: 0 0 100px rgba(255, 255, 255, 0), 0 0;
}
.scale { transition-property: transform, opacity; transition-duration: 0.1s; display: inline-block;
}
.scale:hover { transform: scale(1.5); opacity: 0;
}
.filter { display: inline-block; transition-property: -webkit-filter;
}
.filter:hover { -webkit-filter: blur(10px) opacity(0);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <blockquote> <p class="quote">And just like that, he was <span data-effects="shadow,scale,filter" class="target scale">gone</span></p> </blockquote>
</div> <script src="js/index.js"></script>
</body>
</html>

And just like that... - Script Codes CSS Codes

body { font-family: Georgia, serif; background-color: #3C454E; color: #fff; font-size: 100%;
}
@media (min-width: 30em) { body { font-size: 120%; }
}
@media (min-width: 40em) { body { font-size: 140%; }
}
@media (min-width: 50em) { body { font-size: 160%; }
}
@media (min-width: 60em) { body { font-size: 180%; }
}
@media (min-width: 70em) { body { font-size: 200%; }
}
.container { margin: 0 auto; max-width: 20em;
}
.menu { list-style: none; padding: 0; margin: 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.menu__item { cursor: pointer; color: rgba(255, 255, 255, 0.5); font-size: 0.8em; display: inline-block; padding: 1.5em 1em; transition: color 0.1s ease-in;
}
.menu__item:hover { color: #fff;
}
.menu__item--active { color: #fff;
}
.quote { font-size: 2em; text-align: center; color: rgba(255, 255, 255, 0.5);
}
.target { font-weight: 900; transition-duration: 0.15s; transition-timing-function: ease-in; color: #fff; transform: translateZ(0);
}
.shadow { text-shadow: 0 0 0 #ffffff; color: transparent; transition-property: text-shadow;
}
.shadow:hover { text-shadow: 0 0 100px rgba(255, 255, 255, 0), 0 0;
}
.scale { transition-property: transform, opacity; transition-duration: 0.1s; display: inline-block;
}
.scale:hover { transform: scale(1.5); opacity: 0;
}
.filter { display: inline-block; transition-property: -webkit-filter;
}
.filter:hover { -webkit-filter: blur(10px) opacity(0);
}

And just like that... - Script Codes JS Codes

(function(global) {	var utils, $;	function WrappedNode (element) {	this.elem = element;	}	WrappedNode.prototype = {	constructor : WrappedNode,	addClass : function(classes) {	if(!utils.isArray(classes)) {	classes = [classes];	}	this.elem.classList.add.apply(this.elem.classList, classes);	return this;	},	removeClass : function(classes) {	if(!utils.isArray(classes)) {	classes = [classes];	}	this.elem.classList.remove.apply(this.elem.classList, classes);	return this;	},	hasClass : function(className) {	return this.elem.classList.contains(className);	},	attr : function(name, value) {	if(!value) {	return this.elem.getAttribute(name);	}	this.elem.setAttribute(name, value);	return this;	},	text : function(value) {	if(!value) {	return this.elem.textContent;	}	this.elem.textContent = value;	return this;	},	append : function(elem) {	this.elem.appendChild(elem.elem);	return this;	},	appendTo : function(to) {	to.append(this);	return this;	},	on : function(event, callback) {	this.elem.addEventListener(event, callback);	return this;	}	};	utils = {	isArray : function(target) {	return Object.prototype.toString.apply(target) === '[object Array]';	},	find : function(haystack, needle, context) {	var i = 0, length = haystack.length, item;	for(; i < length; i++) {	item = haystack[i];	if(needle.call(context, item)) {	return item;	}	}	}	};	$ = {	utils : utils,	wrap : function(element) {	return new WrappedNode(element);	},	create : function(tag) {	return this.wrap(document.createElement(tag));	},	fragment : function() {	return this.wrap(document.createDocumentFragment());	},	select : function(selector, context) {	context = context || document;	var elements = context.querySelectorAll(selector);	var list =[];	for (var i = elements.length - 1; i >= 0; i--) {	list.push(this.wrap(elements[i]));	}	return list;	}	};	global.$ = $;
}(this));
(function ($) {	var menuItem = "menu__item",	menuItemActive = "menu__item--active",	target, effects, initialEffect, menu, options;	target = $.select(".target")[0];	effects = target.attr("data-effects").split(",");	options = $.fragment();	menu = $.create("ul").addClass("menu");	initialEffect = $.utils.find(effects, function(x) { return target.hasClass(x); });	effects.forEach(function(effect) {	var option = $.create("li").addClass(menuItem).text(effect);	if(effect === initialEffect) {	option.addClass(menuItemActive);	}	option.appendTo(options);	});	menu.on("click", function(e) {	$.select("."+menuItem).forEach(function(elem) {	elem.removeClass(menuItemActive);	});	var option = $.wrap(e.target).addClass(menuItemActive);	target.removeClass(effects).addClass(option.text());	});	menu.append(options).appendTo($.select(".container")[0]);
}(this.$));
And just like that... - Script Codes
And just like that... - Script Codes
Home Page Home
Developer Nick Williams
Username WickyNilliams
Uploaded August 27, 2022
Rating 3
Size 4,503 Kb
Views 30,360
Do you need developer help for And just like that...?

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 Williams (WickyNilliams) Script Codes
Name
Bokeh
Conditional Lightbox for Responsive Design
Closure classic
Gridzzz
Got your callback
Particle particulars
Pointed
Headroom.js demo
Block, Element, Modifier in LESS
React starter template
Create amazing marketing copy 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!