ఎలా Adobe మ్యూజ్ ఉపయోగించి పారలాక్స్ స్క్రోలింగ్ సృష్టించు

నేడు వెబ్లో "హాటెస్ట్" పద్ధతులు ఒకటి పారలాక్స్ స్క్రోలింగ్. మేము మీరు మీ మౌస్ మీద స్క్రోల్ చక్రాన్ని రొటేట్ చేసే పేజీలకు మరియు పేజీలోని కంటెంట్ను మౌస్ వీల్ రొటేట్ చేస్తున్నప్పుడు లేదా క్రిందికి లేదా క్రిందికి కదులుతూ ఉన్న సైట్లకు ఉండి ఉంటాము.

వెబ్ రూపకల్పన మరియు గ్రాఫిక్ రూపకల్పనకు కొత్తవి కోసం, ఈ సాంకేతికత అవసరమైన మొత్తం CSS కారణంగా సాధించడానికి చాలా కష్టంగా ఉంటుంది.

మీరు వివరిస్తే, గ్రాఫిక్ కళాకారులకు అప్పీల్ చేసే పలు అనువర్తనాలు ఉన్నాయి. వారు ప్రాధమికంగా వెబ్ పేజీలకు తెలిసిన పేజీ లేఅవుట్ విధానాన్ని ఉపయోగిస్తారు, అనగా ఏదైనా ఉంటే, కోడింగ్ ప్రమేయం ఉన్నట్లయితే చాలా లేదు. నిజంగా ప్రాముఖ్యత లోకి రాకెట్ ఒక అప్లికేషన్ Adobe మ్యూజ్ ఉంది.

మ్యూస్ ఉపయోగించి గ్రాఫిక్స్ ప్రోస్ చేసిన పని చాలా అద్భుతమైన మరియు మీరు ది మ్యూజ్ సైట్ సందర్శించడం ద్వారా మీరు చెయ్యగలరు ఒక నమూనా చూడగలరు. వెబ్ ప్రోస్ ఒక విధమైన "పవన బొమ్మ" గా పరిగణించబడుతున్నప్పటికీ, మొబైల్ మరియు వెబ్ నమూనాలను సృష్టించడానికి డిజైనర్లు దీనిని ఉపయోగిస్తున్నారు, చివరికి వారి జట్టులో డెవలపర్లకు ఇది అప్పగించబడుతుంది.

మ్యూస్ తో సాధించడానికి చాలా సులభం అని ఒక టెక్నిక్ పారలాక్స్ స్క్రోలింగ్ మరియు, మీరు వ్యాయామం పూర్తి వెర్షన్ చూడాలనుకుంటే మేము ద్వారా వాకింగ్ ఉంటుంది, మీ బ్రౌజర్ ఈ పేజీకి పాయింటు. మీరు మీ మౌస్ యొక్క స్క్రోల్ చక్రంను రోల్ చేసినప్పుడు, టెక్స్ట్ పైకి లేదా క్రిందికి తరలించడానికి మరియు చిత్రాలను మార్చడం కనిపిస్తుంది.

ప్రారంభించండి.

07 లో 01

వెబ్ పుటను సృష్టించండి

మీరు మ్యూస్ని ప్రారంభించినప్పుడు క్రొత్త సైట్ లింకును క్లిక్ చేయండి. ఇది క్రొత్త సైట్ గుణాలను తెరుస్తుంది. ఈ ప్రాజెక్ట్ డెస్క్టాప్ అనువర్తనం కోసం రూపొందించబడింది మరియు మీరు దీన్ని ప్రారంభ లేఅవుట్ పాప్-డౌన్ మెనులో ఎంచుకోవచ్చు. మీరు నిలువు వరుసలు, గట్టర్ వెడల్పు, అంచులు మరియు పాడింగ్ల సంఖ్యకు విలువలను కూడా అమర్చవచ్చు. ఈ సందర్భంలో, మేము ఈ విషయంలో తీవ్రంగా ఆందోళన చెందలేదు మరియు సరే క్లిక్ చేసాము.

02 యొక్క 07

పేజీని ఫార్మాట్ చేయండి

మీరు సైట్ లక్షణాలను సెట్ చేసి సరి క్లిక్ చేసినప్పుడు మీరు ప్రణాళిక వీక్షణ అని పిలిచారు. విండోలో దిగువ ఉన్న హోమ్ పేజీ మరియు మాస్టర్ పేజ్ ఉంది. మాకు ఒక పేజీ అవసరం. డిజైన్ వీక్షణను పొందేందుకు, ఇంటర్ఫేస్ను ప్రారంభించిన హోమ్ పేజీని మేము డబుల్-క్లిక్ చేసాము.

ఎడమవైపున కొన్ని ప్రాథమిక ఉపకరణాలు మరియు కుడివైపున పేజీలోని కంటెంట్ను సవరించడానికి ఉపయోగించే వివిధ ప్యానెల్లు ఉన్నాయి. పైభాగాన ఆ లక్షణాలు, పుటలో వర్తించవచ్చు, లేదా పేజీలో ఎంపికైనవి. ఈ సందర్భంలో, మేము ఒక నల్ల నేపథ్యాన్ని కలిగి ఉండాలని కోరుకున్నాము. దీన్ని నెరవేర్చడానికి, మనము బ్రౌజర్ నింపే రంగు చిప్ పై క్లిక్ చేసి, రంగు పిక్కర్ నుండి నలుపును ఎంచుకుంటాము.

07 లో 03

పేజీ టెక్స్ట్ జోడించండి

తరువాతి దశలో పేజీకి కొంత వచనాన్ని చేర్చడం. మేము టెక్స్ట్ టూల్ ఎంచుకొని ఒక టెక్స్ట్ బాక్స్ ఆకర్షించింది. మేము "స్వాగతం" అనే పదాన్ని ప్రవేశపెట్టాం మరియు, గుణాలలో Arial, 120 పిక్సెల్స్ వైట్కు టెక్స్ట్ని సెట్ చేయండి . సెంటర్ సమలేఖనం చేయబడింది.

మేము ఎంపిక సాధనంకు మారాం, టెక్స్ట్బాక్స్పై క్లిక్ చేసి, ఎగువ నుండి 168 పిక్సెల్ల వరకు దాని Y స్థానాన్ని సెట్ చేయండి. వచన పెట్టె ఇప్పటికీ ఎంపిక చేయబడి, మేము సమలేఖనం ప్యానెల్ను తెరిచాము మరియు వచన పెట్టెను సెంటర్కు సర్దుబాటు చేసాము.

చివరగా, ఎంపిక చేసిన వచన పెట్టెతో, మేము ఎంపిక / Alt మరియు Shift కీలను తగ్గించాము మరియు టెక్స్ట్ బాక్స్ యొక్క నాలుగు కాపీలను తయారుచేసాము. మేము ప్రతి కాపీని టెక్స్ట్ మరియు Y స్థానం మార్చాము:

మీరు ప్రతి టెక్స్ట్ పెట్టె యొక్క స్థానమును అమర్చినట్లుగా, పాఠం యొక్క స్థానం కల్పించటానికి పేజీ పునఃపరిశీలించబడుతుంది.

04 లో 07

చిత్రం Placeholders జోడించండి

తదుపరి దశ టెక్స్ట్ బ్లాక్స్ మధ్య చిత్రాలను ఉంచడం.

మొదటి దశలో దీర్ఘచతురస్రాకార ఉపకరణాన్ని ఎంచుకోండి మరియు పేజీ యొక్క ఒక వైపు నుండి మరోదానికి విస్తరించే మా బాక్స్ని గీయండి. ఎంచుకున్న దీర్ఘ చతురస్రంతో, మేము దాని ఎత్తును 250 పిక్సెల్స్ మరియు దాని వై స్థానం 425 పిక్సెల్స్కు సెట్ చేస్తుంది . ఒక వినియోగదారు యొక్క బ్రౌజర్ వీక్షణపోర్ట్కు అనుగుణంగా వాటిని పేజీ వెడల్పుకు ఎల్లప్పుడూ పొడిగించడం లేదా ఒప్పందం చేయడం. దీనిని నెరవేర్చడానికి, మేము గుణాలు లో 100% వెడల్పు బటన్ను క్లిక్ చేసాము. ఇది X విలువను బూడిదరంగు చేస్తుంది మరియు చిత్రం బ్రౌజర్లో ఎల్లప్పుడూ వీక్షణపోర్ట్ వెడల్పులో 100% ఉందని నిర్ధారించడానికి.

07 యొక్క 05

చిత్రం Placeholders చిత్రాలను జోడించండి

దీర్ఘచతురస్ర ఎంపికతో మేము పూరించిన లింక్ను క్లిక్ చేసాము - రంగు చిప్ కాదు - మరియు దీర్ఘ చతురస్రంలో ఒక చిత్రాన్ని జోడించటానికి నేను mage mk ను క్లిక్ చేసాను. ఫిట్టింగ్ ప్రదేశంలో, చిత్రం యొక్క కేంద్రం నుండి చిత్రం స్కేల్ చేయబడిందని నిర్ధారించడానికి స్థాన ప్రాంతంలో కేంద్రాన్ని నిర్వహించడానికి మేము స్కేల్ను ఎంచుకున్నాము.

తరువాత, మొట్టమొదటి రెండు టెక్స్ట్ బ్లాకుల మధ్య చిత్రం యొక్క కాపీని సృష్టించడానికి ఎంపిక / Alt-Shift-drag టెక్నిక్ని మేము ఉపయోగించాము, ఫిల్ ప్యానెల్ను తెరిచింది మరియు మరొక దాని కోసం చిత్రాన్ని మార్చుకుంది. మేము మిగిలిన రెండు చిత్రాల కోసం దీనిని చేసాము.

స్థానంలో చిత్రాలు, అది చలన జోడించడానికి సమయం.

07 లో 06

పారలాక్స్ స్క్రోలింగ్ను జోడించండి

Adobe మ్యూజ్లో పారలాక్స్ స్క్రోలింగ్ను జోడించే అనేక మార్గాలు ఉన్నాయి. మేము దీనిని చేయటానికి ఒక సాధారణ మార్గాన్ని చూపించబోతున్నాం.

ఫిల్ ప్యానెల్ తెరిచినప్పుడు, స్క్రోల్ ట్యాబ్ క్లిక్ చేసి, అది తెరిచినప్పుడు, మోషన్ చెక్ బాక్స్ క్లిక్ చేయండి.

మీరు ప్రారంభ మరియు ఫైనల్ మోషన్ కోసం విలువలను చూస్తారు. ఈ చిత్రం స్క్రోల్ వీల్ సంబంధించి ఎలా కదిలిస్తుంది. ఉదాహరణకు, 1.5 యొక్క విలువ చక్రం కంటే 1.5 రెట్లు వేగంగా చిత్రం తరలించబడుతుంది. మేము స్థానంలో చిత్రాలను లాక్ చేయడానికి 0 యొక్క విలువను ఉపయోగించాము.

క్షితిజ సమాంతర మరియు నిలువు బాణాలు చలనం దిశను నిర్దేశిస్తాయి. విలువలు 0 ఉంటే చిత్రాలు ఏ బాణంతో సంబంధం లేకుండా బడ్జె చేయవు.

మధ్య విలువ - కీ స్థానం - చిత్రాలను తరలించడానికి ప్రారంభించే స్థానం చూపుతుంది. ఇమేజ్కు ఎగువన ఉన్న లైన్ ఈ చిత్రం కోసం, పేజీ ఎగువ నుండి 325 పిక్సెల్స్ మొదలవుతుంది. స్క్రోల్ ఆ విలువ చేరుకున్నప్పుడు చిత్రం తరలించడానికి మొదలవుతుంది. డైలాగ్ పెట్టెలో మార్చడం ద్వారా లేదా ఈ క్రింది భాగాన ఉన్న పైకి లేదా క్రిందికి పైకి లాగడం ద్వారా మీరు ఈ విలువను మార్చవచ్చు.

పేజీలో ఇతర చిత్రాల కోసం దీన్ని రిపీట్ చేయండి.

07 లో 07

బ్రౌజర్ టెస్ట్

ఈ సమయంలో, మేము పూర్తయ్యాము. మనము చేసిన మొదటి విషయం, స్పష్టమైన కారణాల కోసం, ఫైల్> సైట్ను ఎంచుకోండి . బ్రౌజర్ పరీక్షకు, మేము కేవలం బ్రౌజర్ లో ఫైల్> ప్రివ్యూ పేజీని ఎంచుకున్నాము. ఇది మా కంప్యూటర్ యొక్క డిఫాల్ట్ బ్రౌజర్ని తెరిచింది మరియు పేజీ తెరిచినప్పుడు మేము స్క్రోలింగ్ ప్రారంభించాము.