27 Haziran 2018 Çarşamba

Css3 JS Php ile Arka Planı Rastgele Değiştirmek

arka plan resmini rastgele değiştirmek php js ve css3

Web sitenizin arka planını değiştirmek ister misiniz? Css3, Javascript, JQuery ve Php ile arka planı rastgele değiştirmek için birkaç varyasyon çalışacağız. Hadi başlayalım!

İlk olarak html tabanında basit bir arka plan betiği ile başlayalım. Buna göre kodlarımızı çeşitlendirelim.


html {   
    background: url(image/ornekresim.jpg) no-repeat center center fixed
    -webkit-background-size: cover
    -moz-background-size: cover
    -o-background-size: cover
    background-size: cover   
}
Php siteniz için ilk arka plan değişimi için hazırladığımız kod betiği şöyle.

<?php
  $bg = array('krm-01.jpg', 'krm-02.jpg', 'krm-03.jpg', 'krm-04.jpg', 'krm-05.jpg', 'krm-06.jpg', 'krm-07.jpg' ); // içerik dosyaları

  $i = rand(0, count($bg)-1); // içerik tabanından fonksiyonel dosya seç
  $selectedBg = "$krm[$i]"; // seçilecek içerik dosya tabanı
?>

<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
JQuery kütüphanesi için ilk arka plan değiştirme kod betiğimiz de şöyle...

var images = ['foto1.jpg', 'foto2.jpg', 'foto3.jpg', 'foto4.jpg', 'foto5.jpg'];
$('html').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
Php siteniz varsa ve daha kısa bir kod olsun isterseniz, aşağıdaki kod işinizi görecektir. Üstelik dosya kaynağında isimlerini belirtmeniz yeterlidir.

background: url('<?php $a = array('resim1.jpg','foto2.gif','arkaplan3.png'); echo $a[array_rand($a)];?>');
Eğer sadece js örneğine ihtiyaç duyarsanız, aşağıdaki sitenizde arka planı rastgele değiştirme js kodunu uygulayabilirsiniz

<html>
<head>
<script type="text/javascript"> 
var totalCount = 8;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// arka plan tekrarla
}
</script>
</head>
<body> 
// Page Design 
</body> 
<script type="text/javascript"> 
ChangeIt();
</script> 
</html>
Web sitenizde JQuery kütüphanesi kullanıyorsanız, aşağıdaki kod ile basit bir şekilde blog sitenizin arka planını rastgele değiştirebilirsiniz.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    var bgArray = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
    var bg = bgArray[Math.floor(Math.random() * bgArray.length)];

    $('body').css('background', bg);

    // dosya kaynağına sahipseniz
    var path = 'images/bg/';

    // 'bg' hedef kaynağını gösterebilirsiniz
    $('body').css('background', path+bg);

}); 
</script>  

Bunlarıda Sevebilirsiniz

  • Yorumlar 1