Evet arkadaşlar butarz bulut efektini belki sizlerde kendi sitenizde uygulamayı istersiniz diye düşündüm güzel bit arka plan ekliyip birde burdaki efekti eklediğinizde Çok güzel Oluyuor ben bu kodları bu temadan çıkartım hemen paylaşalım dedik :) Sırasıyla kodlarımıza geçelim...
Demosunu Burdaki adresten Görebilirsiniz.
öncelikle şablonumuzu genişletip bu kodu bulup ]]></b:skin> aşağıdaki css kodunu üstüne ekliyoruz..
#cover-cloud{height:200px;left:0;min-width:1074px;position:absolute;width:100%;z-index:0}#cloud{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRjE_-pUB9LoYxoO7gTFm3qYXaU7GdHbivEYGZRm7gp60s3wX9du7fL4htzZVveZpk9Z9LvqOaK2a0lKkd6GeqFrpz30d4pFznbTk3fbM7yqfoH5JflluI6LMgrVjQ6pFvXnuq6mABQw/s1600/cloud1.png) repeat-x 0 0;height:188px;position:absolute;width:100%;z-index:1}#cloud2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRlkoJL9sWhgpveHzegTJxDkMlMb2Zch9On9dGLw_nNEYB8c9J2dH2DCZ4Z9l-hGjXlRl4FgVJ_H4_3HhTb1ssm47MzJG9c8rjn7lcbb5qaWKIj-Ua2JW-n7oZZjHVpHBKn7ToWCK4-lM/s1600/cloud2.png) repeat-x 0 0;height:125px;position:absolute;width:100%;z-index:2}#cloud3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZFWnOkuXRr8u8ZrZvVhR78WMy8PRhKg-9RCaecz1ZN7E_qNdGKR72q023MgDSMoRrqm8TnkiUsRP2Ht9wMfKSjzk1mU9PVMb0UGS-ntuDX3l1x73SJvhkmVz1GRZro4Bonq9JI_qhWiE/s1600/cloud3.png) repeat-x 0 0;height:46px;position:absolute;width:100%;z-index:3}
Sonrasında </head> kodunu bulup aşaıdaki kdları üstüne eklemeniz.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
(function(e){e._spritely={animate:function(t){var n=e(t.el);var r=n.attr("id");if(!e._spritely.instances){e._spritely.instances={}}if(!e._spritely.instances[r]){e._spritely.instances[r]={current_frame:-1}}var i=e._spritely.instances[r];if(t.type=="sprite"){var s;var o=function(n){var i=t.width,o=t.height;if(!s){s=[];total=0;for(var u=0;u<t.no_of_frames;u++){s[s.length]=0-total;total+=i}}if(e._spritely.instances[r]["current_frame"]>=s.length-1){e._spritely.instances[r]["current_frame"]=0}else{e._spritely.instances[r]["current_frame"]=e._spritely.instances[r]["current_frame"]+1}n.css("background-position",s[e._spritely.instances[r]["current_frame"]]+"px 0");if(t.bounce&&t.bounce[0]>0&&t.bounce[1]>0){var a=t.bounce[0];var f=t.bounce[1];var l=t.bounce[2];n.animate({top:"+="+a+"px",left:"-="+f+"px"},l).animate({top:"-="+a+"px",left:"+="+f+"px"},l)}};o(n)}else if(t.type=="pan"){if(t.dir=="left"){e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]-(t.speed||1)||0}else{e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]+(t.speed||1)||0}if(e.browser.msie){var u=e(n).css("background-position-y")||"0";e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u)}else{var u=(e(n).css("background-position").split(" ")||" ")[1];e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u)}}},randomIntBetween:function(e,t){return parseInt(rand_no=Math.floor((t-(e-1))*Math.random())+e)}};e.fn.extend({spritely:function(t){var t=e.extend({type:"sprite",do_once:false,width:null,height:null,fps:12,no_of_frames:2},t||{});t.el=this;t.width=t.width||e(this).width()||100;t.height=t.height||e(this).height()||100;var n=function(){return parseInt(1e3/t.fps)};if(!t.do_once){window.setInterval(function(){e._spritely.animate(t)},n(t.fps))}else{e._spritely.animate(t)}return this},sprite:function(t){var t=e.extend({type:"sprite",bounce:[0,0,1e3]},t||{});return e(this).spritely(t)},pan:function(t){var t=e.extend({type:"pan",dir:"left",continuous:true,speed:1},t||{});return e(this).spritely(t)},flyToTap:function(t){var t=e.extend({el_to_move:null,type:"moveToTap",ms:1e3,do_once:true},t||{});if(t.el_to_move){e(t.el_to_move).active()}if(e._spritely.activeSprite){if(window.Touch){e(this)[0].ontouchstart=function(t){var n=e._spritely.activeSprite;var r=t.touches[0];var i=r.pageY-n.height()/2;var s=r.pageX-n.width()/2;n.animate({top:i+"px",left:s+"px"},1e3)}}else{e(this).click(function(t){var n=e._spritely.activeSprite;e(n).stop(true);var r=n.width();var i=n.height();var s=t.pageX-r/2;var o=t.pageY-i/2;n.animate({top:o+"px",left:s+"px"},1e3)})}}return this},active:function(){e._spritely.activeSprite=this;return this},activeOnClick:function(){var t=e(this);if(window.Touch){t[0].ontouchstart=function(n){e._spritely.activeSprite=t}}else{t.click(function(n){e._spritely.activeSprite=t})}return this},spRandom:function(t){var t=e.extend({top:50,left:50,right:290,bottom:320,speed:4e3,pause:0},t||{});var n=e(this).attr("id");var r=e._spritely.randomIntBetween;var i=r(t.top,t.bottom);var s=r(t.left,t.right);e("#"+n).animate({top:i+"px",left:s+"px"},t.speed);window.setTimeout(function(){e("#"+n).spRandom(t)},t.speed+t.pause);return this},makeAbsolute:function(){return this.each(function(){var t=e(this);var n=t.position();t.css({position:"absolute",marginLeft:0,marginTop:0,top:n.top,left:n.left}).remove().appendTo("body")})}})})(jQuery);try{document.execCommand("BackgroundImageCache",false,true)}catch(err){}//]]></script>
<script type='text/javascript'>(function($){$(document).ready(function(){$('#cloud').pan({fps: 30, speed: 1, dir: 'right'});$('#cloud2').pan({fps: 30, speed: 2, dir: 'right'});$('#cloud3').pan({fps: 30, speed: 0.5, dir: 'right'});});})(jQuery);</script>
en son olarak aşağıdaki kodlarıda <body> kodunun hemen altına eklemeniz.
<div id='cover-cloud'>
<div id='cloud'/>
<div id='cloud2'/>
<div id='cloud3'/>
</div>
Not: Sitenizde daha önceden bu kod eklenmişşe
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
aşağıdaki head kodunda verdiğim koddaki bu kodu çıkarmanızı tavsiye ederim çünki aynı kod varsa kodlar çalışmıyo biliyor bu konudada bilgilendirelim dedim
İlk yorum benden :D.Siteye daha çok gerçekçilik efekti,3D efekti veriyor teşekkürler.
YanıtlaSilevet bir farklılık veriyor siteye :)
SilTeşekkürler Belki Kullanırım.
YanıtlaSilhiç birşey anlamadım. baştaki cover ile başlayan kodu hangi satıra ekleyeceğiz.
YanıtlaSiltema şablonundan /b:skin bu kodu bulup üstüne ekliyorsun css kodlaru devamlı buraya eklenir yanlız kod şu an sorunlu :)diğer kodlar gözükmüyor bunu düzenleyip tekrar koyarım bir ara
Silevet görünmüyor, bulutlarıda göremeyeceğiz : )
YanıtlaSilşimdilik sadece demo da görebileceksiniz. :) şu an kendi temamda bi sorun var onla uğraşıyorum düzelttikten sonra bu konuyu düzenlerim
SilSağlk olsn :|
YanıtlaSilkodlar düzenlendi
Silsırtı svazlanası insansınız gerçekten : )
YanıtlaSilALLAH ALLAH. bende neden olmadı bılmıyorum. ilk normal yaptım calısmadı. sonra o dediğiniz koduda cıkardım gene calısmadı :) çok güzel ama yaaaaaaa.
YanıtlaSilkodlar çalışıyor aslında ben denedim öle ekledim çünki
SilTemadan kaynaklandığını düşünüyorum ama, farklı bi temada deneyim.
YanıtlaSil