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!
Resource by: http://tutorialzine.com
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>margin:0 auto;
}
#splashScreen{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#111111;
background-repeat:no-repeat;
text-align:center;
}
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>//<![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>
<div id="promoIMG"></div>Save dan lihat hasilnya :-bdResource by: http://tutorialzine.com
Loading... |
3 comments
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/...