ඇඩොනා මාස් භාවිතා කරමින් Parallax ඇමිණීම සාදා ගන්නේ කෙසේද

අද දවසේ වෙබ් අඩවියේ "උණුසුම්ම" ශිල්පයන්ගෙන් එකක් වන්නේ පැරාලැක් ස්චල්ලං කිරීමයි. අපි සියලු මූසිකයන් ඔබේ මූසිකය මත අනුචලන රෝදය භ්රමණය වන අතර එම පිටුවෙහි අන්තර්ගතය ඔබ මූසිකයේ රෝදය භ්රමණය වන විට ඉහළට හෝ පහළට හෝ පිටුව හරහා ගමන් කරයි.

මෙම නව වෙබ් නිර්මාණය සහ ග්රැෆික් නිර්මාණ සඳහා නව තාක්ෂණය සඳහා CSS අවශ්ය වේ.

ඔබ විස්තර කරන්නේ නම් ග්රැෆික් කලාකරුවන්ට ආයාචනා කළ හැකි යෙදුම් ගණනාවක් තිබේ. ඔවුන් මූලිකවම වෙබ් පිටු වෙත හුරුබුහුටි පිටු පෙළ සැකසීමේ ප්රවේශයක් භාවිතා කරයි, එයින් අදහස් කරන්නේ නම්, බොහෝ නම්, සංකේත කිරීම සම්බන්ධ නොවේ. සැබැවින්ම කැපී පෙනෙන එක් යෙදුමක් නම් ඇඩෝබේ ක්වීන්ස්.

කෞතුකාගාරය භාවිතා කරමින් චිත්ර ශිල්පීන් විසින් සිදු කරනු ලබන කාර්යය ඉතා පුදුම සහගතය. ඔබට දින දර්ශනයේ චමත්කාරජනක වෙබ් අඩවියට පිවිසීමෙන් කළ හැකි දේ නියැදි දැකිය හැකිය. මැජෙස්ටර්ස් වෙබ් අඩවිය ප්රකට ලෙස "සුළං-සෙල්ලම් බඩුවක්" ලෙස සලකන අතර, මොබිටෙල් සහ ඔවුන්ගේ වෙබ් නිර්මාණයන් නිර්මාණය කිරීම සඳහා නිර්මාණකරුවන් විසින් ඔවුන්ගේ කණ්ඩායමේ සාමාජිකයින් වෙත ලබා දෙනු ඇත.

ප්රාග් ඵලය සමඟ ඉටු කිරීමට අපහසු කාර්යයක් වන එක් ශිල්පයක් පැරාලැක් අඹරමින් ඇති අතර, ඔබ විසින් සම්පූර්ණ කරන ලද ව්යපාරය දැක ගැනීමට අවශ්ය නම් අපි ඇවිදිනවා, ඔබේ වෙබ් බ්රවුසරයේ මෙම පිටුවට යොමු කරන්න. ඔබ ඔබේ මූසිකයේ අනුචලන රෝදය රෝල් කරන විට, පාඨය ඉහළට හෝ පහළට ගමන් කරයි, පින්තූර වෙනස් වේ.

අපි ආරම්භ කරමු.

07 දින 01

වෙබ් පිටුවක් සාදන්න

ඔබ නව වෙබ් අඩවි සබැඳිය Muse ක්ලික් කරන්න. මෙය නව පිටු ප්රොපටීස් විවෘත කරනු ඇත. මෙම ව්යාපෘතිය ඩෙස්ක්ටොප් යෙදුම සඳහා නිර්මාණය කර ඇති අතර එය මුලින්ම පිරිසැලසුම් පිරික්සුම් මෙනුව තුළ එය තෝරාගත හැක. තීරු, ගුප්ත පළල, මායිජින් සහ පැඩ්ඩින් සඳහා වන අගයන් අගය කළ හැකිය. මේ අවස්ථාවේ දී, අපි මේ ගැන ඉමහත් සැලකිල්ලක් දැක්වූයේ නැත.

07 දින 02

පිටුව හැඩගැස්වීම

ඔබ වෙබ් අඩවියේ ගුණාංග සැකසූ විට OK ක්ලික් කළ විට ඔබට සැලැසුම් දසුන ලෙස හැඳින්වේ. ඉහළ කවුළුවක මුල් පිටුව සහ කවුළුවෙහි පතුලෙහි ප්රධාන පිටුවක ඇත. අපට එක් පිටුවක් අවශ්ය විය. Design View වෙත ප්රවේශ වීමට, අපි අතුරු මුහුණත විවෘත කර ඇති මුල් පිටුව ද්වි-ක්ලික් කළෙමු.

වම් පැත්තෙහි මූලික මෙවලම් කීපයක් සහ දකුණු පස ඇති පිටුවෙහි අන්තර්ගතය හැසිරවීමට භාවිතා කරන පුවරු විවිධාකාර වේ. ඉහළට ඉහළින් ඇත්තේ පිටුවට යෙදිය හැකි, හෝ පිටුවෙහි තෝරාගත් ඕනෑම ගුණාංගයකි. මේ අවස්ථාවේ දී, අපට කළු පසුබිමක් තිබිය යුතුය. මෙය ඉටු කර ගැනීම සඳහා බ්රව්සරය පුරවන්න වර්ණ චිපය මත ක්ලික් කරන්න.

07 දින 03

පිටුවට පෙළ එක් කරන්න

ඊළඟ පියවර වන්නේ පිටුවට යම් පෙළක් එක් කිරීමයි. අපි පෙළපොත් තෝරාගෙන පාඨමය පෙට්ටිය සකස් කළා. අපි "Welcome" යන වචනය ඇතුළත් කර ඇති අතර, ප්රොපර්ස් හි Arial වෙතට, පික්සල 120 ක් සුදු පැහැය. මධ්යධරණී.

පසුව අපි තෝරාගත් මෙවලම වෙත පාඨමය කොටුව මත ක්ලික් කර Y යේ පිහිටීම ඉහළින් සිට පික්සල 168 ක් දක්වා තැබියෙමු. පෙළ කොටුව තවමත් තෝරා ඇත, අපි පෙළගස්වන කවුළුව විවෘත කර පාඨමය කේන්ද්රය කේන්ද්රගත කර ඇත.

අවසන් වශයෙන්, තෝරාගත් පෙළ කොටුව සමඟ, Option / Alt සහ Shift යතුරු පහත් කර පාඨමය පෙට්ටියේ පිටපත් හතරක් සාදා ඇත. එක් එක් පිටපතෙහි පෙළ සහ Y පිහිටීම අපි වෙනස් කළා.

ඔබ එක් පෙළ කොටුවක් පිහිටුවා ඇති පරිදි, පාඨයෙහි පිහිටීම සඳහා ඉඩ ප්රස්ථා වෙනස් කිරීමට ඉඩ ඇත.

07 දින 04

පින්තූර බෙදාගන්නන් එකතු කරන්න

ඊළඟ පියවර වන්නේ පාඨක කොටස් අතර පින්තූර සැකසීමයි.

පළමු පියවර වන්නේ Rectangle මෙවලම තෝරාගැනීම සහ පිටුවෙහි එක් පැත්තක සිට අනෙක් පැත්තෙන් අපගේ පෙට්ටියක් අඳින්න. තෝරාගත් සෘජුකෝණාස්රය සමඟ, එහි පික්සල් 250 සහ එහි Y තත්ත්වය දක්වා පික්සල 425 දක්වා උස වේ . මෙම සැලසුම මගින් පරිශීලකයාගේ බ්රවුසර් දර්ශන සැපපහසුව සඳහා පිටු පළල දක්වා සෑම විටම දිගු කිරීම හෝ කොන්ක්රීට් කිරීම සිදු කිරීමයි. මෙය ඉටු කිරීම සඳහා ප්රොපටීස් හි 100% පළල බොත්තම ක්ලික් කළෙමු. මෙය සිදු කරන්නේ X අගයෙන් අළු පැහැයක් ගන්නා අතර රූපය සෑමවිටම බ්රවුසරයේ දර්ශන පළල 100% ක් බව තහවුරු කිරීමයි.

07 දින 05

පින්තූර හිමියන්ට පින්තූර එකතු කරන්න

Rectangle තෝරාගත් අපි ෆෝල්ල් ලින්ක් එක ක්ලික් කර - වර්ණ චිපය නොවීය - සෘජුකෝණාස්රයේ රූපයක් එකතු කිරීමට මා විසින් තීන්ත ආලේප කරන ලදී. Fitting ක්ෂේත්රයේ දී, අපි Scale To Fit තෝරාගත් අතර රූපයේ මධ්යයේ සිට ප්රතිබිම්බය පරිමාණය කර ඇති බවට තහවුරු කර ගැනීම සඳහා පිහිටුම් ප්රදේශයෙහි කේන්ද්රීය හැඩය ක්ලික් කර ඇත.

මීලඟට, පළමු අකුරු කොටස් අතරින් පිටපතක් නිර්මාණය කිරීම සඳහා, Option / Alt-Shift-Drag තාක්ෂණය භාවිතා කර, Fill කවුළුව විවෘත කර වෙනත් රූපයක් සඳහා වූ රූපය විස්ථාපනය කරන ලදි. ඉතිරි රූප දෙක සඳහා අපි මෙය කළා.

රූපයේ තැනින් තැන, චලනය එකතු කිරීමට කාලයයි.

07 සිට 06 දක්වා

Parallax Scrolling එකතු කරන්න

ඇඩෝබේ ක්වීන්ස් හි පැරඩැක්ස් ලුහුඬු සටහන් එකතු කිරීමේ ක්රම කිහිපයක් තිබේ. අපි එය ඔබට කිරීමට සරල ක්රමයක් පෙන්වන්නෙමු.

ෆිල්ට් පුවරුව විවෘත කර ඇති විට, පොත ටැබ් එක ක්ලික් කර, එය ආරම්භ වන විට, චලන චෙක් එකේ ක්ලික් කරන්න.

මූලික හා අවසාන යෝජනාව සඳහා අගයන් ඔබ දකිනු ඇත. ස්පොට් රෝදයට අදාළ රූපය කෙතරම් වේගවත්ව ද යන්න තීරණය කරනු ලැබේ. නිදසුනක් ලෙස 1.5 ක අගයක් රෝදයට වඩා 1.5 ගුණයකින් වේගයෙන් ගමන් කරයි. අපි රූප සවිකිරීම සඳහා 0 අගයක් භාවිතා කළා.

චලිතයේ දිශාව සහ දිශානත ඊතලය චලිතයේ දිශාව තීරණය කරයි. අගයන් 0 නම් ඔබ ක්ලික් කරන ඊතලය කුමක් වුවත් රූප දර්ශණය නොකෙරේ.

මැද අගය - ප්රධාන ස්ථානය - රූප චලනය ආරම්භ වන ස්ථානය පෙන්වයි. මෙම පින්තූරය සඳහා පිංතූරය ඉහළින් ඇති පේළිය, පිටුවේ ඉහළ සිට පික්සල 325 ක් ආරම්භ වේ. පොත එම අගයට ළඟා වන විට රූපය චලනය කිරීමට පටන් ගනියි. ඔබට මෙම අගය වෙනස් කළ හැක, සංවාද කොටුවෙහි එය වෙනස් කිරීම හෝ ඉහළ හෝ පහළේ ඇති රේඛාවේ ඉහළට ක්ලික් කිරීමෙන් සහ ඇදගෙන යාමෙන්ය.

පිටුවෙහි අනෙකුත් රූප සඳහා මෙය නැවත සිදු කරන්න.

07 සිට 07 දක්වා

බ්රවුසර් ටෙස්ට්

මේ මොහොතේ අපි නිමා කළා. පැහැදිලිවම හේතු අප විසින් කළ පළමු කරුණ නම් File> Save Site තෝරාගන්න. බ්රවුසර් පරීක්ෂාවට අපි සරල ලෙස File> Preview Page බ්රවුසරයේ තෝරා ගත්තා . මෙය අපේ පරිගණකයේ පෙරනිමි බ්රව්සරය විවෘත කළ අතර, පිටුව විවෘත වූ විට, අප විසින් අකුරු ලිවීම ආරම්භ කරන ලදි.