◄ Min  Size Fonts: + | - | ± Color: Max ►

Making Splash Screen Effect for Blogspot

Artikel kali ini yaitu mengenai "Making an Apple-style Splash Screen" <--- judul aslinya. Membuat percikan (splash) pada layar monitor kita ketika akan memasuki blog kita :x Percikannya berupa tulisan berganti-ganti gitoh. Seperti kata² opening lah kala mau masuk...paham pasti lah ;)) Karena berbentuk script, dan biasanya script diload belakangan maka disarankan ini cocok bagi blognya yg ringan alias masih cepat dibukanya :D biar tampak efeknya ;)
Bagaimana setelah melihat demonya :-/ Terlihat ada tulisan ganti-ganti ketika memasukinya! kalau tidak tampak refresh lagi cepetan liat :P Terintegrasi dengan jQuery script silahkan jika belom paham baca dolo apa itu plugins!

Kode CSS

#splashScreen img{
margin:0 auto;
}
#splashScreen{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#111111;
background-repeat:no-repeat;
text-align:center;
}
Letakan diatas/sebelum kode ]]></b:skin>

jQuery Plugins

Pada live demo script ini diletakan sebelum tag </head> tapi setelah ditest di blogspot bisa juga diletakan diatas/sebelum tag </body> Whatever lah...:D
<script type='text/javascript'>
//<![CDATA[
// A self-executing anonymous function,
// standard technique for developing jQuery plugins.
(function($){
$.fn.splashScreen = function(settings){

// Providing default options:
settings = $.extend({
textLayers : [],
textShowTime : 3000,
textTopOffset : 80
},settings);
var promoIMG = this;

// Creating the splashScreen div.
// The rest of the styling is in splashscreen.css
var splashScreen = $('<div>',{
id : 'splashScreen',
css:{ backgroundImage: promoIMG.css('backgroundImage'), backgroundPosition : 'center '+promoIMG.offset().top+'px', height : $(document).height()
}
});
$('body').append(splashScreen);
splashScreen.click(function(){
splashScreen.fadeOut('slow');
});

// Binding a custom event for changing the current visible text according
// to the contents of the textLayers array (passed as a parameter)
splashScreen.bind('changeText',function(e,newID){

// If the image that we want to show is
// within the boundaries of the array:
if(settings.textLayers[newID]){
showText(newID);
}
else {
splashScreen.click();
}
});
splashScreen.trigger('changeText',0);

// Extracting the functionality as a
// separate function for convenience.
function showText(id){
var text = $('<img>',{
src:settings.textLayers[id],
css: {marginTop : promoIMG.offset().top+settings.textTopOffset}
}).hide();
text.load(function(){
text.fadeIn('slow').delay(settings.textShowTime).fadeOut('slow',function(){text.remove();
splashScreen.trigger('changeText',[id+1]);
});
});
splashScreen.append(text);
}
return this;
}
})
(jQuery);
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

// Calling our splashScreen plugin and
// passing an array with images to be shown
$('#promoIMG').splashScreen({
textLayers : ['img/thinner.png', 'img/more_elegant.png', 'img/our_new.png']
});
});
//]]>
</script>
Kode script yg diberi warna merah tua itulah tulisan yg berupa gambar yg gonta-gantinya sob. Silahkan ganti gambar tsb dengan gbr tulisan sesuai dengan keinginan sobat :) Setelah melakukan semua cara diatas masukin kode HTML ini pada body template, kalau mau bisa tepat dibawah tag <body><div id="promoIMG"></div>Save dan lihat hasilnya :-bd
Resource by: http://tutorialzine.com
Loading...
XMaking Splash Screen Effect for Blogspot

Subscribe my posts Register For Free!

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE