কিভাবে একটি স্টাব পেজ করা যায়। আপনার যোগাযোগের তথ্য ছেড়ে দিন

একটি স্টাব হল একটি পৃষ্ঠা যা একটি সাইটে স্থাপন করা হয় যখন এটি একটি বা অন্য কারণে অনুপলব্ধ হয়। উদাহরণস্বরূপ, আপনি যখন সাইটের ডিজাইন চূড়ান্ত করছেন বা পরিবর্তন করছেন এবং এই সময়ে এটি অনুপলব্ধ বা কোনওভাবে ভুলভাবে প্রদর্শিত হয়। এই সময়ে একটি স্টাব পৃষ্ঠা স্থাপন করার পরামর্শ দেওয়া হবে, যার উপরে লেখা থাকবে যে সাইটটি রক্ষণাবেক্ষণের অধীনে রয়েছে।

চল শুরু করা যাক...

আমরা একটি ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট সহ একটি সাধারণ স্থানধারক তৈরি করব।

আসুন কম্পিউটারে একটি ফোল্ডার তৈরি করি যেখানে আমরা আমাদের স্টাবের জন্য প্রয়োজনীয় সমস্ত ফাইল রাখব।

এই ফোল্ডারে আমরা images নামে আরেকটি ফোল্ডার তৈরি করব। এতে আমরা আমাদের ব্যাকগ্রাউন্ড ইমেজ এবং সম্ভবত অন্যান্য ছবি রাখব যা কাজের সময় প্রয়োজন হতে পারে।

নোটপ্যাড++ প্রোগ্রাম খুলুন (বা অনুরূপ একটি, উদাহরণস্বরূপ নোটপ্যাড)। আমরা বানাই নতুন নথি. পরবর্তী - ফাইল - হিসাবে সংরক্ষণ করুন, স্টাব সহ আমাদের ফোল্ডারটি নির্বাচন করুন এবং index.html নামে নথিটি সংরক্ষণ করুন

এটি এখন আমাদের ফোল্ডারে থাকা উচিত:

আমাদের এডিটরে index.html ফাইলটি খুলুন (সেভ করার পর এটি আপনার জন্য উন্মুক্ত হবে)। এখন আমাদের নিশ্চিত করতে হবে যে এই ফাইলের এনকোডিং সঠিকভাবে সেট করা আছে। এটি করতে, "এনকোডিংস" মেনু আইটেমে যান এবং "কনভার্ট টু ইউটিএফ-৮" এ ক্লিক করুন

কাজ করার সময় দুর্ঘটনাক্রমে অর্জিত ফলাফল হারাতে না দেওয়ার জন্য, আমি কাজ করার সময় পর্যায়ক্রমে নথি সংরক্ষণ করার পরামর্শ দিই। এটি "ফাইল" মেনুতে বা কীবোর্ড শর্টকাট "Ctrl + S" দিয়ে করা যেতে পারে।

আমরা সম্পাদকে নিম্নলিখিত কোড লিখি:

যেকোনো ওয়েব পেজ এই ট্যাগগুলি নিয়ে গঠিত।

এখন আমাদের পৃষ্ঠায় একটি শিরোনাম যোগ করা যাক, কারণ এটি খুব সুন্দর হবে না যখন কেউ এটি খুলবে এবং ব্রাউজার ট্যাবের শিরোনামে index.html দেখতে পাবে (আপনি ব্রাউজারে পৃষ্ঠাটি খুলতে পারেন এবং দেখতে পারেন কি হয়)। এটি করার জন্য, এবং এর মধ্যে নিম্নলিখিত কোড যোগ করুন:

সাইট রক্ষণাবেক্ষণ অধীনে আছে

পটভূমির ছবি

এখন আমাদের স্থানধারকের জন্য একটি ব্যাকগ্রাউন্ড ইমেজ নির্বাচন করা যাক, এবং তারপর পৃষ্ঠা সম্পাদনায় ফিরে আসুন।

এটি করার জন্য, Google চিত্রগুলিতে যান এবং একটি আকর্ষণীয় ছবি সন্ধান করুন যা আমাদের পৃষ্ঠার পটভূমি হিসাবে কাজ করতে পারে। কমপক্ষে 1920 পিক্সেল প্রস্থের একটি চিত্র নির্বাচন করা গুরুত্বপূর্ণ যাতে আমাদের পৃষ্ঠাটি বড় স্ক্রিনে ভাল দেখায়। আমি সার্চ বারে প্রবেশ করলাম এবং একটি ছবি নির্বাচন করলাম।

ছবিটি পূর্ণ আকারে খুলুন এবং এটি আপনার ইমেজ ফোল্ডারে সংরক্ষণ করুন। তারপর আমরা এটির নাম পরিবর্তন করি। আসুন এটিকে বিজি বলি (ইমেজ ফরম্যাট সম্পর্কে ভুলবেন না, আমার ক্ষেত্রে এটি jpg)।

এখানে আমি কি কুড়ান. এটি শিকাগো শহরের একটি ছবি। আমার মতে, এটি সাইটের ব্যাকগ্রাউন্ড ইমেজের জন্য বেশ উপযুক্ত।

আমরা CSS শৈলী ব্যবহার করে পৃষ্ঠায় একটি পটভূমি চিত্র সংযুক্ত করি:

সাইট রক্ষণাবেক্ষণ অধীনে আছে

পাঠ্যটিতে একটি শিরোনাম এবং প্রকৃতপক্ষে পাঠ্যের একটি অনুচ্ছেদ থাকবে।

সাইট রক্ষণাবেক্ষণ অধীনে আছে

এখানে যা ঘটেছে:

এখন আমরা আমাদের পরিচিতি যোগ করব যাতে দর্শকরা আমাদের সাথে অবিলম্বে যোগাযোগ করতে পারে, এবং সাইটের কাজ শেষ না হওয়া পর্যন্ত অপেক্ষা না করে।

আসুন ফোন সহ 3 টি ব্লক যোগ করি, ইমেইলএবং স্কাইপ.

সাইটটি রক্ষণাবেক্ষণের অধীনে রয়েছে সাইটটি রক্ষণাবেক্ষণের অধীনে রয়েছে, পরে আবার চেক করুন!

সাইটটি বর্তমানে চলছে ইঞ্জিনিয়ারিং কাজ. অনুগ্রহ করে পরে ফিরে আসুন বা নিম্নলিখিত উপায়ে আমাদের সাথে যোগাযোগ করুন:

টেলিফোন: 333-33-33

ইমেইল: [ইমেল সুরক্ষিত]

স্কাইপ: admsite_ru

যা অবশিষ্ট থাকে তা হল শৈলী নিয়ে কাজ করা।

আসুন শিরোনামটি বড় করুন, এটিকে কেন্দ্রে সারিবদ্ধ করুন এবং এটিকে পর্দার কেন্দ্রের কাছাকাছি কমিয়ে দিন।

আসুন টেক্সট প্যারাগ্রাফের ফন্ট বিশ পিক্সেলে বৃদ্ধি করি এবং শিরোনাম থেকে একটি ছোট ইন্ডেন্ট তৈরি করি। আমরা পাঠ্যের নীচে একটি সীমানাও তৈরি করব, যা এটি পরিচিতি থেকে আলাদা করবে।

আসুন 3টি কলামে পরিচিতিগুলির সাথে ব্লক তৈরি করি, ফন্ট বাড়াই, প্রতিটি ব্লককে কেন্দ্রে সারিবদ্ধ করি এবং পাঠ্যের রঙ পরিবর্তন করি।

সাইটটি রক্ষণাবেক্ষণের অধীনে রয়েছে সাইটটি রক্ষণাবেক্ষণের অধীনে রয়েছে, পরে আবার চেক করুন!

সাইটটির বর্তমানে প্রযুক্তিগত কাজ চলছে। অনুগ্রহ করে পরে ফিরে আসুন বা নিম্নলিখিত উপায়ে আমাদের সাথে যোগাযোগ করুন:

টেলিফোন: 333-33-33

ইমেইল: [ইমেল সুরক্ষিত]

স্কাইপ: admsite_ru

ফলস্বরূপ, আমাদের কাছে একটি স্থানধারক পৃষ্ঠা রয়েছে যা আমরা সাইটটির প্রযুক্তিগত কাজ চলাকালীন ব্যবহার করতে পারি।

যখন একটি সাইট লঞ্চের অপেক্ষায় থাকে বা সংস্কারের অধীনে থাকে, তখন সাইটের দর্শকদের জানাতে হবে যে এটি খোলা হতে চলেছে৷ আর এই সমস্যার নিখুঁত সমাধান তৈরি করা অবতরণ পাতাযথাযথ নোটিশ সহ।

আধুনিক ওয়েব ডেভেলপমেন্ট টুলস যেমন বিকশিত হয়েছে, এই ধরনের পৃষ্ঠাগুলি থেকে বিবর্তিত হয়েছে সহজ পাতাআরও আকর্ষণীয় সমাধানে পাঠ্য সহ।

সাইটের জন্য এমন একটি স্থানধারক তৈরি করা দর্শকদের প্রত্যাশার মাত্রা বাড়ায়, যার ফলে তাদের মধ্যে আগ্রহ তৈরি হয়। সাধারণ বিজ্ঞপ্তি ছাড়াও, সাবস্ক্রিপশন ফর্ম এবং সন্নিবেশ দ্বারা আগ্রহী ব্যবহারকারীদের সম্পর্কে তথ্য সংগ্রহ করাও সম্ভব প্রতিক্রিয়া.

এই টিউটোরিয়ালে, আমরা একটি সাইটের জন্য এমন একটি স্টাব তৈরি করব, যাতে একটি সাবস্ক্রিপশন ফর্ম এবং একটি কাউন্টডাউন টাইমার থাকবে, যা কিথ উডের একটি jQuery প্লাগইন ব্যবহার করে প্রয়োগ করা হয়েছে।

পাঠের জন্য প্রয়োজনীয় উপকরণ:

• যেকোন ব্যাকগ্রাউন্ড ইমেজ
• সময় এবং ধৈর্য.

index.html - প্রধান প্রকল্প ফাইল

"js" ফোল্ডার – JavaScript/JQuery স্ক্রিপ্ট সহ ফোল্ডার

ফোল্ডার "img" - প্রকল্পের ছবি সহ ফোল্ডার

"সিএসএস" ফোল্ডার - প্রোজেক্ট স্টাইল শীট সহ ফোল্ডার (সিএসএস ফাইল)

চল শুরু করি

কাজের প্রথম পর্যায়ে স্টাইল শীট এবং jquery লাইব্রেরির প্রধান HTML ফাইলের সাথে সংযোগ স্থাপন করা হবে।
আমরা হেড ট্যাগের ভিতরে ফাইলগুলি অন্তর্ভুক্ত করি।

কাউন্টার সহ শীঘ্রই আসছে

এইচটিএমএল

আমাদের html ডকুমেন্টের জন্য মার্কআপ তৈরি করা যাক। সমস্ত পৃষ্ঠা উপাদান সনাক্তকারী "ধারক" সহ একটি div ট্যাগের ভিতরে থাকবে। এই ব্লকের ভিতরে আমাদের থাকবে হেডার, একটি কাউন্টার, একটি ফিডব্যাক ফর্ম এবং একটি ফুটার (কপিরাইট সহ নীচের ব্লক)।

আমাদের ওয়েবসাইট শীঘ্রই আসছে আমরা অসুবিধার জন্য ক্ষমাপ্রার্থী

আপনাকে অপেক্ষা করতে হবে...

এটি সম্পর্কে আমাকে বিস্তারিত পাঠান

কপিরাইট - 1stwebdesigner.com - 2014

লক্ষ্য করুন যে আমরা আইডি "কাউন্টার" খালি দিয়ে ডিভি রেখেছি। আমরা পরে এই আইডেন্টিফায়ারটিকে আমাদের jquery প্লাগইনের সাথে যুক্ত করতে এবং এতে CSS শৈলী যোগ করতে ব্যবহার করব।

সিএসএস

এখন আমাদের প্রজেক্টের জন্য একটি css ফাইল তৈরি করা যাক, যাতে সমস্ত স্টাইল থাকবে। প্রথমত, মূল উপাদানগুলির জন্য শৈলী যোগ করা যাক: বডি, h1, h2 এবং শনাক্তকারী "ধারক" সহ ব্লক। "ধারক" ব্লকের জন্য, আমরা শতকরা হিসাবে প্রস্থকে নির্দিষ্ট করি যাতে এটি ব্রাউজার উইন্ডোর আকারের উপর নির্ভর করে পরিবর্তিত হয়।

H1 ট্যাগের জন্য, একটি CSS3 রূপান্তর প্রয়োগ করুন, যা এটিকে X অক্ষ বরাবর 360 ডিগ্রি ঘোরানোর অনুমতি দেবে৷ আপনি এই সম্পত্তি সম্পর্কে আরও পড়তে পারেন৷

বডি (রঙ: #dadada; লাইন-উচ্চতা: 1.75; প্রস্থ: 100%; ব্যাকগ্রাউন্ড: url(../img/background.jpg) কেন্দ্র; ফন্ট-ফ্যামিলি: "ওপেন সানস"; ) h1,h2 (রং: # fff; লাইন-উচ্চতা: 1.16667; টেক্সট-সারিবদ্ধ: কেন্দ্র; টেক্সট-ট্রান্সফর্ম: বড় হাতের অক্ষর; পাঠ্য-ছায়া: 2px 2px 2px rgba(150,150,150,1); ) h1 ( হরফ-আকার: 43px; ফন্ট-ফ্যামিলি: মন্টসেরাট; -ওজন: 700; বর্ডার: 2px ড্যাশ করা #fff; মার্জিন-টপ: 50px; প্যাডিং: 10px; কার্সার: পয়েন্টার; -ওয়েবকিট-ট্রানজিশন: সব .8s সহজ; -moz-ট্রানজিশন: সব .8s সহজ; -o-ট্রানজিশন : all .8s ease; transition: all .8s ease; ) h1: hover ( -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o -ট্রান্সফর্ম: rotateX(360deg); ট্রান্সফর্ম: rotateX(360deg); ) h2 ( ফন্ট-আকার: 30px; ফন্ট-ওজন: 300; মার্জিন-টপ: 30px; ) .কন্টেইনার (প্রস্থ: 58%; মার্জিন: 40px অটো 0 ; ) .বিশদ বিবরণ ( মার্জিন-টপ: 30px; রঙ: #fff; পাঠ্য-সারিবদ্ধ: কেন্দ্র; পাঠ্য-ছায়া: 2px 2px 2px rgba(150,150,150,1); )

বোতাম,ইনপুট,টেক্সটেরিয়া (ফন্ট-আকার: 16px; সর্বোচ্চ-প্রস্থ: 100%; মার্জিন: 0; সীমানা-ব্যাসার্ধ: 0; উল্লম্ব-সারিবদ্ধ: বেসলাইন; -ওয়েবকিট-বক্স-সাইজিং: বর্ডার-বক্স; -মোজ-বক্স -সাইজিং: বর্ডার-বক্স; বক্স-সাইজিং: বর্ডার-বক্স; ) টেক্সটেরিয়া (ওভারফ্লো: স্বয়ংক্রিয়; উল্লম্ব-সারিবদ্ধ: শীর্ষ; ) ইনপুট, টেক্সটেরিয়া (ব্যাকগ্রাউন্ড: #6e6e6e; ব্যাকগ্রাউন্ড: rgba(169,169,169,0.3); সীমানা: 1px কঠিন #f4f4f4; রঙ: #fff; ফন্ট-ওজন: 700; অক্ষর-স্পেসিং: 1px; প্যাডিং: 12px; পাঠ্য-রূপান্তর: বড় হাতের অক্ষর; ) ইনপুট:ফোকাস, টেক্সটেরিয়া:ফোকাস ( রূপরেখা: 0; ) বোতাম: হোভার, বোতাম :focus,input:focus,input:hover (পটভূমি: #ff8721; রঙ: #fff; রূপরেখা: 0; ) বোতাম, ইনপুট ( -ওয়েবকিট-আদর্শ: বোতাম; কার্সার: পয়েন্টার; ) বোতাম, ইনপুট (পটভূমি: #ffab00 ; -ওয়েবকিট-ট্রানজিশন: সব .5s; -moz-ট্রানজিশন: সব .5s; ট্রানজিশন: সব .5s; ) .ফর্ম-ক্ষেত্র ( অবস্থান: আপেক্ষিক; )

পরবর্তী পদক্ষেপটি পাঠ্য ক্ষেত্রের জন্য একটি ক্রস-ব্রাউজার শৈলী তৈরি করা।

::-ওয়েবকিট-ইনপুট-প্লেসহোল্ডার ( রঙ: #fff; ) ::-moz-প্লেসহোল্ডার (রঙ: #fff; অস্বচ্ছতা: 1; )::-ms-ইনপুট-প্লেসহোল্ডার (রঙ: #fff; অস্বচ্ছতা: 1; ) .প্লেসহোল্ডার (রঙ: #ff; )

এখন আমাদের কাউন্টারের জন্য শৈলী তৈরি করা যাক। আমি আপনাকে মনে করিয়ে দিচ্ছি যে একটি HTML নথিতে এটি সনাক্তকারী "কাউন্টার" সহ একটি ডিভ ব্লকে অবস্থিত।

#counter ( margin-top: 28px; ) .countdown_section ( color: #dadada; প্রদর্শন: inline-block; font-size: 12px; text-align: center; width: 25%; letter-spacing: 1px; সীমানা-বাম : 1px ড্যাশেড #dadada; বর্ডার-রং: rgba(218,218,218,0.8); প্যাডিং: 42px 12px 28px; -ওয়েবকিট-বক্স-সাইজিং: বর্ডার-বক্স; -মোজ-বক্স-সাইজিং: বর্ডার-বক্স; বক্স-সাইজিং: বর্ডার -বক্স; টেক্সট-শ্যাডো: 2px 2px 2px rgba(150,150,150,1); টেক্সট-ট্রান্সফর্ম: বড় হাতের অক্ষর; ) .কাউন্টডাউন_বিভাগ:প্রথম-শিশু (বর্ডার-বাম: 0; ) .কাউন্টডাউন_অ্যামাউন্ট ( রঙ: #fff; প্রদর্শন: ব্লক; font-family: "Open Sans"; font-size: 60px; font-weight: 700; letter-spacing: normal; line-height: 1; )

এখন ফিডব্যাক ফর্মের জন্য শৈলী যোগ করা যাক। ফর্মের সর্বাধিক প্রস্থ হবে 610px এবং আমরা এই ফর্মের জন্য আপেক্ষিক অবস্থান নির্ধারণ করব (অবস্থান: আপেক্ষিক)। আসুন টেক্সট ব্লকের ডানদিকে একটি বার্তা পাঠাতে বোতামটি রাখুন এবং এর পরম অবস্থান নির্ধারণ করুন (অবস্থান: পরম)।

#subscribe ( সর্বোচ্চ-প্রস্থ: 610px; অবস্থান: আপেক্ষিক; মার্জিন: 20px স্বয়ংক্রিয় 0; ) #subscribe-form .form-field ( margin-right: 180px; ) #subcribe_email ( বর্ডার-ডান: 0; ) #subscribe-form .form-submit ( উচ্চতা: 50px; অবস্থান: পরম; ডান: 0; শীর্ষ: 0; প্রস্থ: 180px; ) #subcribe_email, #subscribe_submit (প্রস্থ: 100%; প্রদর্শন: ব্লক; উচ্চতা: 55px; )

এবং শেষে আমরা ফুটার ব্লকের উপাদানগুলির জন্য বৈশিষ্ট্য যোগ করব।

ফুটার ( ফন্ট-আকার: 13px; পাঠ্য-সারিবদ্ধ: কেন্দ্র; মার্জিন-টপ: 25px; পাঠ্য-রূপান্তর: বড় হাতের অক্ষর; পাঠ্য-ছায়া: 2px 2px 2px rgba(150,150,150,1); ) ফুটার a ( রঙ: #fff; )

আমাদের পৃষ্ঠাকে প্রতিক্রিয়াশীল করতে, আমরা মিডিয়া প্রশ্ন যোগ করব। আপনি এই সম্পত্তি সম্পর্কে আরও পড়তে পারেন (ইংরেজি)

@মিডিয়া শুধুমাত্র স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 720px) ( ফুটার (মার্জিন-নিচ: 40px; ) ) @media শুধুমাত্র স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 680px) ( .countdown_amount (font-size: 48px; ) ) @media শুধুমাত্র স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ: 540px) ( .এক-অর্ধেক ( প্রস্থ: 100%; ) .কাউন্টডাউন_বিভাগ ( প্যাডিং: 28px 6px 20px; ) #subcribe_email (সীমানা: 1px কঠিন #fff;) #subscribe-form . ( মার্জিন: 0 স্বয়ংক্রিয়; ডান: স্বয়ংক্রিয়; অবস্থান: স্ট্যাটিক; ) #subscribe-form .form-field ( মার্জিন: 0 0 14px; ) ) @media শুধুমাত্র স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 480px) ( h1 ( ফন্ট-আকার : 30px; ) h2(font-size: 25px;) .countdown_section ( সীমানা: কোনটি নয়; প্যাডিং: 20px 20px; font-size: 13px; টেক্সট-সারিবদ্ধ: কেন্দ্র; ) .countdown_amount ( font-size: 40px: dingpax; 0 10px 0; ) #counter(প্রস্থ: 30%; মার্জিন:0 স্বয়ংক্রিয়;) ) @media শুধুমাত্র স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 360px) ( h2(ফন্ট-সাইজ: 22px;) .কাউন্টডাউন_বিভাগ ( প্যাডিং: 21px 26px 21px 15px; ) .countdown_amount ( ফন্ট-আকার: 36px; ) )

আপনি যদি ব্রাউজারে পৃষ্ঠা প্রদর্শনটি পরীক্ষা করেন তবে এটি দেখতে এইরকম হওয়া উচিত:

JQuery

দয়া করে মনে রাখবেন যে আমরা একটি কাউন্টার প্রদর্শন করি না। এটি প্রদর্শিত করতে, আপনাকে ক্লোজিং বডি ট্যাগের আগে নিম্নলিখিত কোডটি যোগ করতে হবে। কিন্তু তার আগে, ফাইলটির পাথ উল্লেখ করে প্লাগইন ফাইলটি ডাউনলোড করুন।

তারপর আমাদের কাউন্টার প্রদর্শন করতে নিম্নলিখিত কোড যোগ করুন। আপনি আপনার ইচ্ছা অনুযায়ী মিটারের তারিখ পরিবর্তন করতে পারেন। "লঞ্চ ডেট" প্যারামিটারের ভিতরে পছন্দসই তারিখ নির্দিষ্ট করা যথেষ্ট।

.

উপসংহার

অভিনন্দন! আপনি এইমাত্র একটি দুর্দান্ত কাউন্টডাউন টাইমার পৃষ্ঠা তৈরি করেছেন৷ এই পৃষ্ঠাটি আপনাকে আপনার ভিজিটরকে আপনার সাইটের লঞ্চের তারিখ সম্পর্কে অবহিত করার অনুমতি দেবে এবং এটি হারাবে না।

আমি আশা করি আপনি এই পাঠটি উপভোগ করেছেন। আপনার মন্তব্য এবং প্রশ্ন ছেড়ে দিন, আমি সবসময় তাদের উত্তর খুশি.

আপনি যদি আপনার ওয়েবসাইটের একটি পুনঃডিজাইন করার পরিকল্পনা করেন, এটির নিয়মিত রক্ষণাবেক্ষণ করেন, বা একটি নতুন ওয়েব রিসোর্স চালু করেন, তাহলে এটি অত্যন্ত গুরুত্বপূর্ণ যে দর্শকদের একটি ফাঁকা পৃষ্ঠা দিয়ে অভ্যর্থনা জানানো হয় না। যারা সাইট ভিজিট করে তারা কি ঘটছে তার রহস্যে হারিয়ে যাবে, এবং এটি খুব ভাল নয়। ব্যবহারকারীদের যত্ন নেওয়া এবং একটি বিশেষ HTML পৃষ্ঠা ব্যবহার করে সাইটটি শীঘ্রই খোলার বা পুনরায় চালু করার বিষয়ে তাদের জানানো সর্বোত্তম। সাধারণ ভাষায়, এই জাতীয় পৃষ্ঠাকে "স্টাব" বলা হয়। এটির গুরুত্ব খুব কমই আঁচ করা যায়, বিশেষ করে যদি আপনি আপনার সাইট সম্পর্কে কথা বলতে চান এবং এটিকে একটু প্রচার করতে চান। দুই ধরনের স্টাব রয়েছে: এটি হয় একটি স্থির পৃষ্ঠা যা ব্যবহারকারীদের তাদের প্রয়োজনীয় তথ্য জানায়, অথবা একটি পৃষ্ঠা যা কৌতূহল জাগিয়ে তোলে এবং দর্শকদের বাধ্য করে, উদাহরণস্বরূপ, বিজ্ঞপ্তিগুলিতে সদস্যতা নিতে। আপনার ওয়েবসাইটের জন্য আকর্ষণীয় স্থানধারক তৈরি করতে FreelanceToday আপনাকে 10টি বিনামূল্যের HTML টেমপ্লেট অফার করে৷

হার্টবিট একটি সহজ এবং আড়ম্বরপূর্ণ HTML টেমপ্লেট। স্টার্ক একরঙা ব্যাকগ্রাউন্ড ইমেজ এবং কাউন্টডাউন টাইমার এই প্লাগইনটিকে ব্যবসায়িক ওয়েবসাইটের জন্য আদর্শ করে তোলে।

ওয়েবসাইট পিআর-এর জন্য মুন টেমপ্লেটটি দুর্দান্ত। পৃষ্ঠায় বেশ কয়েকটি পয়েন্ট রয়েছে যেখানে আপনি রাখতে পারেন গুরুত্বপূর্ণ তথ্যএবং কাউন্টডাউন টাইমার। পৃষ্ঠাটি প্রতিক্রিয়াশীল, এটি HTML5 এবং CSS3 ব্যবহার করে তৈরি করা হয়েছে, বেশিরভাগ ব্রাউজারে প্রদর্শিত হয় এবং এতে ভাল দেখায় মোবাইল ডিভাইস.

একটি স্টাইলিশ প্লেসহোল্ডার তৈরি করার জন্য লায়লা সেরা বিনামূল্যের HTML টেমপ্লেটগুলির মধ্যে একটি। ভালো রঙের স্কিম, সঠিক জাল এবং মার্জিত চেহারাফ্যাশন ওয়েবসাইটগুলিতে ব্যবহারের জন্য এই টেমপ্লেটটিকে আদর্শ করুন।

একটি কঠোর স্টাব তৈরি করার জন্য একটি দুর্দান্ত ক্রস-ব্রাউজার টেমপ্লেট৷ কাস্টমাইজ করা এবং মোবাইল ডিভাইসে ভালভাবে প্রদর্শন করা সহজ। একটি কাউন্টডাউন টাইমার এবং একটি সুর সংযোগ করার ক্ষমতা আছে।

এই টেমপ্লেট পরিষ্কার এবং আধুনিক নকশা. পেশাদাররা: অভিযোজিত নকশা, যোগাযোগ ফর্ম, ক্রস-ব্রাউজার সামঞ্জস্য। টেমপ্লেটটি সম্পদ ব্যবহার করে তৈরি করা হয়েছে, সমস্ত ছবি অন্তর্ভুক্ত করা হয়েছে।

একটি ভাল স্থানধারক যা পর্যটন ওয়েবসাইটগুলিতে উপযুক্ত হবে। টেমপ্লেট বৈশিষ্ট্য: 8 রঙের স্কিম, W3C HTML/CSS বৈধতা, কাউন্টডাউন, যোগাযোগ ফর্ম এবং বিজ্ঞপ্তিগুলিতে সদস্যতা নেওয়ার ক্ষমতা, পটভূমিতে প্যারালাক্স প্রভাব, নেভিগেশন বার।

গুরুতর কার্যকারিতা আছে যে একটি প্লাগ. টেমপ্লেটটি কাস্টমাইজ করা সহজ এবং বেশিরভাগ ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ। পেশাদাররা: Google মানচিত্র, কাউন্টডাউন টাইমার, বিভাগ যেখানে আপনি আপনার দল সম্পর্কে তথ্য পোস্ট করতে পারেন, যোগাযোগের তথ্য সহ ফুটার।

UX টেমপ্লেট বেশিরভাগ ওয়েবসাইটের জন্য উপযুক্ত। প্লাগটিতে একটি অ্যানিমেটেড টাইমার রয়েছে, যোগাযোগ ফর্ম, আইকন সামাজিক যোগাযোগ. টেমপ্লেটটি কাস্টমাইজ করা সহজ এবং HTML/CSS এর বিশেষ জ্ঞানের প্রয়োজন নেই। টেমপ্লেটটি প্রতিক্রিয়াশীল এবং ক্রস-ব্রাউজার।

আড়ম্বরপূর্ণ এবং একই সময়ে কার্যকরী প্লাগ. বৈশিষ্ট্য: 100% প্রতিক্রিয়াশীল ডিজাইন, ক্রস-ব্রাউজার সামঞ্জস্য, Google মানচিত্র, টুইটার ইন্টিগ্রেশন, প্যারালাক্স প্রভাব এবং স্লাইডার সহ দুটি হেডার শৈলী। এছাড়াও একটি কাউন্টডাউন টাইমার রয়েছে যেখানে আপনি দ্রুত সাইট লঞ্চের তারিখ সংশোধন করতে পারেন।

বিভিন্ন বিষয়ের ওয়েবসাইটের জন্য উপযুক্ত একটি মার্জিত HTML টেমপ্লেট। প্লাগটিতে কোনো বিশেষ ঘণ্টা বা হুইসেল নেই, তবে এতে আপনার প্রয়োজনীয় সবকিছু রয়েছে: টাইমার, কেন্দ্রীয় পাঠ্য ব্লকজন্য তথ্য বার্তা, সামাজিক নেটওয়ার্ক আইকন। টেমপ্লেটটি প্রতিক্রিয়াশীল এবং মোবাইল ডিভাইসে পুরোপুরি প্রদর্শন করে।

ইদানীং, অনেক নতুন সংস্থান ইন্টারনেটে উপস্থিত হচ্ছে: কিছু কিছু সম্প্রতি চালু হয়েছে, অন্যরা শুরু করতে চলেছে, এবং কেউ কেউ সবেমাত্র একটি অনলাইন স্টোর বা অন্য প্রকল্প তৈরি করা শুরু করেছে এবং এটি ছয় মাস বা এক বছরের মধ্যে চালু করার কথা ভাবছে৷

প্রোজেক্টের সমস্ত কার্যকারিতা সহ জন্মের আগেও কি কিছু বিপণন উপাদান ব্যবহার করা সম্ভব? নিঃসন্দেহে ! বিপণনের প্রথম ধাপগুলির মধ্যে একটি হল এমন একটি সাইটের ভিজিটরের সাথে যোগাযোগ করা যা এখনও স্টাব পেজ বা তথাকথিত স্প্ল্যাশ পেজ ব্যবহার করে কাজ করছে না।

অনেক লোক স্প্ল্যাশ পৃষ্ঠাগুলি ব্যবহার করে না, তাই সাইটে তাদের উপস্থিতি একটি সুবিধা এবং বিকাশের জন্য একটি প্রাথমিক প্রেরণা দেয়। যাইহোক, প্রতিটি প্লাগ সমানভাবে কার্যকরভাবে কাজ করবে না। কীভাবে সঠিক ল্যান্ডিং পৃষ্ঠা তৈরি করা যায় এবং ভবিষ্যতে একটি সম্ভাব্য শ্রোতা থাকাকালীন একটি প্রকল্প চালু করতে হয় তার কিছু টিপস নীচে দেওয়া হল৷

একটি কার্যকরী স্থানধারক পৃষ্ঠার নীতিগুলি৷

প্লেসহোল্ডারগুলি মূলত ল্যান্ডিং পৃষ্ঠা এবং কার্যকর ল্যান্ডিং পৃষ্ঠাগুলির অনেকগুলি নীতি তাদের ক্ষেত্রে প্রযোজ্য। আসুন সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলি ঘনিষ্ঠভাবে দেখি এবং কয়েকটি উদাহরণ দেখি।

1. একটি পৃষ্ঠা সরলীকরণের সীমা জানুন

একদিকে, পৃষ্ঠাটি যতটা সম্ভব সহজ হওয়া উচিত। কিন্তু সাইটটি উন্নয়নাধীন রয়েছে এমন একটি বার্তা ছেড়ে দেওয়া ভুল হবে।

দর্শনার্থীর একটি যৌক্তিক প্রশ্ন রয়েছে: আমি কোথায় গিয়েছিলাম এবং কেন আমাকে এই বা সেই কাজটি করতে হবে যা আমাকে করতে বলা হয়েছে (উদাহরণস্বরূপ, ফোনে যোগাযোগ)। পৃষ্ঠাটিতে আরও কিছু তথ্য যোগ করুন, এটি দর্শক এবং আপনার উভয়ের জন্য যতটা সম্ভব উপযোগী করে তোলে।

2. নিজের সম্পর্কে তথ্য প্রদান করুন

দর্শনার্থীকে দেখান যে তিনি ঠিক যেখানে তার থাকা দরকার। তাকে বলুন কোথায় তিনি একটি ছোট টেক্সট ব্যবহার করছেন এবং বুলেটযুক্ত তালিকা. এটি আপনার প্রথমবার একজন ব্যক্তির সাথে দেখা, আপনি সাধারণত কোথা থেকে শুরু করেন?

3. আপনি একটি ভিডিও পর্যালোচনা করতে পারেন

কিছু সাইট ভিডিও পর্যালোচনা পোস্ট করার অনুশীলন করে। এই ভাল পথআপনি কিভাবে ভিজিটরের জন্য উপযোগী হতে পারেন সে সম্পর্কে আরও স্পষ্টভাবে বলুন।

ভিডিও পর্যালোচনা একটি ভাল টুল, কিন্তু ওভারবোর্ড যেতে না. ভিডিও বা অডিও প্রভাবগুলি স্বয়ংক্রিয়ভাবে চালু করে আপনার দর্শকদের বিরক্ত করা একটি ভুল হবে, যদি না, অবশ্যই, আপনার ভবিষ্যতের সাইটটি অনলাইন গেমগুলির জন্য উত্সর্গীকৃত হয়৷

4. আপনার শিল্পের সাথে যুক্ত একটি লোগো বা অন্যান্য চিত্র ব্যবহার করুন

আপনি সাইটে যে ছবিগুলি ব্যবহার করেন তা কোম্পানির কার্যকলাপের ক্ষেত্র বা প্রকল্পের বিষয়ের সাথে যুক্ত হওয়া উচিত। মহিলা এবং বিড়াল মহান, কিন্তু সবসময় উপযুক্ত নয়। একটি রেডিও ওয়েবসাইটের জন্য একটি অসম্পূর্ণ পৃষ্ঠা দেখতে এইরকম হতে পারে:

এবং এখানে ডিজাইনারের সৃজনশীলতা ভালভাবে প্রদর্শিত হয়েছে, যদিও এটি অবিলম্বে স্পষ্ট নয় যে সাইটটি ডিজাইনের জন্য উত্সর্গীকৃত হবে।

5. কি আশা করতে হবে আমাদের বলুন

এটা ভাল যে আপনি বিদ্যমান এবং ইন্টারনেট ব্যবহারকারীদের কাছাকাছি হওয়ার পরিকল্পনা করছেন, তবে আমাদের বলুন কেন লোকেরা পরে আপনার সাইটে ফিরে আসবে? প্রকল্প বা এর কার্যকারিতা জন্য আপনার পরিকল্পনা কি? অথবা হয়তো অন্য কিছু?

কৌতূহল জাগানোর জন্য চক্রান্ত যোগ করুন। উদাহরণস্বরূপ, একটি বার্তা ষড়যন্ত্র হিসাবে ব্যবহার করা যেতে পারে যে আপনার পরিষেবা একটি প্রযুক্তিগত অগ্রগতি হবে বা কোম্পানি প্রথম নিবন্ধিত গ্রাহকদের ডিসকাউন্ট বা বিনামূল্যে প্রদান করবে। অতিরিক্ত পরিষেবা. 2012 সালে বিশ্বের বহুল আলোচিত প্রান্তে 8p কনফারেন্সের আয়োজন করার আগে Netpeak-এর লোকেরা কীভাবে ষড়যন্ত্র তৈরি করেছিল তার একটি উদাহরণ নীচে দেওয়া হল৷ এই ধারণাটি অনেকের কাছে সৃজনশীল বলে মনে হয়েছিল, এবং তারা তাদের বন্ধুদের সাথে স্টাব পৃষ্ঠার লিঙ্কটি ভাগ করেছে৷ সামাজিক নেটওয়ার্কগুলিতে।

আপনাকে ষড়যন্ত্র তৈরি করতে হবে না, কেবল ব্যক্তিকে পরে ফিরে আসতে উত্সাহিত করুন। একটি ল্যান্ডিং পৃষ্ঠা শুধুমাত্র দর্শকদের জানানো উচিত নয়, তাদের বন্ধুদের সাথে পৃষ্ঠাটি শেয়ার করতে এবং ভবিষ্যতে ফিরে আসতে উত্সাহিত করা উচিত।

6. আপনার যোগাযোগের তথ্য ছেড়ে দিন

ভবিষ্যতের সাইটের বিষয়ের উপর নির্ভর করে, কখনও কখনও শুধুমাত্র একটি ইমেল ঠিকানা ছেড়ে দেওয়া উপযুক্ত, অন্যান্য ক্ষেত্রে - অফিসের প্রকৃত ঠিকানা এবং তার খোলার সময় সহ আরও বিস্তারিত তথ্য।

ভবিষ্যতে আপনাকে একটি সম্প্রদায় তৈরি করতে হবে। রেডিমেড টুলস - সোশ্যাল নেটওয়ার্কগুলি ব্যবহার করে এখনই এটি করুন৷ এই লিঙ্কগুলির উপস্থিতি সংস্থা এবং ভবিষ্যতের সাইটের উপর আস্থা বাড়াবে তা ছাড়াও, আপনার সম্প্রদায়ের অন্তর্ভুক্ত লোকেরা সর্বদা বিকাশের পর্যায়গুলি বা সংস্থান চালু করার খবর সম্পর্কে সচেতন থাকবে।

যাইহোক, না সামাজিক প্রোফাইলখালি, দরকারী সামগ্রী দিয়ে সেগুলি পূরণ করুন যাতে আপনার লক্ষ্য দর্শকদের সদস্যতা নেওয়ার কিছু থাকে। লোকেরা লো-অথরিটি অ্যাকাউন্ট, শূন্য-কর্তৃপক্ষের অ্যাকাউন্ট, বা স্ট্যান্ডার্ড অবতার সহ প্রোফাইল পছন্দ বা অনুসরণ করে না (টুইটারে ডিমের মতো)।

8. আপডেটের জন্য একটি সাবস্ক্রিপশন ফর্ম রাখুন

সামাজিক নেটওয়ার্ক ব্যবহার করার পাশাপাশি, ইমেল নিউজলেটার সংযুক্ত করুন। সংগ্রহ করুন ইমেইল ঠিকানাআপনার সম্ভাব্য দর্শক এখন. আপনি তাদের একটি বার্তা পাঠাতে পারেন শুধুমাত্র যখন সাইটটি চালু হয়, অথবা আপনি এটি নিয়মিত করতে পারেন, তাদের জানান যে উন্নয়নটি কোন পর্যায়ে রয়েছে বা আপনার বিষয়ের অন্য কিছু গুরুত্বপূর্ণ এবং অবশ্যই, যারা আপনাকে বিশ্বাস করেন তাদের জন্য দরকারী তাদের পরিচিতি, দিক।

ইমেল পাঠানোর ফর্ম ছাড়াও, আপনি ক্লায়েন্ট/শ্রোতাদের সাথে যোগাযোগের অন্যান্য চ্যানেল ব্যবহার করতে পারেন, উদাহরণস্বরূপ, একটি ব্লগ, এটি একটি সাবডোমেন বা সাবফোল্ডারে যোগ করা এবং সেখানে স্ট্যান্ডার্ড ওয়ার্ডপ্রেস ইনস্টল করা। সম্ভবত ভবিষ্যতে এই ব্লগটি কেবল একটি অন্তর্মুখী বিপণন সরঞ্জাম হিসাবে ইতিবাচক প্রভাব ফেলবে না, তবে অনুসন্ধান ইঞ্জিনগুলির দৃষ্টিতে সংস্থানের কর্তৃত্ব বাড়াতেও সহায়তা করবে৷

9. কর্মের জন্য একটি কল যোগ করুন

আপনার প্রথম লক্ষ্য হল একটি প্রাথমিক শ্রোতা তৈরি করা এবং সাইটটি লাইভ হয়ে গেলে লোকেদের ফিরে আসা। ব্যবহারকারীকে কর্মের জন্য কল করার মাধ্যমে, আপনি আপনার উদ্দেশ্যগুলিকে যোগাযোগ করেন এবং দর্শককে তাদের বিকল্পগুলির কথা মনে করিয়ে দেন। “সাবস্ক্রাইব করুন”, “প্রথমে দেখুন”, “ফিরে আসুন”, “আমাদের সাথে যোগাযোগ করুন”, “আমাদের সম্পর্কে আরও পড়ুন”, “সামাজিক নেটওয়ার্কে আমাদের অনুসরণ করুন”, ইত্যাদি। স্টাব পৃষ্ঠার আকারের উপর নির্ভর করে এক বা একাধিক কল টু অ্যাকশন ব্যবহার করুন। আপনি যদি কেবল লেখেন যে সাইটটি নির্মাণাধীন, তাহলে আপনার বর্তমান দর্শকদের মধ্যে কয়েকজন ভবিষ্যতে এটিতে ফিরে আসবে।

নীচের উদাহরণে, কল টু অ্যাকশনটি একটি তীর সহ উপরের ডানদিকে এবং আবার পৃষ্ঠার নীচে বিজ্ঞপ্তি সাবস্ক্রিপশন ফর্ম সহ অবস্থিত৷

10. সার্চ ইঞ্জিনের জন্য স্টাব পেজ অপ্টিমাইজ করবেন না

অবশ্যই, স্টাব পেজগুলি এসইও-এর জন্যও ভাল, যেহেতু আপনি একটি সাইট না রেখেও প্রচার শুরু করতে পারেন। সর্বনিম্নভাবে, সংস্থানটি ইতিমধ্যেই সূচকে থাকবে; সর্বাধিক, আপনি ইতিমধ্যেই ফোরামে বা সামাজিক নেটওয়ার্কগুলিতে এবং প্রিন্ট মিডিয়াতে উভয়ের লিঙ্ক পোস্ট করতে পারেন।

এবং যখন স্টাব পেজগুলি এসইও-এর জন্য ব্যবহার করা যেতে পারে, তারা একটি বিপণনের উদ্দেশ্যে আরও বেশি কাজ করে। এসইও টেক্সট সহ কোনও সংস্থানের প্রথম ছাপ নষ্ট না করার জন্য দৃঢ়ভাবে সুপারিশ করা হয়।

আমি আশা করি এই টিপস আপনাকে প্রোগ্রামারদের জন্য প্রযুক্তিগত বৈশিষ্ট্যগুলি পূরণ করতে সাহায্য করবে। অনুপ্রেরণার জন্য নীচে আরও দুটি উদাহরণ রয়েছে। :)

আপনার ধারণা নিয়ে আসুন এবং আজই একটি স্টাব পৃষ্ঠা সেট আপ করুন, যাতে আপনি যখন আপনার সাইটটি চালু করেন, তখন আপনাকে দর্শকের সন্ধান করতে হবে না, তবে এটির সাথে কাজ চালিয়ে যান!

একটি সুন্দর ওয়েবসাইট ভিজিটরের স্মৃতিতে অনেকদিন ধরে থাকে এবং এটি নিঃসন্দেহে চমৎকার। আজ আমরা আপনার সাইটের জন্য একটি বিস্ময়কর প্লাগ সম্পর্কে কথা বলতে চাই, যেমন একটি ইন্টারেক্টিভ অ্যানিমেটেড পৃষ্ঠা যা ক্রমাগত গতিশীল থাকবে, মাউস কার্সারকে সাড়া দেওয়া এবং ক্রিয়া সম্পাদন করা ছাড়াও। ধারণাটি হল একটি ভূমি এবং একটি বিমান তৈরি করা যা ক্রমাগত গ্লাইডিংয়ে থাকবে; যখন কার্সার চলে যাবে, তখন বিমানটি তার অবস্থান পরিবর্তন করবে। এই ধরনের ইন্টারেক্টিভ খুব শান্ত এবং আনন্দদায়ক দেখায়।

সূত্র

এই পৃষ্ঠাটি একটি ওয়েবসাইট ব্যাকগ্রাউন্ড, একটি ছোট পাঠ্য বার্তা সহ একটি পৃষ্ঠা বা একটি পৃষ্ঠায় একটি স্থানধারক হিসাবে ব্যবহার করা যেতে পারে; যে কোনও ক্ষেত্রে, আপনি ভুল করতে পারবেন না। এই প্রভাব jQuery-Three.js 3D লাইব্রেরির জন্য ধন্যবাদ অর্জন করা হয়েছে।

ধাপ 1. HTML

আমাদের মার্কআপ এবং স্টাইলগুলি বেশ সহজ হবে, যেহেতু Three.js সমস্ত কাজ করবে, এবং আমরা JS-এ যে প্যারামিটারগুলি নির্দিষ্ট করেছি, আমাদের যা করতে হবে তা হল id="world" বরাদ্দ করে এই ফাংশনগুলিকে কল করতে হবে:

শৈলীগুলিও বেশ সহজ, তাই আমরা সেগুলি নিয়ে থাকব না এবং সরাসরি পরবর্তী ধাপে চলে যাব।

ধাপ 2. JS

সমস্ত ইভেন্ট প্রক্রিয়াকরণ JS এবং Three.js দ্বারা সঞ্চালিত হবে। এই ধরনের একটি বিন্যাস বাস্তবায়নের জন্য, আমরা লুপিং, র্যান্ডম ইভেন্টের জন্য নিম্নলিখিত মানগুলি সেট করি।

var রং = ( লাল: 0xf25346, হলুদ: 0xedeb27, সাদা: 0xd8d0d1, বাদামী: 0x59332e, গোলাপী: 0xF5986E, বাদামী গাঢ়: 0x23190f, নীল: 0x68c, সবুজ: 508x508, সবুজ: 508x508, 50,50,500 , হালকা সবুজ: 0x62926 5, ); var দৃশ্য, ক্যামেরা, ফিল্ডঅফভিউ, আকৃতির অনুপাত, সমতলের কাছাকাছি, দূরের প্লেন, উচ্চতা, প্রস্থ, রেন্ডারার, ধারক; ফাংশন createScene() ( // স্ক্রিনের প্রস্থ এবং উচ্চতা পান // এবং // ক্যামেরার আকৃতির অনুপাত এবং রেন্ডারারের আকার সামঞ্জস্য করতে তাদের ব্যবহার করুন। HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // দৃশ্যটি তৈরি করুন। দৃশ্য = নতুন তিন . দৃশ্য(); // দৃশ্যটিতে একটি FOV কুয়াশা প্রভাব যুক্ত করুন। scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // একটি ক্যামেরার দৃষ্টিপাত তৈরি করুন = প্রস্থ / উচ্চতা; ফিল্ডঅফ ভিউ = 60 ; nearPlane = 1; farPlane = 10000; camera = new THREE. PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // ক্যামেরা অবস্থান camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // একটি রেন্ডারার রেন্ডারার তৈরি করুন = নতুন THREE.WebGLRenderer(( // ব্যাকগ্রাউন্ডকে স্বচ্ছ করুন, অ্যান্টি-আলিয়াসিং পারফরম্যান্স আলফা: সত্য, অ্যান্টিলিয়াস: সত্য)); // রেন্ডারারের আকার পূর্ণ পর্দায় সেট করুন renderer.setSize( WIDTH, HEIGHT); // শ্যাডো রেন্ডারিং রেন্ডারার সক্ষম করুন .shadowMap.enabled = true;//DOM এবং DIV ইভেন্ট কন্টেইনারে রেন্ডারার যোগ করুন = document.getElementById("world"); container.appendChild(renderer.domElement); // প্রতিক্রিয়াশীলতা window.addEventListener("রিসাইজ", handleWindowResize, false); ) // ফাংশন ফাংশনের প্রতিক্রিয়াশীলতা হ্যান্ডেলWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix () heightvarmis (); ছায়ার আলো; ফাংশন createLights() ( // রঙের গ্রেডিয়েন্ট আলো আকাশ, স্থল, তীব্রতা হেমিস্ফিয়ারলাইট = নতুন থ্রি. হেমিস্ফিয়ারলাইট(0xaaaaaa, 0x000000, .9) // সমান্তরাল রশ্মি শ্যাডোলাইট = নতুন থ্রি। ডিরেকশনাল লাইট(0xffposition.9), শ্যাডো সেট(0, 350, 350); shadowLight.castShadow = true; // প্রজেক্ট করা ছায়ার দৃশ্যমান এলাকা নির্ধারণ করুন shadowLight.shadow.camera.left = -650; shadowLight.shadow.camera.right = 650; shadowLight। shadow.camera.top = 650; shadowLight.shadow.camera.bottom = -650; shadowLight.shadow.camera.near = 1; shadowLight.shadow.camera.far = 1000; // ছায়া মানচিত্রের আকার shadowLight.shadow.mapSize। width = 2048; shadowLight .shadow.mapSize.height = 2048; // দৃশ্যের দৃশ্যে লাইট যোগ করুন। সিলিন্ডার জ্যামিতি (600, 600, 1700, 40, 10); //x অক্ষ বরাবর ঘূর্ণন geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); // একটি উপাদান তৈরি করুন var ম্যাট = নতুন থ্রি. মেশফং ম্যাটেরিয়াল(( রঙ: রং: হালকা সবুজ, ছায়া গো: থ্রি. ফ্ল্যাটশেডিং, )); // বস্তুটির একটি জাল তৈরি করুন this.mesh = new 3.Mesh(geom, mat); //receive shadows this.mesh.receiveShadow = সত্য; ) অরবিট = ফাংশন() ( var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Sun); ) Sun = function() ( this.mesh = new THREE.Object3D( ); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( color: Colors.yellow, shading: THREE.Flat Shading, )); var sun = new THREE.Mesh(sun) , sunMat); sun.castShadow = মিথ্যা; sun.receiveShadow = মিথ্যা; this.mesh.add(sun); ) Cloud = function() ( // মেঘের জন্য একটি খালি ধারক তৈরি করুন this.mesh = new THREE.Object3D( ); // ঘনক জ্যামিতি এবং উপাদান var geom = new THREE. Dodecahedron Geometry(20, 0); var mat = new THREE.MeshPhongMaterial(( color: Colors.white, )); var nBlocs = 3 + Math.floor(Math. এলোমেলো() * 3); জন্য (var i = 0; i

ফলস্বরূপ, আমরা প্রতিক্রিয়াশীলতা এবং অভিযোজনযোগ্যতার সাথে একটি দুর্দান্ত সাইট প্লাগইন পাই।