TEXT FADE IN FADE OUT SCRIPT

mindapolis · October 5, 2015

Is there a script that fades text in and out?

Maq · October 5, 2015

Something like this (not mine)?

http://jsfiddle.net/jfriend00/n4mKw/

HTML5/CSS3 may have a better way to do this.

anthonygallina · October 5, 2015

Would css help any? https://daneden.github.io/animate.css/

mindapolis · October 6, 2015

if I try the css version, where exactexactly would the animate.min.css file be?

mindapolis · October 6, 2015

I tried the css version. It was easier to understand but it 's still not working. if someone could help me I would appreciate it.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	background-color: #99cc99;
	width: 320px;
	height: 200px;
	clear: both;
	border-radius: 35px;
}
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
li {
	list-style:none; 
}
#marketingPortfolio{
	float:right;
	width: 320px;
}
#websitePortfolio {
	float:left; 
	width:320px;
	margin-top:20px;
	clear:both;
}
.quotes
        {
            -webkit-transition: opacity 0.5s ease-in;
            -moz-transition: opacity 0.5s ease-in;
            -o-transition: opacity 0.5s ease-in;
        }
.quotes.fade-out {
	opacity:0;
}
.quotes.fade-in {
	opacity:1;
}
</style>

<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
    <script type="text/javascript">
        function fade(btnElement) {
            if (btnElement.value === "Fade Out") {
                document.getElementById("myImg").className = "fade-out";
                btnElement.value = "Fade In";
            }
            else {
                document.getElementById("myImg").className = "fade-in";
                btnElement.value = "Fade Out";
            }
        }
    </script>
</head>

<body>   
<header>

<img src="assets/logo.png" width="274" height="103" alt=""/><br />
<span id="catchPhrase">Meeting All Your Marketing Needs. . .</span>
<p> </p>
  <nav>
    <p> </p>
    <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p>
  </nav>
</header>
<section>  
Running a business, of any size, is rough, but it's especially rough for small  businesses.  as an owner of a small business, you wear so many hats!  You are the salesperson, the producer of the product, and sometime you have to do all the marketing work.  Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff?  Well, fortunately there is!  Media Services Unlimited is a full-service marketing company specifically geared towards small businesses.  We handle all the marketing tasks, so you can focus on producing high-quality products and your customers!  
</section>
<aside>
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
</aside>
<span id="websitePortfolio">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Website Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Website Design </li>
                <li>Content Management </li>
                <li>SEO</li>
            </ul>
		</div>
	</div>
</div>
</span>
<span id="marketingPortfolio">
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Marketing Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Marketing Material Creation  </li>
                <li>Social Media Management </li>
                <li>Creative Writing </li>
            </ul>
    	</div>
    </div>
 </div>
</span>
</body>
</html>

anthonygallina · October 7, 2015

This link maybe helpfull also.

http://www.telegraphicsinc.com/2013/07/how-to-use-animate-css/

It has some code on how to trigger the animations on click or hover.

mindapolis · October 7, 2015

I almost have it! I just can't figure out why the words front and back are above the boxes.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	background-color: #99cc99;
	width: 320px;
	height: 200px;
	clear: both;
	border-radius: 35px;
}
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
li {
	list-style:none; 
}
#marketingPortfolio{
	float:right;
	width: 320px;
}
#websitePortfolio {
	float:left; 
	width:320px;
	margin-top:20px;
	clear:both;
}
.quotes
        {
            -webkit-transition: opacity 0.5s ease-in;
            -moz-transition: opacity 0.5s ease-in;
            -o-transition: opacity 0.5s ease-in;
        }
.quotes.fade-out {
	opacity:0;
}
.quotes.fade-in {
	opacity:1;
}
</style>

<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
    <script type="text/javascript">
        function fade(btnElement) {
            if (btnElement.value === "Fade Out") {
                document.getElementById("myImg").className = "fade-out";
                btnElement.value = "Fade In";
            }
            else {
                document.getElementById("myImg").className = "fade-in";
                btnElement.value = "Fade Out";
            }
        }
    </script>
</head>

<body>   
<header>

<img src="assets/logo.png" width="274" height="103" alt=""/><br />
<span id="catchPhrase">Meeting All Your Marketing Needs. . .</span>
<p> </p>
  <nav>
    <p> </p>
    <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p>
  </nav>
</header>
<section>  
Running a business, of any size, is rough, but it's especially rough for small  businesses.  as an owner of a small business, you wear so many hats!  You are the salesperson, the producer of the product, and sometime you have to do all the marketing work.  Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff?  Well, fortunately there is!  Media Services Unlimited is a full-service marketing company specifically geared towards small businesses.  We handle all the marketing tasks, so you can focus on producing high-quality products and your customers!  
</section>
<aside>
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
</aside>
<span id="websitePortfolio">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Website Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Website Design </li>
                <li>Content Management </li>
                <li>SEO</li>
            </ul>
		</div>
	</div>
</div>
</span>
<span id="marketingPortfolio">
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Marketing Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Marketing Material Creation  </li>
                <li>Social Media Management </li>
                <li>Creative Writing </li>
            </ul>
    	</div>
    </div>
 </div>
</span>
</body>
</html>

mindapolis · October 7, 2015

I want marketing portfolio or website portfolio on the front the lists on the back.

<!DOCTYPE html>  
<html>
<head>
<style type="text/css">
.flip3D {
	width:240px;
	height:200px;
	float:left;
}
.flip3D > .front {
	position:absolute;
	transform:perspective(600px) rotateY( 0deg ); 
	background-color:pink;
	height:200px;
	width:200px;
	backface-visibility:hidden;
	transition: transform .5s linear 0s;
}
.flip > .back  {
	position:absolute;
	transform:perspective(600px) rotateY( 180deg ); 
	background-color:#823284;
	height:200px;
	width:100px;
	backface-visibility:hidden;
		transition: transform .5s linear 0s;
}

.flip3D:hover > .front {
	transform:perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back {
	transform:perspective( 600px ) rotateY( 0deg );
}
</style>
</head>
<body>
<div class ="flip3D">
	<div class ="back">
		Website Portfolio 
    </div> 
	<div class ="front">
		<ul>
            	<li>Website Design </li>
                <li>Content Management </li>
                <li>SEO</li>
            </ul>
    </div>    
</div>
<div class ="flip3D">
	<div class ="back">
		Marketing Portfolio 
    </div> 
	<div class ="front">
		<ul>
            	<li>Marketing Material Creation  </li>
                <li>Social Media Management </li>
                <li>Creative Writing </li>
                <li>Video Editing </li>
            </ul>
    </div>    
</div>
</body>
</html>

anthonygallina · October 7, 2015

Maybe there is a clue if you deminify the script that you are using for animation that comes from here http://www.linkbuildingservices4sites.com

You can use this to deminify if you want.

http://unminify.com/

mindapolis · October 8, 2015

I got it working in firefox but not in IE. Can I have some help please?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script>
<style type="text/css">
.flip3D {
	background-color: #99cc99;
	width:320px;
	height:200px;
	float:left;
	margin-right:10PX;
	border-radius:35px;
}
.flip3D > .front {
	position:absolute;
	-webkit-transform:perspective(600px) rotateY( 0deg ); 
	background-color: #99cc99;
	height:200px;
	width:320px;
	-webkit-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
	transition: transform .5s linear 0s; 
	transition: -webkit-transform .5s linear 0s;	
	transition: -MS-transform .5s linear 0s;	
	transition: -O-transform .5s linear 0s;		
	
}
.flip3D > .back  {
	position:absolute;
	-webkit-transform:perspective(600px) rotateY( 180deg ); 
	background-color: #99cc99;
	height:200px;
	width:320px;
	-webkit-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	transition: transform .5s linear 0s;
	transition: -webkit-transform .5s linear 0s;
	transition: -ms-transform .5s linear 0s;
	transition: -o-transform .5s linear 0s;
}

.flip3D:hover > .front { 
	-webkit-transform:perspective( 600px ) rotateY( -180deg );
	-ms-transform:perspective( 600px ) rotateY( -180deg );
	-o-transform:perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back {
	-webkit-transform:perspective( 600px ) rotateY( 0deg );
	-ms-transform:perspective( 600px ) rotateY( 0deg );
	-o-transform:perspective( 600px ) rotateY( 0deg );
}
li {
	list-style:none; 
}
#portfolio {
	clear:both;
}
.quotes
        {
            -webkit-transition: opacity 0.5s ease-in;
            -moz-transition: opacity 0.5s ease-in;
            -o-transition: opacity 0.5s ease-in;
        }
.quotes.fade-out {
	opacity:0;
}
.quotes.fade-in {
	opacity:1;
}
</style>

<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
    <script type="text/javascript">
        function fade(btnElement) {
            if (btnElement.value === "Fade Out") {
                document.getElementById("myImg").className = "fade-out";
                btnElement.value = "Fade In";
            }
            else {
                document.getElementById("myImg").className = "fade-in";
                btnElement.value = "Fade Out";
            }
        }
    </script>
</head>

<body>   
<header>

<img src="assets/logo.png" width="274" height="103" alt=""/><br />
<span id="catchPhrase">Meeting All Your Marketing Needs. . .</span>
<p> </p>
  <nav>
    <p> </p>
    <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p>
  </nav>
</header>
<section>  
Running a business, of any size, is rough, but it's especially rough for small  businesses.  as an owner of a small business, you wear so many hats!  You are the salesperson, the producer of the product, and sometime you have to do all the marketing work.  Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff?  Well, fortunately there is!  Media Services Unlimited is a full-service marketing company specifically geared towards small businesses.  We handle all the marketing tasks, so you can focus on producing high-quality products and your customers!  
</section>
<aside>
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
</aside>
<div id = "portfolio">
<div class ="flip3D">
	<div class ="front">
		Website Portfolio 
    </div> 
	<div class ="back">
		<ul>
            	<li>Website Design </li>
                <li>Content Management </li>
                <li>SEO</li>
            </ul>
    </div>    
</div>
<div class ="flip3D">
	<div class ="front">
		Marketing Portfolio 
    </div> 
	<div class ="back">
		<ul>
            	<li>Marketing Material Creation  </li>
                <li>Social Media Management </li>
                <li>Creative Writing </li>
                <li>Video Editing </li>
            </ul>
    </div>    
</div>
</div>
</body>
</html>

Sign In

TEXT FADE IN FADE OUT SCRIPT

Recommended Posts

mindapolis

Link to comment

Share on other sites

Maq

Link to comment

Share on other sites

anthonygallina

Link to comment

Share on other sites

mindapolis

Link to comment

Share on other sites

mindapolis

Link to comment

Share on other sites

anthonygallina

Link to comment

Share on other sites

mindapolis

Link to comment

Share on other sites

mindapolis

Link to comment

Share on other sites

anthonygallina

Link to comment

Share on other sites

mindapolis

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information