LEARN FREE HERE

سلام به همه.. 

امروز با یه آموزش برای قالب هاتون اومدم.. 

و البته درخواستیه..و لازمه بگم از وب دوست خوبم افشین برش داشتم.. 

به صورت تصویری قراره یادتون بدم که راحت تر باشین.. 

- خوب اول میرید به قسمت قالب..بعدش گزینه ویرایش ساختار قالب فعلی ارو کلیک میکنید..

- کد زیر رو طبق تصویر بعدش تو جایی که مشخصش کردم (مرحله1) کپی پیست کنید.. 

<!--------paeez----------->
<div class="fallingLeaves">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

<!--/------paeez/----------->

- طبق این تصویر..

- بعدش حتما گزینه ذخیره ( مرحله2 ) ارو کلیک کنید..

- و حالا کد زیر رو ببرید آخر کدهای قسمت ویرایش css قالبتون و کپی پیست کنید.. 

/************ falling ****************/

.fallingLeaves {
    text-align: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    pointer-events: none;
    z-index: 9999999999;
}
.fallingLeaves span {
    display: inline-block;
    width: 80px;
    height: 80px;
	margin: -280px 40px 54px  -34px;
background: url(http://bayanbox.ir/view/4134513399720456630/leaf.png);
    background-size: 30px;
    background-repeat: no-repeat;
    
    -webkit-animation: fallingLeaves 10s infinite  linear;
    -moz-animation: fallingLeaves 10s infinite  linear;
}
.fallingLeaves span:nth-child(5n+5) {

    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.fallingLeaves span:nth-child(3n+2) {

    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.fallingLeaves span:nth-child(2n+5) {

    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}

.fallingLeaves span:nth-child(3n+10) {

    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.fallingLeaves span:nth-child(7n+2) {

    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.fallingLeaves span:nth-child(4n+5) {

    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.fallingLeaves span:nth-child(3n+7) {

    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
@-webkit-keyframes fallingLeaves {
  0% {
    opacity: 1;

	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;

	-webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;

	-webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
@-moz-keyframes fallingLeaves {
  0% {
    opacity: 1;
    
	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;
   
	-webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;
    
	-webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}


/*******************end falling*****************/

- خوب به درخواست دوستان از رفیقم افشین کدی ارو آوردم براتون.. 

که اگه این کد رو بذارید دوتا شکل از قالبتون میریزه.. 

- همین کد زیر رو مثل کد قبلی به آخر کدهای CSS قالبتون اضافه کنید.. 

دقیقا بعد از کد دومی که اضافه کردید.. 

.fallingLeaves span:nth-child(3n) { background: url(http://bayanbox.ir/view/7638067417372580080/hiclipart.com-1.png); display: inline-block; width: 80px; height: 80px; background-size: 30px; background-repeat: no-repeat; }

- یادتون نره یه خط ایجاد کنید بعد کد رو بذارید..

- در آخر بازم ذخیره ارو کلیک کنید..

- و اینکه اگر خواستید یه عکس دیگه بذارید لینک عکس پیش فرض زیر رو حذف کنید از داخل کد دوم..

http://bayanbox.ir/view/4134513399720456630/leaf.png

- و برای ریزش عکس دوم میتونید لینک عکس پیش فرض زیر رو از کد سوم حذف کنید.. 

http://bayanbox.ir/view/7638067417372580080/hiclipart.com-1.png

- بعدش هر عکسی که خودتون آپلود کردید رو لینکشو جایگزینش کنید..تمام..

- خوب چون انسان مهربونیم یه بسته براتون اوردم که راحت استفاده اش کنید..

- توش خودم 47 تا عکس همینجوری گذاشتم..

- اگه عکس مورد نظرتون داخلش نبود بهم بگید تا بذارم..

Download

خیلی خوب به درخواست یه داداش گل گفتم اینم بهتون بگم.. بی نسیب نمونین..

- اینکه برای بیشتر یا کمتر کردن اندازه شکل توی کد ریزش عکس دوم.. 

- میتونید عدد 30px رو از داخل کد که روبه روی background-size نوشته شده ارو تغییر بدید.. 

- دقت کنید چیز دیگه ای ارو تغییر ندید.. فقط همونو توی CSS قالبتون که کد رو گذاشتین تغییرش بدید.. همین

امیدوارم لذتشو ببرید..☺️