Parallax Website Effect Using CSS

Parallax Website Effect Using CSS के आर्टिकल में आपको मिलेगी HTML Parallax की complete जानकारी,

आपको आज का आर्टिकल पूरा पढ़ना चाहिए ताकि आपको HTML Parallax की importance के बारे में पता हो.

HTML Parallax scroll पर काम करता है जिसके कारण हम इसे Parallax Scrolling भी कह सकते हैं. दोस्तों आर्टिकल में आगे बढ़नें से पहले आपको पता होना चाहिए की Parallax Scrolling क्या है (What Is Parallax Scrolling), और Parallax design के क्या-क्या फायदे हैं (benefit of parallax scrolling),

इसके आलावा हम create करेंगें parallax website examples का एक डेमो जिसको देखनें के बाद आपको Parallax Website Effect को समझना आसान हो जाएगा.

What Is Parallax Scrolling?

( Parallax Scrolling kya hai ) – Parallax Scrolling एक special तकनीक(technique) है जिसके जरिये illusion(भ्रम) बनाया जा सकता है जो की देखनें में 3d effect जैसा लगता है.

Parallax scrolling के इस्तेमाल से background को स्थिर किया जा सकता है, background ही नहीं आप किसी भी element को एक जगह स्थिर रख सकते हैं scroll पर, जिससे एक illusion create होता है जो की देखने में काफ़ी अच्छा लगता है.

इस तरह के illusion से website के visitor impress होते हैं और उस website को पसंद भी करते हैं.

दोस्तों अगर बात करें कारण की तो इंसान की आँखें पास की वस्तुओं को बड़ी मानती है दूर की वस्तुओं से इसलिए illusion बनाना आसान हो जाता है.

parallax scrolling का उपयोग पहले के टाइम में traditional animation के रूप में किया जाता था लेकिन टाइम के साथ जैसे-जैसे html और CSS विकसित हुई parallax scrolling वेब डिजाईन की दुनिया का हिस्सा बन गया.

Parallax Website के फायदे

दोस्तों आपने सुना होगा First Impression is the Last Impression, First Impression के लिए आपको कुछ unique ideas को add करनें होते हैं और parallax उनमें से एक है.

website में Parallax के use से हम user को website की तरफ attract कर सकते हैं.

कुछ parallax website examples देखते हैं जिससे आपको समझनें में आसानीं होगी.

Parallax Website Effect Using CSS

दोस्तों parallax effect को हम CSS की की सहायता से कर सकते हैं जिसका Example आप नीचे देख सकते हैं |

parallax website examples :-

Only CSS के use से हम एक creative parallax effect बना सकते हैं( Parallax Website Effect Using CSS )

सबसे पहले आपको html का document तैयार करना है कुछ इस प्रकार से –

<div class="parallax">
      <h2>Parallax 1</h2>
</div>
<div class="parallax parallax-1">
      <h2>Parallax 2</h2>
</div>

HTML Document की CSS करनीं है कुछ इस प्रकार से –

h2{
	color: #fff;
	font-size: 5rem;
	background: #000;
	padding: 1rem 2rem;
	text-align: center;
}
.banner-bottom{
	margin-top: 5rem;
	width: 100%;
	float: left;
}
.parallax{
  background-image: url("https://picsum.photos/1920/500");
  min-height: 500px; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parallax-1{
  background-image: url("https://picsum.photos/1920/1000");
  min-height: 1000px;
  margin-top: 1rem;
}

@media screen and (max-width: 992px){
	html{font-size: 40%;}
	.parallax{min-height: 300px;}
	.parallax-1{min-height: 500px;}
}

HTML और CSS होनें के बाद आउटपुट कुछ इस तरह से नजर आएगा |

Parallax Website Effect Using CSS

दोस्तों Parallax Website Effect Using CSS के डेमो में मैंने random image use की है |

इसके अलावा और भी अच्छे-अच्छे आर्टिकल पढ़ सकते हैं जिनसे आपकी काफ़ी सहायता होगी –

  1. HTML में tabs कैसे बनाएँ ?
  2. Scroll पर animation कैसे लगाएँ ?
  3. वेबसाइट में स्लाइडर कैसे लगाएँ ?

Parallax Website Effect Using CSS के अलावा आप html Parallax की library को भी use कर सकते हैं | html Parallax की library का नाम है RELLAX Js

FAQs

parallax scrolling effect kya hai ?

Parallax scrolling एक तकनीक है जिसके जरिये वेब डिज़ाइनर illusion create करते हैं | जैसे ही user किसी webpage में निचे scroll करता है तो content और background की अलग-अलग layer बनती है जिससे एक optical illusion बनता है, इस optical illusion को ही parallax scrolling कहते हैं |

क्या parallax scrolling पुरानीं है ?

parallax scrolling को आप एक ट्रेंड के रूप में समझ सकते हैं को कभी popular होता है कभी नहीं लेकिन parallax scrolling वेब डिजाईन की दुनिया में आज भी कीमती है |

Parallax scrolling के फ़ायदे ?

अगर आपकी वेबसाइट पर parallax scrolling है तो यूज़र की जिज्ञासा बढ़ती है scroll करने की और यूज़र फिर हर चीज की गहराई को जानने के लिए उत्सुक रहता है |

इसके अलावा parallax scrolling से यूज़र को हम कुछ highlight चीजें दिखा सकते हैं जिससे यूज़र को रोकनें मे सहायता मिलती है |

Parallax scrolling के नुक़सान ?

दोस्तों कभी-कभी हम कुछ बेहतर करने के लिए कुछ चीजों को पीछे छोड़ देते हैं जिसमें से एक सबसे ख़ास चीज है पेज की स्पीड या बोल सकते हैं वेबसाइट की स्पीड |

वेबसाइट की स्पीड होना ज़रूरी है क्योंकि गूगल पर उन वेबसाइटों के लिए जगह कम है जिनकी स्पीड कम है क्योंकि आजकल का दौर फ़ास्ट है और इस दौर के साथ चलते-चलते गूगल के update आते हैं जिसमें से बड़ा update पेज स्पीड का है |

अगर आप वेबसाइट को आकर्षित बनाने के लिए Parallax scrolling का उपयोग कर रहे हैं तो ज़ाहिर है कि आपकी CSS या JS का साइज़ अधिक होगा जिससे पेज का loading टाइम अधिक होगा और वेबसाइट की स्पीड में कमीं देखनें को मिलेगी, इसलिए जितना हो सके पेज का साइज़ कम रखना चाहिए जिससे स्पीड बढ़ सके.

Conclusion

उम्मीद है दोस्तों Parallax Website Effect Using CSS का आर्टिकल आपको helpful लगा होगा और आपकी कुछ help हुई होगी | Parallax Website Effect Using CSS के आर्टिकल में आपनें सिखा की कैसे हम normal website को parallax से एक attractive website बना सकते हैं |

अगर आपको ये आर्टिकल helpful लगा हो तो इसे अपनें दोस्तों के साथ share जरुर करें और ताज़ा अपडेट पानें के लिए आप मेरे साथ social media से जुड़ सकते हैं |

धन्यवाद

Leave a Comment