CSS/jQuery- Fading out text inside a div and moving the effect as the text scrolls down Webner Blogs - eLearning, Salesforce, Web Development & More

Requirement:- Sometimes we come across the requirement to fade out the text displayed on a webpage horizontally and want the DIV containing text scrollable.

For Example:
blog27
The requirement usually comes when there is a large amount of text on the webpage and you want to let the user know that the webpage is of significant length (like licence terms). To achieve this, following is a sample HTML and CSS code:

HTML Code:

<body>
 <div id="containerForTerms">
 <div id="faderForTerms">&nbsp;</div>

 <h2>What is Lorem Ipsum?</h2>
 <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. ….text…...</p>
 </div>
 <div>
 <h2>Why do we use it?</h2>
 <p> ….lot more text here…...</p>
 </div><br>
 <div>
 <h2>Where does it come from?</h2>
 <p>….lot more text here…...</p>
 </div>
 <div>
 <h2>Where can I get some?</h2>
 <p>….lot more text here…...</p>

 </div>
</body>

CSS:

#
containerForTerms {
 width: 100 % ;
 height: 770 px;
 overflow: hidden;
 position: relative;
 overflow - y: auto;
 margin - bottom: 50 px;
}#
faderForTerms {
 height: 400 px;
 background - color: red;
 position: absolute;
 width: 100 % ;
 margin - top: 50 % ;
 /*set background for faded div i.e. background color with lighter to darkest shade for different browsers. The background can be generated using various online tools. We would use base64 encoding for background image to convert arbitrary binary data to ASCII character format so that browser doesn’t require HTTP request for each image.*/
 background: url(data: image / svg + xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc + );
 background: -moz - linear - gradient(top, rgba(255, 255, 255, 0) 0 % , rgba(255, 255, 255, 1) 100 % ); /*FF3.6+*/
 background: -webkit - gradient(linear, left top, left bottom, color - stop(0 % , rgba(255, 255, 255, 0)), color - stop(100 % , rgba(255, 255, 255, 1))); /*Chrome,Safari4+*/
 background: -webkit - linear - gradient(top, rgba(255, 255, 255, 0) 0 % , rgba(255, 255, 255, 1) 100 % ); /*Chrome10+,Safari5.1+*/
 background: -o - linear - gradient(top, rgba(255, 255, 255, 0) 0 % , rgba(255, 255, 255, 1) 100 % ); /*Opera 11.10+*/
 background: -ms - linear - gradient(top, rgba(255, 255, 255, 0) 0 % , rgba(255, 255, 255, 1) 100 % ); /*IE10+*/
 background: linear - gradient(to bottom, rgba(255, 255, 255, 0) 0 % , rgba(255, 255, 255, 1) 100 % ); /*W3C*/
 filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#00ffffff', endColorstr = '#ffffff', GradientType = 0); /*IE6-8*/
}

jQuery script:

$('#containerForTerms').scroll(function() {
 /* scrollTop() method will return the vertical scrollbar position for current element and the returned value will be set as top value for faderForTerms element. */
 $('#faderForTerms').css('top', $(this).scrollTop());
});

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com

Related posts:

Leave a Reply Cancel reply