আপনার ওয়েবসাইটে একটি বিচ্যুতি প্রভাব যুক্ত করুন

কন্টেন্ট

• 01. আপনার পৃষ্ঠার বডি ট্যাগে কোড যুক্ত করুন
• 02. প্রদর্শন স্টাইলিং
• 03. ভুলত্রুটি প্রদর্শন করা হয়
• 04. সবকিছু রাখা
• 05. ভুলত্রুটি চালানো
• 06. স্বাভাবিকতা ফিরে
• এখনই জেনারেট করুন নিউ ইয়র্কের জন্য আপনার টিকিট পান

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

• ওয়েব অ্যানিমেশন: কোনও কোডের প্রয়োজন নেই

খুব অল্প পরিমাণে ব্যবহৃত একটি সরল গ্লিট প্রভাব আপনার সাইটকে ভিজ্যুয়াল আগ্রহের এক সামান্য অতিরিক্ত বিট দিতে পারে এবং এটি আশ্চর্যজনকভাবে কার্যকর করা সহজ। এটি কীভাবে করা যায় তা এখানে।

মনে একটি জটিল ওয়েবসাইট পেয়েছেন? আপনার ওয়েব হোস্টিংয়ের কাজ শেষ হয়েছে তা নিশ্চিত করুন। এবং ক্লাউড স্টোরেজে আপনার নকশার ফাইলগুলি সুরক্ষিত রাখুন।

ফাইলগুলি ডাউনলোড করুন এই টিউটোরিয়াল জন্য।

01. আপনার পৃষ্ঠার বডি ট্যাগে কোড যুক্ত করুন

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

ডিভি আইডি = "ধারক" অনমাউসওভার = "গ্লাইচ ()"> ডিভি আইডি = "গ্লাচ" </ div> ওয়েব বিআর> PRODUCT- বিআর> আইওন / ডিভিড

02. প্রদর্শন স্টাইলিং

সামগ্রীটি ওয়ার্ক সানস নামে Google ফন্টের একটি নির্দিষ্ট টাইপফেস ব্যবহার করবে। সেখান থেকে লিঙ্কটি ধরুন এবং এটি আপনার মাথা বিভাগে রাখুন; তারপরে স্টাইল ট্যাগ বা পৃথক সিএসএস ফাইলের মধ্যে সিএসএস যুক্ত করুন। পৃষ্ঠাটি সাদা পাঠ্য দিয়ে কালো করা হয়েছে এবং পাঠকটিকে পাঠ্যের জন্য স্টাইলযুক্ত করা হয়েছে।

বডি {পটভূমি: # 000; হরফ-পরিবার: ‘ওয়ার্ক সানস’, সানস-সেরিফ; রঙ: # fff; hold # ধারক {হরফ আকার: 6 এম; প্রস্থ: 500px; উচ্চতা: 300px; মার্জিন: 0 অটো; অবস্থান: আপেক্ষিক; }

03. ভুলত্রুটি প্রদর্শন করা হয়

গ্লিচ এফেক্টটি একটি পটভূমি চিত্র হতে চলেছে যা সরাসরি পাঠ্যের শীর্ষে রাখা হয়। এখানে গুরুত্বপূর্ণ অংশটি হ'ল এটি অস্বচ্ছটিকে শূন্যে হ্রাস করে তৈরি করা হয়েছে যাতে এটি পাঠ্যটির সাথে ইন্টারঅ্যাক্ট না করা অবধি প্রদর্শিত না হয়।

#glitch {অবস্থান: পরম; শীর্ষ: 0; বাম: 0; জেড-ইনডেক্স: 10; প্রস্থ: 100%; উচ্চতা: 100%; পটভূমি: url (glitch.gif); অস্বচ্ছতা: 0; }

04. সবকিছু রাখা

শরীরের বিভাগের শেষে স্ক্রিপ্ট ট্যাগগুলি যুক্ত করুন এবং দস্তাবেজের মধ্যে "গ্লিট" ডিভের একটি ক্যাশেড রেফারেন্স তৈরি করুন। তারপরে ‘ওভার’ নামের একটি ভেরিয়েবল মিথ্যাতে সেট করা হয়। ব্যবহারকারী পাঠ্যটির উপরে চলে গেলে এটি চালু এবং বন্ধ হবে।

var gl = document.getElementById ("গ্লাচ"); var over = false;

05. ভুলত্রুটি চালানো

মাউস পাঠ্যের উপরে চলে গেলে গণ্ডি ফাংশন বলা হয়। যদি বিচলতিটি চলমান না থাকে তবে গ্লাচের দৃশ্যমানতাটি চালু হয় এবং দেড় সেকেন্ড পরে এটি বন্ধ হয়ে যায়।আপনি এটি নিয়ে পরীক্ষা-নিরীক্ষা করতে পারেন এবং এটিকে আরও অনাকাঙ্ক্ষিত করতে এলোমেলো নম্বর ব্যবহার করতে পারেন।

ফাংশন ভুল () {যদি (ওভার == মিথ্যা) {gl.style.opacity = "1"; সেটটাইমআউট (ফাংশন () {স্বাভাবিক ();}, 1500); }}

06. স্বাভাবিকতা ফিরে

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

ফাংশন সাধারণ () {gl.style.opacity = "0"; }

এখনই জেনারেট করুন নিউ ইয়র্কের জন্য আপনার টিকিট পান

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

এই নিবন্ধটি মূলত সৃজনশীল ওয়েব ডিজাইন ম্যাগাজিন ওয়েব ডিজাইনারের 270 ইস্যুতে প্রকাশিত হয়েছিল। এখানে 270 ইস্যু কিনুন বা ওয়েব ডিজাইনারের সাবস্ক্রাইব করুন এখানে.