Test

From OfWindsor

(Difference between revisions)
Jump to: navigation, search
Line 4: Line 4:
<body>
<body>
-
<!-- BEGINNING OF THE CODE FOR THE STRETCH-TICKER -->
+
<!---------------------------------------------->
-
 
+
<!-- START OF CODE FOR IMAGE RING SCRIPT -->
-
<!----------------------------------------->
+
<!---------------------------------------------->
-
<!-- STYLE-CONFIGURATION STARTS HERE -->
+
-
<!----------------------------------------->
+
-
<style>
+
-
#stage  {
+
-
/* #stage should contain all style-attributes that remain unchanged during the animation */
+
-
/* Do not change the name of #stage!!! */
+
-
font-family:Arial;
+
-
font-size:14pt;
+
-
background:#ff0000;
+
-
width:400px;
+
-
text-align: center;
+
-
vertical-align:middle;
+
-
border: 2px solid #ffdddd;
+
-
overflow:hidden;
+
-
padding:5px;
+
-
cursor: pointer;
+
-
 
+
-
/* shadow for Firefox */
+
-
-moz-box-shadow: 5px 5px 5px #ffaaaa;
+
-
/* shadow for Chrome and Safari */
+
-
-webkit-box-shadow: 5px 5px 5px #ffaaaa;
+
-
/* shadow for Opera */
+
-
box-shadow: 5px 5px 5px #ffaaaa;
+
-
/* shadow for Internet Explorer */
+
-
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#ffaaaa');
+
-
+
-
/* rounded corners for Firefox */
+
-
-moz-border-radius-topleft: 15px;
+
-
-moz-border-radius-bottomright: 15px;
+
-
+
-
/* rounded corners for Chrome and Safari */
+
-
-webkit-border-top-left-radius: 15px;
+
-
-webkit-border-bottom-right-radius: 15px;
+
-
+
-
/* rounded corners for Opera */
+
-
border-top-left-radius: 15px;
+
-
border-bottom-right-radius: 15px;
+
-
}
+
-
 
+
-
/* Below are the classes describing the changes of style-attributes during the animation */
+
-
/* Each class acts like a frame in a movie */
+
-
/* You may add as many classes as you like */
+
-
/* You may name the classes as you like. In this samplae I named them a, b, c ... and so on */
+
-
/* In this sample I changed 2 attributes: the width between the letters and the color */
+
-
/* You may change other attributes. It's up to you! */
+
-
.a {
+
-
  color:#ff2222;
+
-
  letter-spacing:40px;
+
-
}
+
-
.b {
+
-
  color:#ff2222;
+
-
  letter-spacing:38px;
+
-
}
+
-
.c {
+
-
  color:#ff2222;
+
-
  letter-spacing:36px;
+
-
}
+
-
.d {
+
-
  color:#ff3333;
+
-
  letter-spacing:34px;
+
-
}
+
-
.e {
+
-
  color:#ff4444;
+
-
  letter-spacing:32px;
+
-
}
+
-
.f {
+
-
  color:#ff5555;
+
-
  letter-spacing:30px;
+
-
}
+
-
.g {
+
-
  color:#ff6666;
+
-
  letter-spacing:28px;
+
-
}
+
-
.h {
+
-
  color:#ff7777;
+
-
  letter-spacing:26px;
+
-
}
+
-
.i {
+
-
  color:#ff8888;
+
-
  letter-spacing:24px;
+
-
}
+
-
.k {
+
-
  color:#ff9999;
+
-
  letter-spacing:22px;
+
-
}
+
-
.l {
+
-
  color:#ffaaaa;
+
-
  letter-spacing:20px;
+
-
}
+
-
.m {
+
-
  color:#ffbbbb;
+
-
  letter-spacing:17px;
+
-
}
+
-
.n {
+
-
  color:#ffcccc;
+
-
  letter-spacing:14px;
+
-
}
+
-
.o {
+
-
  color:#ffdddd;
+
-
  letter-spacing:10px;
+
-
}
+
-
.p {
+
-
  color:#ffeeee;
+
-
  letter-spacing:5px;
+
-
}
+
-
.q {
+
-
  color:#ffffff;
+
-
  letter-spacing:0px;
+
-
}
+
-
</style>
+
-
<!----------------------------------------->
+
-
<!-- STYLE-CONFIGURATION ENDS HERE -->
+
-
<!----------------------------------------->
+
-
 
+
<script>
<script>
// CREDITS:
// CREDITS:
-
// CSS-controlled stretch ticker
+
// JavaScript carousel slideshow
-
// by Peter Gehrig
+
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Permission given to use the script provided that this notice remains as is.
-
// Additional scripts can be found at http://www.fabulant.com
+
// Additional scripts can be found at http://www.fabulant.com.
-
// 09/02/2010
+
 
 +
// MOVEMENT CREDITS:
 +
// The Movements of this script are based upon a Multi-Fx1 Script
 +
// by kurt.grigg@virgin.net
// IMPORTANT:  
// IMPORTANT:  
// If you add this script to a script-library or script-archive  
// If you add this script to a script-library or script-archive  
// you have to add a link to http://www.fabulant.com on the webpage  
// you have to add a link to http://www.fabulant.com on the webpage  
-
// where this script will be running.
 
-
// CONFIGURATION:
+
// Set the URLS of your images. Add as many images as you like
-
// Go to http://www.fabulant.com and get the original code
+
var myimage=new Array("flower.png","flowergreen.png","flowerorange.png","flower.png","flowergreen.png","flowerorange.png","flower.png","flowergreen.png","flowerorange.png")
-
// with step-by-step instructions and copy-and-paste installation.
+
-
/////////////////////////////////////////////////
+
// Set the width of your images. All images will be set to this width
-
// SCRIPT-CONFIGURATION STARTS HERE
+
var imgwidth=40
-
/////////////////////////////////////////////////
+
-
// The array 'classes_pull_together_animation' contains the 'frames' required for the pull-together-animation
+
// Set the maximal size of carousel (px)
-
// Enter the class-names. The order is up to you
+
var maxcarouselsize=240
-
// In this sample class 'a' will be played first, then class 'b', then class 'c' an so on
+
-
var classes_pull_together_animation=new Array("a","b","c","d","e","f","g","h","i","k","l","m","n","o","p","q")
+
-
// The array 'classes_stretch_animation' contains the 'frames' required for the stretch-animation
+
// Set the minimal size of carousel (px)
-
// Enter the class-names. The order is up to you
+
var mincarouselsize=1
-
// In this sample class 'q' will be played first, then class 'p', then class 'n' an so on
+
-
var classes_stretch_animation=new Array("q","p","n","m","l","k","i","h","g","f","f","e","e","d","c","b","a")
+
-
// Set the messages. You may add as many messages as you like
+
//Set the opacity od the images. values my range from 0 to 100
-
var message=new Array()
+
var imgopacity=70
-
message[0]="Hello Friends!"
+
-
message[1]="What's up today?"
+
-
message[2]="Ready to get it all?"
+
-
// Set a link for each message. You may add as many messages as you like
+
// Do not edit below this line
-
// If you don't want to add a link enter a "#" instead of the URL. See sample below
+
var divider=(36/(myimage.length+1))
-
var messagelink=new Array()
+
var step=0.1;
-
messagelink[0]="http://www.hotscripts.com"
+
var a_StEp=0.05;
-
messagelink[1]="#"
+
var RunTime=10;
-
messagelink[2]="http://www.hotscripts.com"
+
var currStep = 0;
 +
var x_coordinate = 0;
 +
var y_coordinate = 0;
 +
var cntr=2;
 +
var screenheight=document.body.clientHeight
 +
var screenwidth=document.body.clientWidth
-
// Set the speed of the animation from class to class (frame to frame). High values = slow speed
+
function fly(){
-
var speed=40
+
y_coordinate=document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/2.8*Math.cos((RunTime)/3)*Math.cos(RunTime/10);
 +
x_coordinate=document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4*Math.sin((RunTime)/5)*Math.sin(RunTime/10);
-
// Set the standstill-time of message (seconds)
+
RunTime+=a_StEp;
-
var pause=2
+
Tma=setTimeout("fly()", 15);
-
 
+
-
/////////////////////////////////////////////////
+
-
// SCRIPT-CONFIGURATION ENDS HERE
+
-
/////////////////////////////////////////////////
+
-
 
+
-
// do not edit below this line
+
-
var i_classnames=0
+
-
var i_message=0;
+
-
var i_messagelink=0;
+
-
var tmr
+
-
pause*=1000
+
-
 
+
-
var spc="\&"+"nbsp;"
+
-
 
+
-
for (i=0;i<message.length;i++) {
+
-
message[i]=message[i].replace(/[" "]/g,spc)
+
}
}
-
function setcontent() {
+
function cycle(){
-
i_messagelink=i_message
+
for (i=0;i<myimage.length;i++) {
-
if (i_message>=message.length) {
+
document.getElementById(i).style.top=y_coordinate+cntr*Math.cos(((currStep+1)+i*divider)/5)*Math.cos(currStep/6)+"px"
-
i_message=0
+
document.getElementById(i).style.left=x_coordinate+cntr*Math.sin(((currStep+1)+i*divider)/5)+"px";
-
}
+
if (parseInt(document.getElementById(i).style.left) > (document.body.scrollLeft+document.body.offsetWidth-(1.7*imgwidth)) || parseInt(document.getElementById(i).style.top) > (document.body.scrollTop+document.body.offsetHeight-(1.5*imgwidth))) {
-
if (i_messagelink>=message.length) {
+
document.getElementById(i).style.left=-2000+"px"
-
i_messagelink=0
+
document.getElementById(i).style.top=-2000+"px"
-
}
+
}
-
document.getElementById("stage").innerHTML=message[i_message]
+
}
-
i_message++
+
currStep+=step;
-
i_classnames=0
+
setTimeout("cycle()",5);
-
pull_together()
+
}
}
-
function pull_together() {
+
function minimize() {
-
if (i_classnames<=classes_pull_together_animation.length-1) {
+
cntr-=0.5;
-
document.getElementById("stage").className=classes_pull_together_animation[i_classnames]
+
goshrink=setTimeout('minimize()',10);
-
i_classnames++
+
if (cntr <=mincarouselsize) {
-
tmr=setTimeout("pull_together()",speed)
+
clearTimeout(goshrink);
-
}
+
swell()
-
else {
+
-
clearTimeout(tmr);
+
-
i_classnames=0
+
-
setTimeout("stretch()",pause)
+
}
}
}
}
-
function stretch() {
+
function swell() {
-
if (i_classnames<=classes_stretch_animation.length-1) {
+
cntr+=0.5;
-
document.getElementById("stage").className=classes_stretch_animation[i_classnames]
+
GoSwell=setTimeout('swell()',10);
-
i_classnames++
+
if (cntr >=maxcarouselsize) {
-
tmr=setTimeout("stretch()",speed)
+
clearTimeout(GoSwell);
-
}
+
minimize()
-
else {
+
-
clearTimeout(tmr);
+
-
i_classnames=0
+
-
setTimeout("setcontent()",500)
+
}
}
}
}
-
function gotourl() {
+
function init(){
-
document.location.href=messagelink[i_messagelink]
+
fly();
 +
cycle();
 +
minimize();
}
}
-
window.onload=setcontent
 
-
</script>
+
for (i=0;i<=myimage.length-1;i++) {
 +
document.write('<div id="'+i+'" style="position:absolute;top:-5000px;left:0px;filter:alpha(opacity='+imgopacity+');opacity:'+(imgopacity/100)+';"><img src="'+myimage[i]+'" width='+imgwidth+'></div>')
 +
}
-
<div id="stage" onclick="gotourl()"></div>
+
window.onload=init;
 +
 
 +
</script>
-
<!-- END OF THE CODE FOR THE STRETCH-TICKER -->
+
<!---------------------------------------------->
 +
<!-- END OF CODE FOR IMAGE RING SCRIPT -->
 +
<!---------------------------------------------->
</body>
</body>
</html>
</html>

Revision as of 03:54, 2 February 2013

Personal tools
Project URLs