Fading text using Bootstrap


Bootstrap is the simplest way to built different styles and workings of a website using simple classes. Here I created fade in and fade out texts using the bootstrap with a class item and coursel. By declaring these classes and applying bootstrap to the website creates a fading texts as below.


Live Preview:

 




Here you can see the fading text inside the box. Now i think that you get a proper understanding about the fading text and the bootstrap. In a similar way you can also create fading images or multiple images for your website. I created the image coursel in the code section of my website....


Here below I put the code of the fading text so you can copy that snippet and paste or edit as in your own way for your html webpage. Here CSS is also a major factor of the of fading text.


Code: 

<html>
<head>
<title> code by cspsyco</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 &nbsp;<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<style>



.carousel.carousel-fade .item {

 -webkit-transition: opacity 0.5s ease-in-out;

 -moz-transition: opacity 0.5s ease-in-out;

 -ms-transition: opacity 0.5s ease-in-out;

 -o-transition: opacity 0.5s ease-in-out;

 transition: opacity 0.5s ease-in-out;

 opacity:0;

text-align:center;



}



.carousel.carousel-fade .active.item

 {

 opacity:1;





}



h2

{

padding:2%;

}

.box

{

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtA7MKPGy4YcOOFHpLFQTViagL2ZnPH-_FcN61yIKLGeUihhTipgsjKjhk9knDhRz6scyNb6DMpBgFJcRttJ6YtMpkCPncgK3djC-ZhvKb6b-9wXpVqy8DZkmVuXbj8uNEz5I6J-5PGIE/s640/3352586-white-backgrounds.jpg");

height:150px;

border:1px solid black;

width:100%;

box-shadow:5px 5px lightgrey;

background-size:100%;

background-repeat: no-repeat;

}



.item

{

position: absolute;



}



</style>
</head>
<body>
<br />

<div class="box"><br>

<div class="row container">

<div class="col-md-8">

<div class="carousel slide carousel-fade" data-interval="3000" data-ride="carousel" id="carousel-example-generic">

<div align="center" class="carousel-inner">

<div align="center" class="item active" style="width: 100%;">

<h2 align="center">

C S Psyco: A classic Website</h2>

</div>

<div class="item" style="width: 100%;">

<h2>

The largest network of programming languages</h2>

</div>

<div align="center" class="item" style="width: 100%;">

<h2>

20k+ Viewers</h2>

</div>

</div>

</div>

</div>

</div>

</div>
</body>


</html>









Thank You and Stay Updated...






























Comments















Post a Comment






























Popular posts from this blog









Node.js Cheat Sheet














Image







To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterval ( interval );      console . log ( "stopped" ); }, 6000 ); The above function will work continously untill 








Read more










Codeigniter ! Simple But Powerful














Image







  CodeIgniter  is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications.         It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .    Note : Don't touch the forder named system because it is the soul of the codeigniter              Next ⇒   








Read more










Introducing Cloudflare Pages ⚡














Image







https://github.com/Jinoy-Varghese/Jain-Lab After a long time cloudflare introduce new feature ' cloudflare pages ' allowing jamstack developers to host their website as free in cloudflare page. This new feature allow developers to use unlimited bandwidth and unlimited websites as a free user.  You can host your repo directly to cloudflare servers using github.Websites are built through collaboration between designers, engineers, writers, and more. Cloudflare Pages makes it effortless to satisfy each group, so you can iterate quickly, and save time on coordination. You don't need to worry about the ssl certificate, since cloudflare provides ssl free certificate too.  Note:  This pages are only for front end developers, it didn't have a database and did not support php.








Read more