Как се постига този ефект

K

kWo_2

Registered
Погледнете тук този паяк, който "обхожда" по сайта.
Как се правят тези номера :)
 
Това е флаш клипче, което е сложено с дължина и височина 100%. Ето това е клипчето, а това е кода за него:
Код: 
<div id="spider" class="flash-replaced"><embed width="100%" height="100%" wmode="transparent" type="application/x-shockwave-flash" src="images/flash/abaspider.swf" pluginspage="http://www.adobe.com/go/getflashplayer" flashvars=""/></div>
 
Но как става така, че като кликна на него си излиза contextmenu-то а не излиза този прозорец, че е флаш :lol:
 
kWo_2 каза:
Но как става така, че като кликна на него си излиза contextmenu-то а не излиза този прозорец, че е флаш :lol:
Увеличете...

Докато не е на текста(,защото там се брои като невидим...) ?

spider.png


Иначе ,ако неможеш да го дръпнеш..Направо ползва от техния сайт:

Код: 
<div id="spider" class="flash-replaced"><embed width="100%" height="93%" wmode="transparent" 
type="application/x-shockwave-flash" src="http://aba.bg/webdesign/images/flash/abaspider.swf" 
pluginspage="http://www.adobe.com/go/getflashplayer" flashvars=""/></div>
 
Да, но проблема е че там мога да селектирам текста до като този паяк се движи в/у него, а при мен цялата страница е с flash .. тоест като дам десен бутон и не е както там и не мога да кликам никъде
 
Да наистина много интересно са го направили за първи път виждам подобно нещо, разгледах сорса и не видях никъде да са ембеднали флаша няма сфв обджект няма нищо. Някой ако има идея как е направено моля да сподели :)
 
Ами просто са си поиграли хората с z-index

Вижте див-а, на който е паяка- z-index: 4,
а примерно див-а на футъра е с z-index: 1000

Оттук можете да се досетите, че сайта е направен на няколко пласта като най-долния е паяка, а върху него са дивовете с текста (затова ти излиза и контекстно меню, а не това за флаша)
 
taxi го е написал:

<div id="spider" class="flash-replaced"><embed width="100%" height="93%" wmode="transparent"
type="application/x-shockwave-flash" src="http://aba.bg/webdesign/images/flash/abaspider.swf"
pluginspage="http://www.adobe.com/go/getflashplayer" flashvars=""/></div>


Този код се намира най-отдолу на страницата- след футъра
Ако не можеш да го видиш през View Source значи се зарежда с някакъв javascript (не е задължително да е SWFObject. Може и с някоя от библиотеките напр. jQuery)за да се валидира старницата
 
d3xter каза:
taxi го е написал:

<div id="spider" class="flash-replaced"><embed width="100%" height="93%" wmode="transparent"
type="application/x-shockwave-flash" src="http://aba.bg/webdesign/images/flash/abaspider.swf"
pluginspage="http://www.adobe.com/go/getflashplayer" flashvars=""/></div>


Този код се намира най-отдолу на страницата- след футъра
Ако не можеш да го видиш през View Source значи се зарежда с някакъв javascript (не е задължително да е SWFObject. Може и с някоя от библиотеките напр. jQuery)за да се валидира старницата
Увеличете...

Само да добавя ,че го напрвих height="93%" ,защото го пробвах на една страница дето бях сложил само 1 нещо ,и се стремях да махна скрола...Иначе вие можете да си го сложите 100% и паячето ще стане по-голямо. :arrow:
 
Аха, ясно! marian :?:
и на останалите..


btw с firebug ли видяхте кода, защото в source го нямаше
 
d3xter каза:
Ами просто са си поиграли хората с z-index

Вижте див-а, на който е паяка- z-index: 4,
а примерно див-а на футъра е с z-index: 1000

Оттук можете да се досетите, че сайта е направен на няколко пласта като най-долния е паяка, а върху него са дивовете с текста (затова ти излиза и контекстно меню, а не това за флаша)
Увеличете...

Да... (style/aba.min.css)
#spider{background-color:transparent;height:100%;position:fixed;left:0;top:0;margin:0;padding:0;width:100%;z-index:4}
Увеличете...

kWo_2 каза:
Аха, ясно! marian :?:
и на останалите..

btw с firebug ли видяхте кода, защото в source го нямаше
Увеличете...

Ами... (javascript/aba.init.min.js)
;var mysrc='images/flash/abaspider.swf';$("body").append('<div id="spider"></div>');$('#spider').flash({src:mysrc,width:'100%',height:'100%',wmode:'transparent'}
Увеличете...

п.с. Това не са целит кодове ,а ако ги искате проветете файловете. :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе