ఎలా సృష్టించాలి: పర్స్పెక్టివ్ స్క్రోలింగ్

CSS ద్వారా

పర్స్పెక్టివ్ స్క్రోలింగ్

పర్స్పెక్టివ్ స్క్రోలింగ్ అనేది వెబ్ డిజైన్ ప్రభావం ఒకటి, దీనిలో బ్యాక్గ్రౌండ్ కంటెంట్ (ఉదా, చిత్రాలు) స్క్రోలింగ్ చేస్తున్నప్పుడు ముందుగాను కంటెంట్ కంటే వేగంగా కదులుతుంది. క్రింది లింక్‌ను చేరుకుని, పర్స్పెక్టివ్ స్క్రోలింగ్ ఉన్న మరియు లేని వెబ్‌సైట్‌ల మధ్య వ్యత్యాసాన్ని చూడండి.

有视差滚动效果的演示

无视差滚动效果的演示

注意：视差滚动并不总是在移动设备/智能手机上有效。但是，您可以使用媒体查询在移动设备上关闭此效果（请参阅本页最后一个例子）。

దిశానిర్ణయం రోలింగ్ ప్రభావాన్ని సృష్టించడం విధానం

ఒక కంటెయినర్ అంతర్భాగాన్ని ఉపయోగించి, మరియు ప్రత్యేక అగ్రదిశలో ఉన్న బ్యాక్గ్రౌండ్ చిత్రాన్ని చేరకుండా ఉంచండి. అప్పుడు, దిశానిర్ణయం కన్వెయర్ ద్వారా ఉపయోగించండి: background-attachment: fixed; వాస్తవిక దిశానిర్ణయం ప్రభావాన్ని సృష్టించడానికి ఉపయోగించండి. ఇతర బ్యాక్గ్రౌండ్ గుణాలు చిత్రాన్ని కేంద్రంలో ఉంచడానికి మరియు సరిపోయేలా కడగడానికి ఉపయోగించబడతాయి:

పిక్సెల్స్ యొక్క ప్రతిసాధనం

<style>
.parallax {
  /* ఉపయోగించే చిత్రం */
  background-image: url("img_parallax.jpg");
  /* ప్రత్యేక ప్రాంతం అగ్రదిశలో సెట్ చేయండి */
  min-height: 500px;
  /* దిశానిర్ణయం రోలింగ్ ప్రభావాన్ని సృష్టించండి */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* కంటెయినర్ అంతర్భాగం */
<div class="parallax"></div>

మీరే ప్రయోగించండి

పైని ఉదాహరణలో, చిత్రం ప్రాంతం అగ్రదిశలో పెట్టడానికి, మీరు దిశానిర్ణయం కన్వెయర్ యొక్క ప్రాంతం అగ్రదిశను 100% గా సెట్ చేయాలి. మున్నటి: మీరు అందుకు అవసరమైనట్లుగా సెట్ చేయాలి: height: 100%; క్రియాశీల కంప్యూటర్ మరియు శరీరాన్ని ఆపాదించండి:

శాతముల యొక్క ప్రతిసాధనం

body, html {
  height: 100%;
}
.parallax {
  /* ఉపయోగించే చిత్రం */
  background-image: url("img_parallax.jpg");
  /* పూర్తి ప్రాంతం */
  height: 100%;
  /* దిశానిర్ణయం రోలింగ్ ప్రభావాన్ని సృష్టించండి */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

మీరే ప్రయోగించండి

కొన్ని మొబైల్ పరికరాలు ఉపయోగించడం ద్వారా background-attachment: fixed; పరిస్థితిలో సమస్యలు ఉంటాయి. కానీ, మీరు మీడియా క్వరీస్ ద్వారా మొబైల్ పరికరాల్లో దిశానిర్ణయం ప్రభావాన్ని మూసివేయవచ్చు:

ప్రతిసాధనం

/* అన్ని ప్లాట్ కామ్స్ మరియు మొబైల్ ఫోన్లకు దిశానిర్ణయం రోలింగ్ ప్రభావాన్ని మూసివేయండి. అవసరమైతే, పిక్సెల్స్ ని పెంచండి లేదా తగ్గండి */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

మీరే ప్రయోగించండి

పైని కోడ్లో, తెర వెడల్పు 1366 పిక్సెల్స్ కంటే తక్కువ లేదా సమానంగా ఉన్నప్పుడు, దిశానిర్ణయం రోలింగ్ ప్రభావాన్ని మూసివేస్తారు. ఇది అధికారిక ప్లాట్ కామ్స్ మరియు మొబైల్ ఫోన్లకు అనుకూలంగా ఉంటుంది. ఇది మార్చడం ద్వారా అమలుపరుస్తారు: .parallax క్లాస్ యొక్క background-attachment గుణం నుండి fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。