त्यांनी पॅरलॅक्स इफेक्ट्स कधी वापरण्यास सुरुवात केली? पॅरलॅक्स इफेक्टचे वेगवेगळे क्षेत्र तयार करणे. पॅरलॅक्स समस्या

पॅरलॅक्स प्रभाव खूप आहे मनोरंजक तंत्र. स्क्रोल करताना पार्श्वभूमी प्रतिमासामग्रीपेक्षा हळू हलते, परिणामी 3D जागेचा भ्रम निर्माण होतो. IN हा धडाआम्ही साधे दाखवू आणि प्रभावी मार्गएक अद्भुत प्रभाव मिळवा.

चिन्हांकित करणे

हे तंत्र पार्श्वभूमी प्रतिमेच्या हालचालीचा वेग नियंत्रित करण्यावर आधारित आहे. चला तयार करूया HTML मार्कअप, "डेटा-प्रकार" आणि "डेटा-स्पीड" या विशेषता असलेले दोन विभाग आहेत. गुणधर्मांचा उद्देश थोड्या वेळाने प्रकट होईल:

डेटा-टाइप आणि डेटा-स्पीड विशेषता असलेले टॅग तुम्हाला तुमचा मार्कअप सोपा आणि स्पष्ट करू देतात.

तपशीलानुसार, डेटापासून सुरू होणारी कोणतीही विशेषता खाजगी डेटा स्टोरेज म्हणून गणली जाईल. याव्यतिरिक्त, त्यांचा टेम्पलेटवर कोणताही प्रभाव पडत नाही.

आम्हाला पार्श्वभूमी प्रतिमांचा स्क्रोलिंग वेग नियंत्रित करण्याची आवश्यकता असल्याने, ते मुख्य पॅरामीटर्सआम्ही data-type="background" आणि data-speed="10" वापरू.

मग आपण प्रत्येक टॅगमध्ये एक टॅग जोडू.

निरपेक्ष स्थितीसाधा लंबन प्रभाव

आम्ही टॅगची पार्श्वभूमी त्याच्या सामग्रीपेक्षा हळू स्क्रोल करू, म्हणजे . यामुळे पॅरलॅक्सचा भ्रम निर्माण होतो.

CSS

jQuery जादूवर जाण्यापूर्वी, CSS कोडमधील प्रत्येक घटकामध्ये पार्श्वभूमी प्रतिमा जोडूया.

#home (पार्श्वभूमी: url(home.jpg) 50% 0 पुनरावृत्ती निश्चित; किमान-उंची: 1000px; ) #about (पार्श्वभूमी: url(about.jpg) 50% 0 नाही-पुनरावृत्ती किमान-उंची: 1000px; )

आणि आमच्या डेमो पृष्ठाच्या उर्वरित घटकांसाठी शैली परिभाषित करूया.

#home (पार्श्वभूमी: url(home-bg.jpg) 50% 0 पुनरावृत्ती निश्चित; किमान-उंची: 1000px; उंची: 1000px; समास: 0 स्वयं; रुंदी: 100%; कमाल-रुंदी: 1920px; स्थिती: सापेक्ष; ) #मुख्य लेख (उंची: 458px; स्थिती: परिपूर्ण; मजकूर-संरेखित: केंद्र; शीर्ष: 150px; रुंदी: 100%; ) #about (पार्श्वभूमी: url(about-bg.jpg) 50% 0 पुनरावृत्ती निश्चित; किमान-उंची : 1000px; कमाल-रुंदी: 0 0 50px बॉक्स- छाया: 0,0,0,0.8 #लेख स्थिती: मजकूर-संरेखित: शीर्षस्थानी: 100%;

जादूचा कोड

आम्ही jQuery वापरतो. चला सुरुवात करूया मानक पद्धत document.ready() पृष्ठ लोड केले आहे आणि हाताळणीसाठी तयार आहे याची खात्री करण्यासाठी.

$(दस्तऐवज).तयार(फंक्शन())( ));

आता आपल्याला लक्ष देण्याची गरज आहे. येथे घडणारी पहिली गोष्ट म्हणजे पृष्ठावरील data-type="background" विशेषता असलेल्या सर्व घटकांद्वारे पुनरावृत्ती करणे.

$(document).ready(function())( $("section").each(function())( var $bgobj = $(हे); // ऑब्जेक्ट नियुक्त करा ));

.each() फंक्शनमध्ये आपण दुसरे function.scroll() जोडू, ज्याला स्क्रोलिंग सुरू झाल्यावर म्हणतात.

$(विंडो).स्क्रोल(फंक्शन () (

वापरकर्त्याने पृष्ठ किती वेळ स्क्रोल केले हे निर्धारित करणे आवश्यक आहे आणि नंतर डेटा-स्पीड विशेषतामध्ये परिभाषित केलेल्या मूल्याद्वारे परिणामी मूल्य विभाजित करणे आवश्यक आहे.

Var yPos = -($window.scrollTop() / $bgobj.data("स्पीड"));

$window.scrollTop() - वरून वर्तमान स्क्रोल मूल्य मिळवा. $bgobj.data("स्पीड") मार्कअपमधील डेटा-स्पीड गुणधर्माचा संदर्भ देते. yPos हे अंतिम मूल्य आहे जे स्क्रोलिंगसाठी वापरले जाते. तथापि, नकारात्मक मूल्य वापरले जाते कारण पार्श्वभूमी येथे हलविली जाते उलट दिशावापरकर्ता स्क्रोलिंगशी संबंधित.

आमच्या उदाहरणात, डेटा-स्पीड विशेषता 10 वर सेट केली आहे. समजू की ब्राउझर विंडो 57px स्क्रोल करते. याचा अर्थ 57px ला 10 = 5.7px ने भागले आहे.

// पार्श्वभूमी स्थिती गोळा करा var coords = "50%" + yPos + "px"; // पार्श्वभूमी हलवा $bgobj.css(( backgroundPosition: coords ));

आता आपल्याला सर्व डेटा एका मूल्यामध्ये गोळा करणे आवश्यक आहे. जतन करण्यासाठी क्षैतिज स्थितीपार्श्वभूमी स्थिर आहे, आम्ही त्याच्या xPosition गुणधर्मासाठी 50% मूल्य वापरतो. मग आम्ही yPosition गुणधर्माचे मूल्य म्हणून yPos जोडतो आणि नंतर पार्श्वभूमीला निर्देशांक नियुक्त करतो: $bgobj.css(( backgroundPosition: coords )); .

अंतिम कोड असे दिसेल:

$(document).ready(function())( $("section").each(function())( var $bgobj = $(हे); // ऑब्जेक्ट असाइन करा $(window).scroll(function() ( var yPos = -($window.scrollTop() / $bgobj.data("स्पीड")); // पार्श्वभूमी निर्देशांक एकत्र ठेवा var coords = "50%" + yPos + "px"; // पार्श्वभूमी हलवा $bgobj.css (पार्श्वभूमी स्थिती: कॉर्ड्स ));

IE साठी क्लिप

एक गोष्ट शिल्लक आहे: IE च्या जुन्या आवृत्त्या प्रदर्शित आणि टॅग करू शकत नाहीत. निराकरण करणे सोपे आहे; आम्ही एक मानक घटक निर्मिती उपाय वापरू जे जादुईपणे ब्राउझरला HTML5 टॅग ओळखण्यास भाग पाडेल.

// IE document.createElement("लेख") साठी घटक तयार करा; document.createElement("विभाग");

याव्यतिरिक्त आम्ही फाइल वापरतो css रीसेट कराजेणेकरून सर्व ब्राउझर पृष्ठ तशाच प्रकारे प्रदर्शित करतील.

हा लेख कसा ते दाखवतो CSS वापरूनशुद्ध CSS वापरून साइटवर पॅरॅलॅक्स प्रभाव निर्माण करण्यासाठी 3D सह परिवर्तन आणि हाताळणी.

पॅरलॅक्स जवळजवळ नेहमीच तयार केले जाते JavaScript वापरूनआणि, बऱ्याचदा, स्क्रोल इव्हेंटमध्ये श्रोत्यांना संलग्न केल्यामुळे, DOM मध्ये थेट बदल केल्यामुळे आणि अनावश्यक पुनर्रचना आणि पुनर्रचना ट्रिगर केल्यामुळे ते संसाधन-केंद्रित असल्याचे दिसून येते. ब्राउझर ज्या प्रवाहात पृष्ठ रेंडर करतो त्या प्रवाहासह हे सर्व असिंक्रोनसपणे घडते, म्हणूनच स्क्रोलिंग मंद होऊ लागते आणि चित्राचे तुकडे होतात. अधिक योग्य अंमलबजावणीपॅरॅलॅक्स स्क्रोलिंग ट्रॅक करतो आणि डिफर्ड वापरतो DOM अद्यतनेविनंती ॲनिमेशन फ्रेम वापरून. परिणाम गुणात्मकदृष्ट्या भिन्न आहे, परंतु JavaScript पूर्णपणे काढून का नाही?

पॅरॅलॅक्स इफेक्ट CSS वर हलवल्याने तुम्हाला कार्यप्रदर्शन समस्या आणि अनावश्यक हाताळणीपासून वाचवले जाते, ज्यामुळे ब्राउझरला सर्व काही स्वतःचे नियमन करता येते. हार्डवेअर प्रवेग. परिणामी, जवळजवळ सर्व संसाधन-केंद्रित प्रक्रिया थेट ब्राउझर इंजिनद्वारे हाताळल्या जातात. फ्रेम दर (FPS) स्थिर राहते आणि चित्र गुळगुळीत होते. तसेच, तुम्ही इतर CSS वैशिष्ट्यांसह पॅरॅलॅक्स ताबडतोब एकत्र करू शकता - मीडिया क्वेरी किंवा समर्थन. प्रतिसादात्मक लंबन - ते काय आहे?

सिद्धांत ही यंत्रणा कशी कार्य करते हे समजून घेण्यापूर्वी, आवश्यक मार्कअप तयार करूया:

... ... ...
आणि मूलभूत शैली:

पॅरालॅक्स ( दृष्टीकोन: 1px; उंची: 100vh; ओव्हरफ्लो-x: लपविलेले; ओव्हरफ्लो-y: ऑटो; ) .पॅरॅलॅक्स__लेयर (स्थिती: परिपूर्ण; शीर्ष: 0; उजवीकडे: 0; तळ: 0; डावीकडे: 0; ) .पॅरलॅक्स__लेयर- -बेस ( ट्रान्सफॉर्म: ट्रान्सलेटझेड(0); ) .पॅरलॅक्स__लेयर--बॅक ( ट्रान्सफॉर्म: ट्रान्सलेटझेड(-1px); )
सर्व जादू पॅरलॅक्स वर्गात घडते. उंची आणि दृष्टीकोन शैली गुणधर्म परिभाषित केल्याने घटकाचा दृष्टीकोन त्याच्या मध्यभागी सेट होईल, एक निश्चित 3D व्ह्यूपोर्ट तयार होईल. ओव्हरफ्लो-वाय: घटकाच्या आतील सामग्रीला ऑटो सामान्यपणे स्क्रोल करण्यास अनुमती देईल, तर घटकाचे वंशज एका निश्चित दृष्टीकोनाशी संबंधित रेखाटले जातील. पॅरलॅक्स इफेक्ट तयार करण्याची ही गुरुकिल्ली आहे.

पुढे, parallax__layer वर्ग. नावाप्रमाणेच, ते कंटेंट लेयर परिभाषित करते ज्यावर पॅरलॅक्स प्रभाव लागू केला जाईल. या वर्गासह एक घटक सामग्रीच्या सामान्य प्रवाहातून बाहेर काढला जातो आणि त्याचे कंटेनर भरण्यासाठी स्थान दिले जाते.

शेवटी, आमच्याकडे parallax__layer--base आणि parallax__layer--back modifier वर्ग आहेत. पॅरॅलॅक्स घटकांच्या स्क्रोलिंग गतीचे नियमन करण्यासाठी, त्यांना Z अक्षाच्या बाजूने हलवण्यासाठी (त्यांना काढून टाकणे किंवा त्यांना व्ह्यूपोर्टच्या जवळ आणणे) आवश्यक आहे. संक्षिप्ततेसाठी, मी फक्त दोन स्क्रोल गती केली - आम्ही नंतर आणखी काही जोडू.

डेप्थ करेक्शन पॅरॅलॅक्स इफेक्ट 3D ट्रान्सफॉर्मेशन्सद्वारे तयार केल्यामुळे, Z अक्षाच्या बाजूने घटक हलवण्यामुळे घटक व्ह्यूपोर्टच्या जवळ किंवा पुढे आहे की नाही यावर अवलंबून त्याचा आकार बदलण्याचा दुष्परिणाम होतो. याचे निराकरण करण्यासाठी, आम्हाला स्केल() परिवर्तन लागू करणे आवश्यक आहे जेणेकरून घटक त्याच्या मूळ आकारात काढला जाईल:

Parallax__layer--back ( transform: translateZ(-1px) स्केल(2); )
सूत्र 1 + (translateZ * -1) / परिप्रेक्ष्य) वापरून स्केलिंग गुणांक मोजला जाऊ शकतो. उदाहरणार्थ, जर व्ह्यूपोर्ट दृष्टीकोन 1px वर सेट केला असेल आणि आम्ही Z अक्षावर -2px ने घटक ऑफसेट केला, तर घटक स्केल(3) असेल.

पॅरलॅक्स__लेयर--खोल ( ट्रान्सफॉर्म: ट्रान्सलेटझेड(-2px) स्केल(3); )

लेयर स्पीड लेयर स्पीड हे परिप्रेक्ष्य आणि Z ऑफसेट व्हॅल्यूजच्या संयोजनाद्वारे नियंत्रित केले जाते, जे पॉझिटिव्ह Z व्हॅल्यू असलेल्या घटकांपेक्षा हळू स्क्रोल होईल. मूल्य आणि 0 मधील फरक जितका जास्त असेल तितका पॅरलॅक्स प्रभाव अधिक स्पष्ट होईल.
(म्हणजे translateZ(-10px) translateZ(-1px) पेक्षा हळू स्क्रोल करेल पॅरलॅक्स इफेक्टचे वेगवेगळे विभाग तयार करणे मागील उदाहरणांनी वापरण्याचे मूलभूत तंत्र दाखवले साधी सामग्री, परंतु बहुतेक पॅरॅलॅक्स साइट वेगवेगळ्या प्रभावांसह पृष्ठास वेगवेगळ्या विभागांमध्ये विभाजित करतात. आमच्या पद्धतीत ते कसे अंमलात आणायचे ते येथे आहे.

प्रथम, आमचे स्तर एकत्र गटबद्ध करण्यासाठी आम्हाला parallax__group घटकाची आवश्यकता आहे:

... ... ...
त्यासाठी CSS असे दिसेल:

पॅरालॅक्स__ग्रुप (स्थिती: सापेक्ष; उंची: 100vh; ट्रान्सफॉर्म-शैली: संरक्षित-3d; )
या उदाहरणात, मला प्रत्येक गटाने व्ह्यूपोर्ट भरायचे आहे, म्हणून मी उंची निर्दिष्ट करतो: 100vh , जरी आवश्यक असल्यास प्रत्येक गटासाठी संख्या भिन्न असू शकते. transform-style: preserve-3d हे ब्राउझरला parallax__layer घटकांना सपाट होण्यापासून प्रतिबंधित करते आणि स्थिती: सापेक्ष चाइल्ड पॅरॅलॅक्स__लेयर घटकांना त्यांच्या गटाच्या सापेक्ष स्थितीत ठेवण्यास अनुमती देते.

लक्षात ठेवण्याचा एक महत्त्वाचा नियम हा आहे की घटकांचे गटबद्ध करताना, आम्ही गटातील सामग्री ट्रिम करू शकत नाही, कारण ओव्हरफ्लो: पॅरालॅक्स__ग्रुप घटकावर लपलेले संपूर्ण पॅरलॅक्स इफेक्ट खंडित करेल. काटछाट न केलेल्या सामग्रीमुळे बाल घटक मर्यादेबाहेर पसरतील. म्हणून, वापरकर्ता साइट स्क्रोल करत असताना सामग्री लपविली जाईल आणि योग्यरित्या दर्शविली जाईल याची खात्री करण्यासाठी तुम्हाला गटाच्या z-इंडेक्स मूल्यासह खेळण्याची आवश्यकता आहे.

हार्ड किंवा नाहीत द्रुत नियमस्तरांसह कार्य करण्याबद्दल आणि विविध पद्धतीभिन्न अंमलबजावणी सूचित करा. परंतु स्तरांची स्थिती डीबग करणे सोपे करण्यासाठी, आपण गट घटकांचे एक साधे परिवर्तन लागू करू शकता:

पॅरालॅक्स__ग्रुप ( ट्रान्स्फॉर्म: translate3d(700px, 0, -800px) rotateY(30deg); )
एक नजर टाका पुढील उदाहरणआणि डीबग चेकबॉक्सकडे लक्ष द्या!

| 29.09.2014

शुभ दुपार, प्रिय वाचकांनो! आमचे आजचे रेटिंग, ज्यामध्ये 10 ठिकाणांचा समावेश आहे, सामान्य साइटसाठी नाही. या टॉप 10 यादीतील साइट्समध्ये एक आहे सामान्य वैशिष्ट्य- पॅरलॅक्स प्रभाव.

विशेषत: ज्यांना ते काय आहे हे अद्याप माहित नाही त्यांच्यासाठी, आम्ही या प्रभावाबद्दल थोडक्यात बोलू, ज्याने आधीच वेगवान गती प्राप्त करण्यास सुरुवात केली आहे आणि वेब डिझाइनच्या क्षेत्रात वाढत्या प्रमाणात लोकप्रिय होत आहे.

तर, पॅरॅलॅक्स इफेक्ट, किंवा पॅरॅलॅक्स स्क्रोलिंग, हे एक विशेष तंत्र आहे ज्यामध्ये पार्श्वभूमीच्या दृष्टीकोनातील वस्तू अग्रभागातील वस्तूंपेक्षा हळू हलतात. यामुळे, एक 3D प्रभाव तयार केला जातो, त्रिमितीय जागेची भावना दिसून येते. पॅरलॅक्स स्क्रोलिंग - उत्तम मार्गएका पानाच्या वेबसाइटवर फ्लेअर जोडा, इन्फोग्राफिक मसालेदार करा, कथा सांगा किंवा पोर्टफोलिओ दाखवा. आणि काही कामे आधुनिक डिझाइनरपूर्ण आत्मविश्वासाने कलाकृती म्हणता येईल... तथापि, शंभर वेळा ऐकण्यापेक्षा एकदा पाहणे चांगले आहे - आमच्या शीर्ष 10 साइट पहा आणि स्वतःसाठी पहा!

कृपया लक्षात ठेवा: पॅरॅलॅक्स स्क्रोलिंगसह काही साइट्स अनेक प्रभावांमुळे संसाधन-केंद्रित असू शकतात, त्यामुळे “मंदी” नाकारता येत नाही काही संगणकआणि पोर्टेबल उपकरणे.

पकडा आणि जा

आमच्या रँकिंगमध्ये दहावे स्थान ग्रॅब अँड गो वेबसाइटने व्यापले आहे, जेथे पॅरालॅक्स इफेक्टचा वापर चित्र सजवण्यासाठी आणि सजीव करण्यासाठी केला जातो. तुम्ही कर्सर हलवताच, घरे आणि झाडे एकाच वेळी कशी हलतात ते तुम्ही पाहू शकता. पार्श्वभूमी. सहमत, या उत्साहामुळे, साइट अभ्यागतांना अधिक चांगल्या प्रकारे लक्षात ठेवण्याची शक्यता आहे.

डिजिटलहँड्स

डिजीटलहँड्स, 9व्या क्रमांकावर आहे, ते सुंदरपणे उभे राहण्यासाठी आणि अभ्यागतांसाठी संस्मरणीय होण्यासाठी पॅरलॅक्स इफेक्ट देखील वापरते. तुमचा माउस कर्सर हलवा आणि विशेष प्रभावाचा आनंद घ्या.

मॅडवेल

न्यूयॉर्क-आधारित क्रिएटिव्ह एजन्सी मॅडवेल येथे आपला पोर्टफोलिओ प्रदर्शित करते मुख्यपृष्ठसाइट, कुशलतेने पॅरॅलॅक्स प्रभाव वापरून. 3D भावना वापरकर्त्याला संपूर्ण स्क्रोलिंग वेळेत सोडत नाही.

ओकले

कोणत्याही उत्पादनाचे योग्य सादरीकरण आवश्यक असते. ओकले स्टोअर वेबसाइट एअरब्रेक एमएक्स गॉगल्सचे फायदे प्रदर्शित करण्यासाठी पॅरालॅक्स स्क्रोलिंग वापरते. हे खूपच प्रभावी आणि माहितीपूर्ण ठरले, कारण उत्पादने फक्त स्क्रोल वापरून सर्व बाजूंनी पाहिली आणि अभ्यासली जाऊ शकतात.

आपले बनवामनी मॅटर

काही लोक वैयक्तिक वित्त विषयाबद्दल चिंतित नाहीत. मेक युवर मनी मॅटर वेबसाइट, ज्याने आमच्या रँकिंगमध्ये 6 वे स्थान मिळवले, प्रवेशयोग्य फॉर्मदर्शकांना क्रेडिट युनियनचे फायदे प्रकट करतात आणि बँकांच्या तोट्यांबद्दल बोलतात. येथे तुम्ही कॅल्क्युलेटर वापरू शकता जे ग्राहकांच्या गुंतवणुकीतून बँकांना किती नफा मिळतो हे दर्शवेल आणि पिन कोडद्वारे क्रेडिट कोऑपरेटिव्हच्या शाखा देखील शोधू शकता.

स्पेस सुई

तुम्हाला जमिनीपासून १८४ मीटर उंचीवरून सिएटल एक्सप्लोर करायला आवडेल का? स्पेस नीडल वेबसाइट तुम्हाला वर घेऊन जाईल आभासी चालणेशहराच्या सर्वात ओळखल्या जाणाऱ्या खुणाद्वारे - स्पेस नीडल टॉवर, ज्याचा इंग्रजीमधून अनुवादित अर्थ आहे “स्पेस सुई”. 184 मीटर उंच, 42 मीटर रुंद आणि 9,550 टन वजनाचा हा टॉवर 320 किमी/तास वेगाने वाऱ्यासह चक्रीवादळ आणि 9.1 तीव्रतेपर्यंतच्या भूकंपांना तोंड देऊ शकतो. याव्यतिरिक्त, टॉवरमध्ये 25 लाइटनिंग रॉड आहेत. विशिष्ट वैशिष्ट्यस्पेस नीडल हे १५९ मीटर उंचीवर एक निरीक्षण डेक आहे, स्कायसिटी रेस्टॉरंट आणि भेटवस्तूंचे दुकान आहे. त्याच्या शीर्षस्थानी आपण सिएटल, माउंट रेनियर, कॅस्केड पर्वत, एलियट बे आणि आसपासची बेटे पाहू शकता.

Peugeot Hybrid4 - ग्राफिक कादंबरी

सर्वात मोठी फ्रेंच ऑटोमेकर Peugeot ने Hybrid4 हायब्रिड ड्राइव्ह सिस्टीम एका ऐवजी असामान्य पद्धतीने सादर केली. आपल्या डोळ्यांसमोर एक रोमांचक कॉमिक उघडते (जे, तसे, ऑटोप्लेवर सेट केले जाऊ शकते), जिथे मुख्य पात्राचे कार्य गुप्त डेटा मिळवणे आणि अडचणीत न येता निघून जाणे आहे. ऑपरेशन यशस्वीरित्या पूर्ण करण्यासाठी, तिला चार दरम्यान स्विच करण्यास भाग पाडले जाते विविध मोड Peugeot Hybrid4 तंत्रज्ञानाचे अनुकरण करणाऱ्या हालचाली - कमाल कामगिरीआणि डायनॅमिझम (स्पोर्ट), ऑल-व्हील ड्राइव्ह आणि कमाल ट्रॅक्शन मोड (4WD), कार्यप्रदर्शन आणि अर्थव्यवस्था (ऑटो), शांत ऑपरेशन (ZEV).

द वॉकिंग डेड

तर, आम्ही आमच्या टॉप साइट्सच्या यादीत तिसऱ्या स्थानावर आलो आहोत, जे द वॉकिंग डेड प्रोजेक्टला जाते. मालिकेच्या असंख्य चाहत्यांना प्रामुख्याने स्वारस्य असलेली साइट तयार करताना “ द वॉकिंग डेड", HTML5, CSS3, JavaScript आणि अर्थातच, पॅरॅलॅक्स प्रभाव वापरला गेला. विकासकांनी हे सर्व तंत्रज्ञान एकत्रितपणे आणि सर्व प्लॅटफॉर्मवर कार्य करण्यासाठी उत्कृष्ट काम केले आहे. साइटमध्ये प्रवेश करताना आणि स्क्रोल करण्यास प्रारंभ करताना, वापरकर्त्याला कलाकार झोम्बीमध्ये कसे बदलले जातात याबद्दल कॉमिक बुक कथा पाहते.

एक अनोखा आणि अतुलनीय प्रकल्प, सोनीच्या “बी मूव्ह” मोहिमेचा एक भाग आहे, तो त्याच्या व्हॉल्यूम, गतिशीलता आणि विचारशीलतेने अगदी लहान तपशीलांपर्यंत प्रभावित करतो. तुम्हाला कदाचित सोनीच्या पेक्षा चांगले उत्पादन सादरीकरण सापडणार नाही. शब्दांची गरज नाही - फक्त खाली स्क्रोल करा आणि आनंद घ्या!

फ्लॅट वि. वास्तववाद

आणि शेवटी, आम्ही आमच्या रँकिंगमध्ये पहिल्या स्थानावर पोहोचलो, जे फ्लॅट वि. वास्तववाद ही टॅक्टोमधील परस्परसंवादी एजन्सीची उपज आहे. नेत्रदीपक ग्राफिक्ससह हा नवीन वर्षाचा प्रकल्प (आणि संगीताची साथ!) हा एक मनोरंजक बॅकस्टोरीसह लढाऊ शैलीचा एक मिनी-गेम आहे, जिथे दोन प्रकारच्या डिझाइनच्या प्रतिनिधींमध्ये संघर्ष आहे - वास्तववादी आणि सपाट. 2013 च्या उत्तरार्धात - 2014 च्या सुरुवातीच्या मुख्य होलिव्हरवर लक्ष केंद्रित केल्यामुळे, निर्माते योग्य होते: त्याच्या प्रकाशनानंतर, या प्रभावी कामामुळे त्वरित खळबळ उडाली आणि ब्लॉग आणि बातम्यांमध्ये चर्चेचा विषय बनला.

साइट विकसकांनी पॅरॅलॅक्स स्क्रोलिंग आणि HTML5 गेम एकत्र करण्यात व्यवस्थापित केले. “आम्ही हे सुनिश्चित करू इच्छितो की तुम्ही साइटवर सुरुवातीपासून शेवटपर्यंत स्क्रोल करत असताना, सर्वकाही सुरळीतपणे आणि विलंब न करता घडते. हे करण्यासाठी, आम्ही AJAX वापरला, ज्याने आम्हाला डेटा अपडेट करण्याची परवानगी दिली पार्श्वभूमी", एजन्सीचे क्रिएटिव्ह डायरेक्टर अलेजांद्रो लाझोस यांनी स्पष्ट केले. नवीन वर्षाच्या आधी 2013 च्या शेवटी हा प्रकल्प प्रेक्षकांसमोर सादर करण्यात आला. स्क्रोल करण्यासाठी सज्ज व्हा, बरीच रोमांचक सामग्री तुमची वाट पाहत आहे!

टीप: दुर्दैवाने, काही साइट वेळोवेळी त्यांचे डिझाइन बदलू शकतात.

पॅरलॅक्स (ग्रीक) बदल, बदल) हे निरीक्षकाच्या स्थानावर अवलंबून दूरच्या पार्श्वभूमीच्या संबंधात एखाद्या वस्तूच्या स्पष्ट स्थितीत बदल आहे. हा शब्द प्रामुख्याने खगोलशास्त्र आणि भूगर्भशास्त्रात नैसर्गिक घटनांसाठी वापरला गेला. उदाहरणार्थ, पाण्यामध्ये परावर्तित झाल्यावर स्तंभाच्या सापेक्ष सूर्याचे हे विस्थापन निसर्गात समांतर आहे.

वेब डिझाईनमध्ये, पॅरॅलॅक्स इफेक्ट किंवा पॅरॅलॅक्स स्क्रोलिंग हे एक विशेष तंत्र आहे जिथे दृष्टीकोनातील पार्श्वभूमी प्रतिमा अग्रभागातील घटकांपेक्षा हळू हलते. हे तंत्रज्ञान अधिक आणि अधिक वेळा वापरले जात आहे, कारण ते खरोखर प्रभावी आणि छान दिसते.

त्रिमितीय जागेचा हा प्रभाव अनेक स्तरांचा वापर करून प्राप्त केला जातो जे एकमेकांवर अधिभारित असतात आणि स्क्रोल करताना स्क्रोलिंगसह हलतात. वेगवेगळ्या वेगाने. या तंत्रज्ञानाच्या मदतीने केवळ कृत्रिमच नव्हे तर तयार करणे शक्य आहे त्रिमितीय प्रभाव, तुम्ही ते चिन्ह, प्रतिमा आणि इतर पृष्ठ घटकांवर लागू करू शकता.

पॅरलॅक्स इफेक्टचे तोटे

पॅरॅलॅक्सचा मुख्य तोटा म्हणजे साइटच्या कार्यक्षमतेसह समस्या. सर्व काही सुंदर आणि स्टायलिश दिसते, परंतु javascript/jQuery चा वापर, ज्याच्या मदतीने पॅरॅलॅक्स इफेक्ट तयार केला जातो, ते पृष्ठाचे वजन कमी करते आणि लोडिंग गती मोठ्या प्रमाणात कमी करते. यावर आधारित असल्यामुळे हे घडते जटिल गणना: जावास्क्रिप्टला स्क्रीनवरील प्रत्येक पिक्सेलची स्थिती नियंत्रित करावी लागते. काही प्रकरणांमध्ये, क्रॉस-ब्राउझर आणि क्रॉस-प्लॅटफॉर्म सुसंगततेसह समस्यांमुळे परिस्थिती आणखी गुंतागुंतीची आहे. बरेच विकासक कमाल दोन पृष्ठ घटकांवर पॅरॅलॅक्स प्रभाव वापरण्याची शिफारस करतात.

पर्यायी उपाय

CSS 3 च्या आगमनाने, कार्य थोडे सोपे झाले आहे. त्याच्या मदतीने, आपण खूप समान प्रभाव तयार करू शकता, जो संसाधनांच्या वापराच्या बाबतीत अधिक किफायतशीर असेल. मुख्य गोष्ट अशी आहे की साइटची सामग्री एका पृष्ठावर ठेवली जाते आणि CSS 3-संक्रमण पद्धती वापरून उपपृष्ठांद्वारे हालचाल होते. हे समान पॅरॅलॅक्स आहे, परंतु काही फरकांसह: वस्तुस्थिती अशी आहे की केवळ CSS 3 वापरून वेगवेगळ्या वेगाने हालचाल करणे अशक्य आहे. याशिवाय, हे मानकप्रत्येकाद्वारे समर्थित नाही आधुनिक ब्राउझर. त्यामुळे येथेही अडचणी येत आहेत.

निष्कर्ष

पॅरलॅक्स इफेक्ट लोकप्रिय असला तरी, वर नमूद केलेल्या समस्यांमुळे वेबसाइट तयार करताना प्रत्येकजण त्याचा वापर करण्याची घाई करत नाही. वरवर पाहता, तंत्रज्ञानामुळे निर्माण झालेल्या अडचणींवर मात करण्यासाठी फक्त वेळ लागतो. दरम्यान, हा पर्याय एक-पृष्ठ साइटवर वापरला जाऊ शकतो: अशा प्रकारे तो निश्चितपणे लक्षात ठेवला जाईल आणि वापरकर्ता टिकवून ठेवण्यास सक्षम असेल.

जावास्क्रिप्टमध्ये पॅरलॅक्स

• jQuery पॅरॅलॅक्स स्क्रोलिंग इफेक्ट - एक प्लगइन जे पॅरॅलॅक्स इफेक्टला माउस व्हीलच्या हालचालीशी जोडते
• स्क्रोलडेक - पॅरलॅक्स इफेक्ट तयार करण्यासाठी प्लगइन
• jParallax - पृष्ठ घटकांना पूर्णपणे स्थित स्तरांमध्ये बदलते जे माउसनुसार हलते

सर्व नमस्कार. आज मी तुम्हाला याबद्दल सांगणार आहे लहान स्क्रिप्टएक साधा लंबन प्रभाव तयार करण्यासाठी.

लेख लहान पण माहितीपूर्ण असेल, त्यामुळे सुमारे 15 मिनिटांत तुम्ही तुमच्या लँडिंग पेजवर पॅरलॅक्स जोडू शकाल. आपण हे जोडू इच्छित असल्यास मनोरंजक प्रभावसाइटवर, नंतर वाचा...

साइटवर पॅरलॅक्स प्रभाव काय आहे?

ते काय आहे ते आधी सांगू. तर, वेब डिझाइनमधील पॅरॅलॅक्स इफेक्ट हे एक तंत्र आहे ज्यामध्ये पार्श्वभूमी प्रतिमा त्याच्या वर असलेल्या घटकांपेक्षा हळू हलते. अधिक अनुभवी लोकांसाठी, मी एक आरक्षण करेन की आम्ही माऊस कर्सरला पॅरलॅक्स इफेक्ट "बाइंड" करणार नाही. चला फक्त पॅरलॅक्स बॅकग्राउंड बनवू. चला सुरुवात करूया.

वेबसाइटवर पॅरलॅक्स इफेक्ट कसा बनवायचा

तर, सर्व प्रथम आम्ही कनेक्ट करतो jquery लायब्ररी. नेहमीप्रमाणे, हेड टॅग दरम्यान:

आता, तुम्हाला सिंपल पॅरालॅक्स स्क्रोलिंग स्क्रिप्ट डाउनलोड आणि कनेक्ट करण्याची आवश्यकता आहे. मी ताबडतोब संकुचित आवृत्ती वापरण्याची शिफारस करतो, पासून अतिरिक्त सेटिंग्जस्क्रिप्टमध्ये हे करण्याची आवश्यकता नाही:

आता, कशावर लिहिण्याची गरज आहे ते शोधूया html पृष्ठ, जेणेकरून आमचा पॅरलॅक्स प्रभाव कार्य करेल.

स्मार्टलँडिंग लँडिंगची निर्मितीपृष्ठ

डेटा-लंबन="स्क्रोल"

Data-image-src="image/bg.png चा मार्ग"

कृपया लक्षात ठेवा की प्रतिमा हेडरमध्ये वापरून ठेवली नाही img टॅग, परंतु आपण ज्या कंटेनरमध्ये पॅरलॅक्स लागू करू इच्छितो त्या कंटेनरमध्ये थेट विशेषता म्हणून सेट केले आहे.

तत्वतः, आम्ही येथे समाप्त करू शकतो, परंतु आणखी काही शब्द:

• डायव्हमध्ये इतर कोणतेही घटक नसल्यास ज्यामध्ये आम्हाला पॅरॅलॅक्स प्रभाव लागू करायचा आहे, तर तुम्हाला त्याची उंची सेट करणे आवश्यक आहे, अन्यथा तुम्हाला काहीही दिसणार नाही.
• वापरले नाही तर अनुकूली डिझाइन, तुम्ही naturalWidth आणि naturalHeight विशेषता वापरून थेट html मध्ये इमेजची रुंदी आणि उंची सेट करू शकता.
• तुम्ही डेटा-स्थिती विशेषता वापरून प्रतिमा हलवू शकता. हे css मधील पार्श्वभूमी-स्थितीशी एकरूप आहे.

येथे तुम्ही इतर पर्याय शोधू शकता अधिकृत पृष्ठप्रकल्प, जे वर सूचित केले आहे.