స్క్రోల్‌మాజిక్: సరదా వెబ్ డిజైన్

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

ఈ శైలి వినియోగదారుకు చాలా ఆకర్షణీయంగా మరియు సరదాగా ఉంటుంది అనేది రహస్యం కాదు, యానిమేషన్లతో మేము సైట్ను నావిగేట్ చేయగలుగుతాము మరియు అవి బాగా ఉపయోగించినంత కాలం వినోదాత్మకంగా ఉంటాయి. ఈ కారణంగా, మీ వెబ్‌సైట్‌లో j క్వెరీ స్క్రోల్‌మాజిక్ ప్లగిన్‌ను ఉపయోగించి యానిమేటెడ్ స్క్రోల్‌లను చేర్చడానికి మేము ఒక ట్యుటోరియల్‌ని సృష్టించాము.

స్క్రోల్ మ్యాజిక్: ఫన్ వెబ్ డిజైన్

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

మేము ఈ క్రింది కొన్ని విషయాలను అమలు చేయాలనుకుంటే ఇది అనువైనది:

• సైట్ యొక్క స్థానం లేదా స్థానభ్రంశం ఆధారంగా యానిమేషన్. యానిమేషన్‌ను ట్రిగ్గర్ చేయండి లేదా స్క్రోల్ యొక్క కదలికతో సమకాలీకరించండి. ఎక్కువ ప్రయత్నం లేకుండా పారలాక్స్ ప్రభావాన్ని జోడించండి. అనంతమైన స్క్రోల్‌తో ఒక పేజీని సృష్టించండి, అజాక్స్‌తో కంటెంట్ లోడింగ్‌ను నిర్వహించండి.

స్క్రోల్ మ్యాజిక్ ఫీచర్స్

• ఆప్టిమైజ్ చేసిన పనితీరు, ఇది తేలికైనది, సరళమైనది మరియు విస్తరణను అనుమతిస్తుంది. ఈవెంట్ మేనేజ్‌మెంట్ మరియు ఆబ్జెక్ట్ ఓరియెంటెడ్ ప్రోగ్రామింగ్. ఇది అనుకూల వెబ్ డిజైన్‌కు మద్దతు ఇస్తుంది. దీనికి రెండు దిశలలోని కదలికలకు మద్దతు ఉంది (క్షితిజ సమాంతర మరియు నిలువు) దీనికి కంటైనర్‌లలోని కదలికలకు మద్దతు ఉంది (div), ఒక పేజీలో కూడా బహుళ. ఇది బ్రౌజర్‌ల కోసం ఖచ్చితంగా పనిచేస్తుంది: ఫైర్‌ఫాక్స్ 26+, క్రోమ్ 30+, సఫారి 5.1+, ఒపెరా 10+, IE 9+. దాని గిట్‌హబ్ రిపోజిటరీలో, దీనికి వివరణాత్మక డాక్యుమెంటేషన్ మరియు అనేక అప్లికేషన్ ఉదాహరణలు ఉన్నాయి.

స్క్రోల్ మ్యాజిక్ పొందండి

ఇది వివిధ మార్గాల్లో పొందటానికి అందుబాటులో ఉంది.

1: గిట్‌హబ్

git clone git: //github.com/janpaepke/ScrollMagic.git

2: బోవర్

బోవర్ ఇన్‌స్టాల్ స్క్రోల్‌మాజిక్

3: నోడ్ ప్యాకేజీ మేనేజర్

npm స్క్రోల్‌మాజిక్ ఇన్‌స్టాల్ చేయండి

4: సిడిఎన్

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Outlook లో ఇమెయిల్ రూపకల్పనను ఎలా అనుకూలీకరించాలో కూడా మీరు చదువుకోవచ్చు

సంస్థాపన మరియు ఉపయోగం

ఇన్స్టాలేషన్ చాలా సులభం, మేము కెర్నల్ ఫైల్ను html ఫైళ్ళలో మాత్రమే ఉపయోగించాలనుకుంటున్నాము.

;

ఉపయోగం కోసం, ప్లగ్ఇన్ నియంత్రిక-ఆధారిత డిజైన్ నమూనాను అందిస్తుంది, దీనికి ఒకటి లేదా అంతకంటే ఎక్కువ దృశ్యాలు జోడించబడతాయి. కంటైనర్లు ఒక నిర్దిష్ట బిందువుకు మారినప్పుడు ఏమి జరుగుతుందో నిర్వచించడానికి ఈ దృశ్యాలు ఉపయోగించబడతాయి.

ఇది ఒక ప్రాథమిక ఉదాహరణ:

// init కంట్రోలర్ var కంట్రోలర్ = క్రొత్త స్క్రోల్ మ్యాజిక్.కంట్రోలర్ (); // ఒక దృశ్యాన్ని క్రొత్త స్క్రోల్ మ్యాజిక్ సృష్టించండి. {{వ్యవధి: 100, // ఈ దృశ్యం 100px ఆఫ్‌సెట్ స్క్రోల్ దూరం వరకు ఉండాలి: 50 // 50px for కోసం స్క్రోలింగ్ చేసిన తర్వాత ఈ దృశ్యాన్ని ప్రారంభించండి).సెట్‌పిన్ ("# my-sticky- మూలకం ") // సన్నివేశం వ్యవధికి మూలకాన్ని పిన్స్ చేస్తుంది.addTo (నియంత్రిక); // సన్నివేశాన్ని నియంత్రికకు కేటాయించండి

మరింత అధునాతన ఉదాహరణ, బహుళ ఆఫ్‌సెట్లను సాధించడం, దాని సోర్స్ కోడ్ ఇలా ఉంటుంది:

function (ఫంక్షన్ () document // డాక్యుమెంట్ రెడీ కోసం వేచి ఉండండి // init కంట్రోలర్ var కంట్రోలర్ = కొత్త స్క్రోల్ మ్యాజిక్.కంట్రోలర్ (); // బిల్డ్ ట్వీన్ వర్ ట్వీన్ = ట్వీన్మాక్స్.టో ("# యానిమేట్", 0.5, {స్కేల్: 3, సౌలభ్యం: లీనియర్.ఇసేనోన్}); addIndicators ({name: "resize"}) // సూచికలను జోడించు (ప్లగిన్ అవసరం).addTo (నియంత్రిక); // init కంట్రోలర్ క్షితిజ సమాంతర var controller_h = new ScrollMagic.Controller ({నిలువు: తప్పుడు}); // మధ్యలో క్షితిజ సమాంతర var tween_h = TweenMax.to ("# యానిమేట్", 0.5, {భ్రమణం: 360, సౌలభ్యం: లీనియర్.ఇస్నోన్}); setPin ("# యానిమేట్").addIndicators ({name: "rotate"}) // సూచికలను జోడించండి (ప్లగిన్ అవసరం).addTo (controller_h);});

ప్లగిన్ డాక్యుమెంటేషన్‌లో మీరు వాటి సోర్స్ కోడ్‌తో మరెన్నో ఉదాహరణలను కనుగొనవచ్చు.

మేము మిమ్మల్ని సిఫార్సు చేస్తున్నాము యుఎస్బి స్టిక్ ఉపయోగించి విండోస్ 10 యొక్క క్లీన్ ఇన్స్టాలేషన్ ఎలా చేయాలి