Jump to content

TEXT FADE IN FADE OUT SCRIPT


mindapolis

Recommended Posts

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.