Text Fade Out

Developer
Joanne Whelan
Size
2,611 Kb
Views
8,096
  1. Text Fade Out Previews
  2. Text Fade Out HTML Codes
  3. Text Fade Out CSS Codes
  4. Text Fade Out JS Codes

How do I make an text fade out?

What is a text fade out? How do you make a text fade out? This script and codes were developed by Joanne Whelan on 16 January 2023, Monday.

Text Fade Out Previews
IQ Test

Text Fade Out - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Fade Out</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="article"> <p>A DJ plays records in sequence, by cueing them up in turn and mixing them in and out. A surprisingly common misconception is that DJ’s create the music they play whilst on the go – in reality that happens at great length in a studio somewhere with a raft of instruments, synthesisers, samples and other technical equipment. Some DJ’s do play ‘live’ – much like a rock band does – but this requires a totally different setup, and is fundamentally different to DJing.</p> <p class="read-more"><a href="#" class="button">Read More</a></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Text Fade Out - Script Codes CSS Codes

* { font-family: century gothic;
}
.article { background-color: lightgrey; padding: 50px; width: 200px; margin: 20px;
}
.article { max-height: 120px; position: relative; overflow: hidden;
}
.article .read-more { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; margin: 0; padding: 30px 0; background-image: linear-gradient(to bottom, transparent, black);
}
.button {	box-shadow:inset 0px 1px 0px 0px #efdcfb;	background:linear-gradient(to bottom, #dfbdfa 5%, #bc80ea 100%);	background-color:#dfbdfa;	border-radius:6px;	border:1px solid #c584f3;	display:inline-block;	cursor:pointer;	color:#ffffff;	font-family:century gothic;	font-size:15px;	font-weight:bold;	padding:6px 24px;	text-decoration:none;	text-shadow:0px 1px 0px #9752cc;
}
.button:hover {	background-color:#bc80ea;
}
.button:active {	position:relative;	top:1px;
}

Text Fade Out - Script Codes JS Codes

var $el, $ps, $up, totalHeight;
$('.article .button').click(function() { totalHeight = 0 $el = $(this); $p = $el.parent(); $up = $p.parent(); $ps = $up.find("p:not('.read-more')"); // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph) $ps.each(function() { totalHeight += $(this).outerHeight(); }); $up .css({ // Set height to prevent instant jumpdown when max height is removed "height": $up.height(), "max-height": 9999 }) .animate({ "height": totalHeight }); // fade out read-more $p.fadeOut(); // prevent jump-down return false;
});
Text Fade Out - Script Codes
Text Fade Out - Script Codes
Home Page Home
Developer Joanne Whelan
Username jooonebug
Uploaded January 16, 2023
Rating 3
Size 2,611 Kb
Views 8,096
Do you need developer help for Text Fade Out?

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!

Joanne Whelan (jooonebug) Script Codes
Name
Class Selector
Simple Layout
Responsive Basic Layout with Flexbox
Wishlist
Image link
Pseudo Selectors
Font Awesome Examples
Border Effects
Figure
Decendant Selector
Create amazing sales emails 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!