افکت تیتر یا عنوان مطلب

افزونه ها و كدهاي جاوا
موضوع جدید ارسال پست
آواتار کاربر
black_Sky
مدير كل سایت
مدير كل سایت
پست: 95
تاریخ عضویت: دوشنبه ۱۲ تیر ۱۳۹۱, ۸:۳۲ ق.ظ
محل اقامت: TeHran
Has thanked: 28 times
Been thanked: 46 times
تماس:

افکت تیتر یا عنوان مطلب

پست توسط black_Sky »

این کد یه افکت جالب در تیتر مورد نظر شما ایجاد می کند این کد قابل اجرا در تمامی مرورگرها است
برای اجرای کد طبق مراحل زیر پیش می رویم

1. ابتدا کد مورد نظر را به بخش body قالب خود اضافه کنید
2. برای تغییر متن ها خاصیت text را بیابید و متن های درون تمامی آن ها را تغییر دهید به عنوان مثال متن زیر را تغییر دهید
Welcome to our letter magnet
3. برای تغییر رنگ متن ها textsplashcolors را پیدا کرده و رنگ درون آنها را تغییر دهید
به عنوان مثال رنگ red را به green تغییر دهید
4. var textfontsize اندازه متن


کد: انتخاب همه

<script>
// CREDITS:
// Letter Magnet
// By Peter Gehrig
// Copyright (c) 2011 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

// CONFIGURATION:
// Go to http://www.fabulant.com
// and create your own text animation
// with our new Text Factory.

var text=new Array()
var textsplashcolors=new Array()

///////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////

// Your messages. Add as many message as you like
text[0]="Welcome to our letter magnet."
text[1]="Impress your visitors!"
text[2]="Add some fun to your messages."
text[3]="Install this text script."
text[4]="No programming skills are required."

// The colors of the letters. Add as many colors as you like
textsplashcolors[0]="red"
textsplashcolors[1]="#0F0273"
textsplashcolors[2]="#0F0273"
textsplashcolors[3]="#0F0273"
textsplashcolors[4]="#0F0273"

// the font
var textfont="Arial"

// the font-size (pt)
var textfontsize=12

// the pause between the messages (seconds)
var textpause=3

// width of ticker, pixels
var ticker_width=420

// height of ticker, pixels
var ticker_height=40

// height of the spreading zone
var spread_height=15

// weight. Set this value to normal or bold
var textweight="bold"

// style. Set this value to normal or italic
var textitalic="normal"

///////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////

// Do not edit below this line
var textalignabsolute="topcenter"
var letterwidth=new Array()
var messagewidth=0
var messageheight=0
var i_colors=0
var timer
var i_text=0
var textsplitted
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var startposmax_x=0
var startposmax_y=0
textpause*=1000
var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0

for (i=0;i<=text.length-1;i++) {
	if (text[I].length>=maxtextlength) {maxtextlength=text[I].length}
}
for (i=0;i<=text.length-1;i++) {
	text[I]=text[I]+" "
}

var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
	xpos[I]=-5000
}

var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
	ypos[I]=-5000
}

function randomizer(range) {
	return Math.floor(range*Math.random())
}

function getpagesize() {
	if (ie) {
		windowheight=parseInt(document.body.clientHeight)
		windowwidth=parseInt(document.body.clientWidth)
	}
	if (ns6) {
		windowheight=parseInt(window.innerHeight)
		windowwidth=parseInt(window.innerWidth)
	}
	startposmax_x=ticker_width
	startposmax_y=spread_height*ticker_height

	changecontent()
}

function changecontent() {
	messagewidth=0
	var textsa=text[i_text]
	textsplitted=textsa.split("")

	for (i=0;i<=textsplitted.length-1;i++) {
		var thisspan=eval("document.getElementById('span"+i+"')")
	    thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+"pt;font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+"'>"+textsplitted[I]+"</span>"
		i_colors++
		if (i_colors>textsplashcolors.length-1) {i_colors=0}
		letterwidth[I]=Math.round(parseInt(thisspan.offsetWidth)*1.2)
		if (letterwidth[I]==0) {letterwidth[I]=textfontsize}
		messagewidth+=letterwidth[I]
		messageheight=Math.round(document.getElementById('span0').offsetHeight)
	}
	i_text++
	if (i_text>=text.length) {i_text=0}
	getfinalpos()
}

function getfinalpos() {
	var padding_x=0
	var padding_y=0
	x_finalpos[0]=0
	y_finalpos=0

	for (i=1;i<textsplitted.length-1;i++) {
		x_finalpos[I]=x_finalpos[i-1]+letterwidth[i-1]
	}
	gotostartpos()
}

function gotostartpos() {
	for (i=0;i<textsplitted.length-1;i++) {
		var thisspan=eval("document.getElementById('span'+i).style")
		thisspan.left=randomizer(startposmax_x)+"px"
		thisspan.top=randomizer(startposmax_y)+"px"
	}
	gotostandstillpos()
}

function gotostandstillpos() {
	if (i_loop<=max_loop-1) {
		for (i=0;i<textsplitted.length-1;i++) {
			var thisspan=eval("document.getElementById('span"+i+"').style")
			x_step[I]=(x_finalpos[I]-parseInt(thisspan.left))/(max_loop-i_loop)
			y_step[I]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)
			thisspan.left=(parseInt(thisspan.left)+x_step[I])+"px"
			thisspan.top=(parseInt(thisspan.top)+y_step[I])+"px"
		}
		i_loop++
		var timer=setTimeout("gotostandstillpos()",20)
	}
	else {
		i_loop=0
		clearTimeout(timer)
		timer=setTimeout("gotoendpos()",textpause)
	}
}

function gotoendpos() {
	if (i_loop<=textsplitted.length-1) {
		var thisspan=eval("document.getElementById('span"+i_loop+"').style")
		thisspan.left=-1000+"px"
		i_loop++
		var timer=setTimeout("gotoendpos()",10)
	}
	else {
		clearTimeout(timer)
		i_loop=0
		changecontent()
	}
}

document.write("<div id='roofmagnet' style='position:relative;width:"+ticker_width+"px;height:"+ticker_height+"px'>")
for (i=0;i<=maxtextlength;i++) {
    document.write("<span id='span"+eval(i)+"' style='position:absolute;'>")
    document.write("</span>")
}
document.write("</div>")
window.onload=getpagesize
</script>
[/I][/I][/I][/I][/I][/I][/I][/I][/I][/I][/I][/I][/I][/I][/I][/I][/I]


Moloud27
كاربر تازه وارد
كاربر تازه وارد
پست: 5
تاریخ عضویت: دوشنبه ۱۱ فروردین ۱۳۹۳, ۲:۱۲ ب.ظ
تماس:

Re: افکت تیتر یا عنوان مطلب

پست توسط Moloud27 »

ببخشید . این کد رو باید کجای کد (قالب سینما یک ) قرار داد که متن ها زیر اسلایدر نمایش داده بشن ؟ تصویر
http://tallanemations.mihanblog.com/

از تشکیل این تالار گفت و گو از شما ممنونم . تصویر تصویر


آواتار کاربر
black_Sky
مدير كل سایت
مدير كل سایت
پست: 95
تاریخ عضویت: دوشنبه ۱۲ تیر ۱۳۹۱, ۸:۳۲ ق.ظ
محل اقامت: TeHran
Has thanked: 28 times
Been thanked: 46 times
تماس:

Re: افکت تیتر یا عنوان مطلب

پست توسط black_Sky »

توضیحات کامل داده شده خط بالا کدها بخوانید
موضوع جدید ارسال پست