آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

افکت تغییر پس‌ زمینه هنگام اسکرول کردن صفحه با CSS در سایت

آموزش CSS

افکت تغییر پس‌ زمینه هنگام اسکرول کردن صفحه با CSS در سایت


در این مقاله می آموزید که چطور با استفاده از CSS و Html تصاویر پس زمینه را با اسکرول ( بالا پایین بردن صفحه ) تغییر دهید.


قدم اول : کد HTML را اضافه کنید.
مثال :


متن

قدم دوم :   کد CSS را اضافه کنید.
مثال :

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* Full height */
  height: 50%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Images used */
.img1 { background-image: url("http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide_1.jpg "); }
.img2 { background-image: url("http://articles.tahlildadeh.com/image.axd?picture=img_girl.jpg "); }
.img3 { background-image: url("http://articles.tahlildadeh.com/image.axd?picture=img_lights_wide.jpg "); }
.img4 { background-image: url("http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg "); }
.img5 { background-image: url("http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg "); }
.img6 { background-image: url("http://articles.tahlildadeh.com/image.axd?picture=img_woods_wide.jpg "); }

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  font-size: 80px;
  border: 10px solid #f1f1f1;
  position: fixed; /* Stay fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}

                


نمونه مثال Change Background Image on Scroll:

<div class="bg-image img1"></div>
<div class="bg-image img2"></div>
<div class="bg-image img3"></div>
<div class="bg-image img4"></div>
<div class="bg-image img5"></div>
<div class="bg-image img6"></div>

<div class="bg-text">متن</div>


 

امتحان کنید

خروجی افکت Change Background Image on Scroll  

افکت تغییر پس‌ زمینه هنگام اسکرول کردن صفحه با CSS در سایت
  • 24
  •    0
  • تاریخ ارسال :   1400/01/15

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .