Ruxsat etilgan bo'lakka o'tish

Veb-saytni o'rganib chiqsam, bu ajoyib ta'sirni ushbu saytda topdim http://www.guglieri.com/ (o'tish effekti) Men bir xil effektni yaratadigan skriptni yaratishni istayman, lekin mantiqiy xatti-harakatni tushunmayman.

Asosan, tana balandligi har bir bo'limning pozitsiyasini "mutlaq" ga sozlashni va tananing balandligini har bir qismning balandligiga yig'ishni hisoblab chiqdim.

Endi esa, bu fikr, har bir kishining ofsetini bir qatorga saqlash va aylantirish uchun bu katta yoki teng bu tengsizlikka aylantirilganda ... Men yuqoriga translateY xususiyatidan yuqoriga ko'chirishni boshlayman va u harakatni to'xtatib qo'yaman. versiya balandligi. Lekin endi men qoldim!

Men mavjud bo'lgan plagin uchun googled, lekin hech narsa topmadim. Shuning uchun iltimos yechim topishga yordam bering;)

Bu erda tushuncha:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var
  body = $('body')
  section = $('section');
section.each(function(i,el){
  $(el).css({
    'z-index' : section.length - i
  })
  body.height(body.height()+$(el).height());
});
body {
  margin: 0;
}
section {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  font-family: sans-serif;
}
section.a {
  background-color:indianred
}
section.b {
  background-color:royalblue
}
section.c {
  background-color:deepskyblue
}
section.d {
  background-color:tomato;
}

section div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  font-size: 6em;
  color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div>a</div>
 
<div>b</div>
 
<div>c</div>
 
<div>d</div>
 
</div> </div>

3

6 javoblar

You can go through the basics of the parallax effect on w3schools

2
qo'shib qo'ydi

You can go through the basics of the parallax effect on w3schools

2
qo'shib qo'ydi

Bu parallaks ta'siri.

Here's a simple parallax script: http://pixelcog.github.io/parallax.js/

Internetdagi boshqa skriptlar ham sizning ehtiyojlaringizga qarab o'zingizning parallax effektlarini qanday qilib yaratishni o'rganib chiqadi.

2
qo'shib qo'ydi

Bu parallaks ta'siri.

Here's a simple parallax script: http://pixelcog.github.io/parallax.js/

Internetdagi boshqa skriptlar ham sizning ehtiyojlaringizga qarab o'zingizning parallax effektlarini qanday qilib yaratishni o'rganib chiqadi.

2
qo'shib qo'ydi

Siz pagePiling.js dan foydalanishingiz mumkin, lekin bu farq avtomatik ravishda aylantirishni ishlatadi.

Shunga o'xshash effektni fullPage.js parallax kengaytmasi yordamida tanlash mumkin < kod> ofset: 100 autoScrolling: noto'g'ri .

0
qo'shib qo'ydi

Siz pagePiling.js dan foydalanishingiz mumkin, lekin bu farq avtomatik ravishda aylantirishni ishlatadi.

Shunga o'xshash effektni fullPage.js parallax kengaytmasi yordamida tanlash mumkin < kod> ofset: 100 autoScrolling: noto'g'ri .

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb