بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
DAUN berjatuhan di halaman muka blog. Trik yang mungkin sudah mulai usang kali ya. Karena trik ini banyak digunakan oleh para blogger jaman dulu ketika blog masih hijau. Sekarang trik ini sepertinya jarang dipakai, meski terlihat beberapa saja blogger yang menggunakannya. Tapi tidak papalah karena saya akan berbagi tutorial cara membuatnya.
Di malam ini saya akan berbagi cara membuat daun berjatuhan di blog, dan sebelumnya saya sudah membuatnya pada tutorial yang ada dibawah ini. Tapi karena saya utak-atik lagi, jadinya saya kemukakan lagi cara membuatnya. Agak berbeda dari yang sudah ada. Dan nanti kalian tinggal mempraktekkannya saja. Daun-daun ini akan berjatuhan dengan irama yang teratur, menurut saya seperti itu. Pokoknya kalian praktekkan saja ya, saya tidak perlu menjelaskan panjang lebar.
Baca Juga :
Okelah kalau begitu kita mulai saja.
Tutorial Membuat Efek Daun Berjatuhan di Halaman Blog (Update)
1. Kalian masuk ke Dashboard Blogger2. Kemudian klik Tema
3. Setelah masuk ke template, cari kode ]]></b:skin> dan tempelkan kode dibawah ini tepat diatas dari kode ]]></b:skin> tersebut.
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqAYx_EWybWkdj5XFGuSUbOW6Wx8tPBxb7Rd5uADV89kMCDNaZr2jvYCIoSJ-QzRTAboIkolpBH0mQQFZUUxMIBXWBdLlmTelx0tFbk9FWX1knkqiy-1F_eo1XI-ZTzYcXN3hpdTr8oL2jh9X8IaLw8VfZzpGdx0t916zdKbX4KKJ7IbvqdEYZ_rg/s1600/Daun%20Berjatuhan.jpg) no-repeat fixed;
background-size: 100% 100%;
}
::-webkit-scrollbar
{
width: 0.5vw; /* for vertical scrollbars */
height: 0.5vw; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track
{
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb
{
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
height: 100%;
}
.leaf0, .leaf1{
position: fixed;
background: url("https://image.ibb.co/h57i1d/Black_Leaf0.png") no-repeat;
background-size: contain;
z-index: -500;
display: none;
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.leaf1 {
position: fixed;
background: url("https://image.ibb.co/fA8Z7J/Black_Leaf1.png") no-repeat;
background-size: contain;
z-index: -500;
display: none;
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.snowflake0 {
background: url("https://image.ibb.co/iG6yZy/Snowflake0.png") no-repeat;
position: fixed;
width: 10px;
height: 10px;
background-size: contain;
z-index: -500;
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.tree {
visibility: hidden;
position: fixed;
top: 15vh;
left: 2vw;
height: 25vh;
width: 22vw;
background: red;
}
.sky {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 10vh;
width: 100vw;
background: skyblue;
}4. Setelah itu temukan lagi kode </body> dan tempelkan kode dibawah ini tepat di atas kode </body> tadi itu.
<script type='text/javascript'>
//<![CDATA[
window.addEventListener('load',
function () {
let numLeaves = 60;
let numSnow = 50;
let curLeaves = 0;
let curSnow = 0;
let didScroll = false;
function scrolled() {
didScroll = true;
window.removeEventListener("scroll", scrolled);
}
window.addEventListener("scroll", scrolled);
let wait = 800;
setInterval(function() {
if(didScroll) {
didScroll = false;
let cur = (document.documentElement.scrollTop || document.body.scrollTop);
let loc = cur / ((document.documentElement.scrollHeight || document.body.scrollHeight) - window.innerHeight) * 100;
if (loc < 25) {
numLeaves = 60;
numSnow = 0;
wait = 800;
} else if (loc < 50) {
numLeaves = 100;
numSnow = 20;
wait = 500;
} else if (loc < 75) {
numLeaves = 20;
numSnow = 110;
wait = 300;
} else {
numLeaves = 35;
numSnow = 25;
wait = 1000;
}
window.addEventListener("scroll", scrolled);
}
}, 750);
/*
PROCEDURE TO CONTROL BACKGROUND ANIMATIONS
*/
let height = document.documentElement.clientHeight;
let width = Math.max(
document.documentElement.clientWidth,
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth
);
window.addEventListener("resize", function () {
height = document.documentElement.clientHeight;
width = Math.max(
document.documentElement.clientWidth,
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth
);
});
let dir = [];
let speed = [];
let grav = [];
let wind = [];
let rot = [];
let delta = [];
function createChild(parent, childName) {
let bound = parent.getBoundingClientRect();
let startX = ((Math.random() * (bound.right - bound.left)) + bound.left) + "px";
let startY = ((Math.random() * (bound.bottom - bound.top)) + bound.top) + "px";
let newChild = document.createElement("div");
newChild.style.top = startY;
newChild.style.left = startX;
newChild.style.transform = randomRotate();
let z = newChild.style.transform.split(" ")[2].replace("rotateZ(", "").replace("deg)", "");
grav.push(Math.random() / 6 + 0.3);
speed.push(Math.random() / 6 + 1);
if (childName === "leaf") {
wind.push(Math.random() / 4 + 0.5);
newChild.className = childName + Math.floor(Math.random() * 2);
let random = Math.random() * 15;
newChild.style.width = (60 - random) + "px";
newChild.style.height = (60 - random) + "px";
} else {
wind.push(0.2);
newChild.className = childName + Math.floor(Math.random());
let random = Math.random() * 5;
newChild.style.width = (10 - random) + "px";
newChild.style.height = (10 - random) + "px";
}
rot.push(Math.random() / 4 + 0.4);
delta.push(Math.random() * 40 - 20);
if (z < 90) {
dir.push(-1);
} else {
dir.push(1);
}
document.getElementsByClassName("container")[0].appendChild(newChild);
$(newChild).fadeIn("slow");
}
function randomRotate() {
let x = Math.random() * 10;
let y = Math.random() * 30 - 15;
let z = Math.random() * 180;
return "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";
}
//Animates the children of a given parent to fall
function animate(parent) {
if (curLeaves < numLeaves) {
let bound = (numLeaves - curLeaves);
for (let i = 0; i < bound; i++) {
setTimeout(function () {
createChild(document.getElementsByClassName("tree")[0], "leaf");
}, (wait * i));
curLeaves++;
}
}
if (curSnow < numSnow) {
let bound = (numSnow - curSnow);
for (let i = 0; i < bound; i++) {
setTimeout(function () {
createChild(document.getElementsByClassName("sky")[0], "snowflake");
}, ((wait + 100) * i));
curSnow++;
}
}
for (let i = 0; i < parent.children.length; i++) {
let child = parent.children[i];
let z = child.style.transform.split(" ")[2].replace("rotateZ(", "").replace("deg)", "");
let dx = speed[i];
let dy = Math.random() * 2 * Math.abs(Math.cos(z * Math.PI / 180));
if (child.className.indexOf("leaf") >= 0) {
child.style.top = (child.style.top.replace("px", "") - (0.2 * Math.sin(z / 180 * Math.PI)) + grav[i] + "px");
} else {
child.style.top = (child.style.top.replace("px", "") - 0 + grav[i] + "px");
}
child.style.left = (child.style.left.replace("px", "") - 0 - (0.1 * Math.sin(z / 180 * Math.PI)) + (dir[i] * speed[i] * 1.5) + wind[i]) + "px";
if ((child.style.top.replace("px", "") - 0 + dy) > height || (child.style.left.replace("px", "") - 0 + dx) > width || (child.style.left.replace("px", "") - 0 + dx) < -100) {
parent.removeChild(child);
dir.splice(i, 1);
speed.splice(i, 1);
wind.splice(i, 1);
grav.splice(i, 1);
rot.splice(i, 1);
delta.splice(i, 1);
if (child.className.indexOf("leaf") >= 0) {
curLeaves--;
} else {
curSnow--;
}
i--;
} else {
if (z >= 92 && dir[i] === -1) {
if (speed[i] > 0) {
speed[i] -= speed[i] / 50;
}
} else if (z >= 100 && dir[i] === 1) {
if (speed[i] < 1.1) {
speed[i] += 0.02;
}
} else if (z <= 80 && dir[i] === -1) {
if (speed[i] < 1.1) {
speed[i] += 0.03;
}
} else if (z <= 88 && dir[i] === 1) {
if (speed[i] > 0) {
speed[i] -= speed[i] / 50;
}
}
if (z <= 92 && z >= 88) {
speed[i] = 1 + (Math.random() / 4);
}
if ((z <= 140 && dir[i] === -1 && speed[i] > 0.22) || (z >= 20 && dir[i] === 1 && speed[i] > 0.22)) {
z = z - (dir[i] * rot[i]);
}
if (z >= 110 && speed[i] <= 0.2 && dir[i] === -1) {
dir[i] = 1;
} else if (z < 70 && speed[i] <= 0.2 && dir[i] === 1) {
dir[i] = -1;
}
let x = child.style.transform.split(" ")[0].replace("rotateX(", "").replace("deg)", "");
if (x > 0 + delta[i] && dir[i] === -1) {
x = x - Math.random() / 2;
} else if (x < 40 + delta[i] && dir[i] === 1) {
x = x - 0 + Math.random() / 2;
}
let y = child.style.transform.split(" ")[1].replace("rotateY(", "").replace("deg)", "");
if (y > 0 + delta[i] && dir[i] === -1) {
y = y - Math.random() / 2;
} else if (y < 40 + delta[i] && dir[i] === 1) {
y = y - 0 + Math.random() / 2;
}
child.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";
}
}
}
setInterval(function () {
animate(document.getElementsByClassName("container")[0]);
}, 10);
/*
END OF PROCEDURE
*/
}, false);
//]]>
</script> Kemudian terakhir tempelkan kode ini di Tata Letak, Tambah HTML Javascript dan taruh di situ.
<div class="container"></div>
<div class="tree"></div>
<div class="sky"></div>Catatan :
Harap Back Up template blog kalian bila ingin utak-atik template ya. Supaya nanti ketika ada kerusakan template karena error, bisa dikembalikan seperti semula.
Saya sertakan demo dibawah ini ya
Nah sudah khan dan sekarang tinggal nikmati hasilnya. Sudah cukup dulu ya tutorialnya. Oh iya. Untuk menampilkan efek itu, kalian mesti menempelkan kode ini juga di atas kode </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js' type='text/javascript'/>
--------
LAMA tutorial ini saya sampaikan dan sudah saya persembahkan trik ini lagi yaitu tentang Membuat Efek Daun Berguguran di Halaman Blog : Update. Efek ini memunculkan untaian dedaunan yang sedang berguguran dan beda dari yang saya buat tutorial sebelumnya.
Memang sudah banyak yang menggunakan trik ini sebagai penghias blog mereka. Selain menambah keindahan tentu saja dengan script ini bisa juga untuk menandakan musim apa sekarang. Hem apa bisa?
Kite memasangnya bisa menyesuaikan kondisi cuaca di luar sana. Contoh, bila di daratan Eropa sedang memulai musim dingin salju, maka pasanglah trik Efek Salju Berjatuhan di Halaman Blog. Dan ketika musim gugur maka pasanglah trik ini. Sesuai dengan keadaan dimana musim gugur tiba, dedaunan banyak yang bejatuhan.
Sungguh menarik bukan. Karena dengan memasang efek ini saja blog kalian pasti akan menjadi unik. Dan tenang saja karena script ini ringan dan tidak memberatkan blog kalian.
Dengan file yang telah dihost dari cdn.jsdelivr, kemungkinan kecil loading akan lambat. Malah sebaliknya, script apapun tidak berpengaruh secara signifikan, karena cdn jsdelivr sudah mengcompress file script menjadi kecil dan ringan.
Bila kalian mau memasang trik ini di blog kalian, tidak ada salahnya mencoba mengutak-atik template kalian dan menempelkan kode yang akan kami berikan dibawah ini. Tapi jangan lupa "back up dulu template kalian. Karena bila terjadi kesalahan, template kalian bisa dikembalikan seperti semula."
Okelah sekarang kita mulai saja ya.
Efek Daun Berguguran dengan Javascript
Caranya adalah dengan : Masuk ke Dashboard Blogger, terus klik Tema, kemudian pilih Sesuaikan : Edit HTML, dan cari kode </body>. Kemudian tempelkan kode dibawah diatas kode </body> yang sudah disebutkan tadi.
<script src='https://cdn.jsdelivr.net/gh/Alifacode/backupmaster@main/alifacode-update-daun-berguguran-2.js' type='text/javascript'/>Atau dengan masuk ke Tata Letak kemudian pilih Tambah HTML/Javascript dan tempelkan kode diatas di konten kosong yang tersedia. Terakhir save dan publikasikan. Pasti sudah jadi.
Untuk contohnya bisa dilihat :
Nah sudah jadi khan. Lebih bagus lagi bila trik ini jangan dicampur dengan trik lain yang sudah saya buat sebelumnya yaitu Trik Efek Salju Berjatuhan di Blog. Karena nanti akan terasa penuh dan malah kurang enak dipandang mata. Jadi cukup satu saja memasang scriptnya.
Sekian artikel dari kami yang berjudul Efek Daun Berguguran dengan Javascript yang dapat kami berikan. Selamat berkarya dan tetap semangat utak atik blognya. Supaya blog kalian semakin bagus dan unik. Sekian dan terima kasih. Wassalam.
Label Postingan :
CSS
,
Javascript
,
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Tutorial Membuat Efek Daun Berjatuhan di Halaman Blog (Update) . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
