Back to Question Center
0

GSAP యానిమేషన్ లైబ్రరీతో బూట్స్ట్రాప్ కారౌసల్స్ యానిమేటింగ్            GSAP యానిమేషన్ లైబ్రరీతో బూట్స్ట్రాప్ కారౌసల్స్ యానిమేటింగ్ అంగులర్ JSAPIsRaw Semalt

1 answers:
GSAP యొక్క యానిమేషన్ లైబ్రరీ తో యానిమేషన్ బూట్స్ట్రాప్ Carousels

మునుపటి పోస్ట్ లో, నేను ఒక బూట్స్ట్రాప్ రంగులరాట్నం ఒక యాదృచ్ఛిక ప్రారంభ చిత్రం తో ఒక పూర్తి స్క్రీన్ రంగులరాట్నం లోకి మార్చడానికి ప్రక్రియ కవర్. ఈ ఆర్టికల్లో, నేను దానిపై నిర్మించి, ఒక ప్రముఖ సెమాల్ట్ లైబ్రరీ, GSAP (గ్రీన్సన్క్ యానిమేషన్ ప్లాట్ఫాం) సహాయంతో గీయడం, బూట్స్ట్రాప్ కార్షెల్స్ను యానిమేట్ చేసే కళను కవర్ చేస్తాను.

Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt

సెమల్ట్ ముందుకు ఏ, మేము నిర్మాణ ఉంటాం ఏమి చూద్దాం.

రంగులరాట్నం బిల్డింగ్

మీ పేజీలో బూట్స్ట్రాప్ మరియు j క్వెరీ (బూట్స్ట్రాప్ యొక్క JavaScript భాగాలు అవసరం) ఉన్నాయి నిర్ధారించుకోండి - ఉదాహరణకు, ఒక CDN నుండి:

                బూట్స్ట్రాప్ carousels యానిమేట్ చేయడానికి GSAP ఉపయోగించి  </ title>  <లింక్ rel = "స్టైల్షీట్" రకం = "టెక్స్ట్ / CSS" href = "https: // maxcdn. bootstrapcdn com / బూట్స్ట్రాప్ / 4. 0. 0 / css / బూట్స్ట్రాప్ నిమిషం css">  </ Head>  <Body>   <స్క్రిప్ట్ src = "https: // కోడ్ j క్వెరీ com / jquery-3 2. 2. slim min min js">   </ script>  <script src = "https: // maxcdn. bootstrapcdn com / bootstrap / 4 0. 0 / js / bootstrap min min js">   </ script>  </ Body>  </ Html>  </code>   </pre>  <p>  మా రంగులరాట్నం యొక్క ప్రాథమిక నిర్మాణం ఇలా కనిపిస్తుంది:  </p>  <pre>   <code class="markup language-markup">   <div id = "mycarousel" తరగతి = "రంగులరాట్నం స్లయిడ్" డేటా రైడ్ = "రంగులరాట్నం">  <ol class = "carousel-indicators">  <li data-target = "# mycarousel" data-slide-to = "0" class = "active">   </li>  <li data-target = "# mycarousel" data-slide-to = "1">   </li>  </ol>  <div class = "carousel-inner">  <! - మొదటి స్లయిడ్ ->  <div class = "రంగులరాట్నం అంశం మొదటి క్రియాశీలం" id = "1">  <! - ఇక్కడ కంటెంట్ ->  </div>  <! - రెండవ స్లయిడ్ ->  <div class = "carousel-item second" id = "2">  <! - ఇక్కడ కంటెంట్ ->  </div>  </div>   <! - / carousel-inner ->  </div>  </code>   </pre>  <p>  మీరు గమనిస్తే, ఇది రెండు స్లయిడ్లను కలిగి ఉంటుంది. మొదటి స్లయిడ్  <code>  మొదటి  </code>  మరియు  <code>  1  </code>  యొక్క ID, రెండవ  <code>  రెండవ  </code>  మరియు  <code>  2 యొక్క ID 26) - <a href="https://www.edlatam.com/nyip/diferencias-entre-analogico-y-digital-en-la-fotografia-profesional/">la camara fotografica analogas</a>.  </p>  <p>  సెమాల్ట్ వారి శైలులు:  </p> <ul><li> మేము వీక్షణపోర్ట్ ఎత్తు సమానంగా వారి ఎత్తు సెట్  </li> <li> మేము వేర్వేరు నేపథ్య రంగులను అందిస్తాము.  </li> </ul> <p>  సంబంధిత CSS నియమాలు:  </p>  <pre>   <code class="css language-css"> . అంశం {ఎత్తు: 100vh;}. ప్రధమ {నేపథ్య: # D98F4F; / * నారింజ * /}. రెండవ {నేపథ్య: # 2c9cae; /*లేత నీలం*/} </code>   </pre>  <p>  మాకు ఒక పని రంగులరాట్నం ఇవ్వాలని తగినంత ఉండాలి.  </p> <h3 id="buildingthefirstslide"> బిల్డింగ్ ది ఫస్ట్ స్లయిడ్ </h3> <p>  తరువాత, మన స్లయిడ్ల కోసం సెటల్ సహాయక తరగతుల (ఉదా. గ్రిడ్ తరగతులు) ప్రయోజనాన్ని పొందవచ్చు.  </p>  <p>  మొదటి స్లయిడ్ కోసం మార్కప్ క్రింది ఉంది:  </p>  <pre>   <code class="markup language-markup">  <div class = "carousel-item మొదటి క్రియాశీల" id = "1"><div class = "carousel-caption"><div class = "container"><div class = "row justify-content-md-center"><div class = "col"><h2 class = "title"> <! - ఇక్కడ కంటెంట్ ->  </h2> <p class = "desc"> <! - ఇక్కడ కంటెంట్ ->  </p> <ul class = "list"><! - ఇక్కడ జాబితా అంశాలు -></ul> </div> <div class = "col"><div class = "pc-wrapper"><img class = "pc" src = "IMG_PATH" alt = "" వెడల్పు = "" height = ""><div class = "price"> <! - ఇక్కడ కంటెంట్ ->  </div>  <! - / ధర -> </div>  <! - / pc-wrapper -><img class = "keyboard" src = "IMG_PATH" alt = "" వెడల్పు = "" height = ""><button type = "button" class = "btn btn-danger btn-lg"> <! - ఇక్కడ కంటెంట్ -> </ Button> </div>  </div>  <! - / row -> </div>  <! - / కంటైనర్ -> </div>  <! - / రంగులరాట్నం-శీర్షిక -> </div>  <! - / రంగులరాట్నం-అంశం -> </code>   </pre>  <p>  మీరు అనుసరించినట్లయితే,  <code>  IMG_PATH  </code>  ను ప్రత్యామ్నాయంతో భర్తీ చేయాలని గుర్తుంచుకోండి. సెమాల్ట్ యానిమేషన్ల కోసం ముఖ్యమైన శైలులను మాత్రమే సూచిస్తుంది.  </em>   </p> <h2 id="initializingthecarousel"> రంగులరాట్నం ప్రారంభించడం  </h2>  <p>  తదుపరి మేము రంగులరాట్నం ప్రారంభించడం మరియు డిఫాల్ట్ స్వీయప్లేను నిలిపివేయడం  <code>  విరామం: ఆకృతీకరణ వస్తువుకు తప్పుడు  </code> :  </p>  <pre>  <code class="javascript language-javascript"> var $ carousel = $ ("# mycarousel");$ రంగులరాట్నం. రంగులరాట్నం ({విరామం: తప్పుడు}); </code>   </pre> <h2 id="addingkeyboardnavigation"> జోడించడం కీబోర్డ్ నావిగేషన్  </h2>  <p>  డిఫాల్ట్గా, సెమల్ట్ రంగులరాట్నం ప్రాప్యత ప్రమాణాలతో కంప్లైంట్ కాదు. మా విషయంలో, అయితే, కీబోర్డ్ పేజీకి సంబంధించిన లింకులు జోడించడం ద్వారా కొంచెం మరింత అందుబాటులో రంగులరాట్నంని తయారు చేద్దాం.  </p>  <p>  అవసరమైన కోడ్ సెమాల్ట్:  </p>  <pre>  <code class="javascript language-javascript"> $ (పత్రం). కీప్యాప్ (ఫంక్షన్ (ఇ) {// కుడి బాణం(ఇ === 39) {$ రంగులరాట్నం. రంగులరాట్నం ( "తదుపరి");// ఎడమ బాణం} else ఉంటే (ఇ === 37) {$ రంగులరాట్నం. రంగులరాట్నం ( "గత");}}); </code>   </pre>  <p>  ఇప్పటివరకు, మేము కీబోర్డు నావిగేషన్కు మద్దతు ఇచ్చే ఒక ప్రాథమిక రంగులరాట్నం నిర్మించాము.  </p> <h2 id="animatingbootstrapcarouselsfirstanimations"> యానిమేటింగ్ బూట్స్ట్రాప్ Carousels: మొదటి యానిమేషన్లు  </h2>  <p>  ఈ సమయంలో, కొన్ని యానిమేషన్లు జోడించడం ద్వారా రంగులరాట్నం మరింత ఆకర్షణీయంగా చేయడానికి ప్రయత్నించండి. దీనిని సాధించడానికి, మేము అక్కడ అత్యంత శక్తివంతమైన JavaScript యానిమేషన్ గ్రంథాలయాలలో GSAP యొక్క ప్రయోజనాన్ని పొందుతాము. ఒకవేళ మీరు గ్రీన్సాక్ కోసం ఒక మంచి పరిచయం కోసం చూస్తున్నట్లయితే, గ్రీన్సక్ ఫర్ బిగినర్స్: వెబ్ యానిమేషన్ సెమాల్ట్ (పార్ట్ 1).  </p> <h3 id="gettingstartedwithgsap"> GSAP తో ప్రారంభించండి </h3> <p>  GSAP ను మా ప్రాజెక్టులకు చేర్చడానికి, దాని సైట్ను సందర్శించండి మరియు అక్కడ నుండి <em> పేజీ యొక్క కుడి ఎగువ మూలలో కనిపించే డౌన్లోడ్  </em>  బటన్ను క్లిక్ చేయండి. ఇది CDN లో ప్రాజెక్ట్కు లింక్తో మోడల్ డైలాగ్ను తెరుస్తుంది.  </p>  <p>  <img src="/img/74e7f42e2d8898c97df125458c20579e3.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  అప్పుడు <em> అనుకూలీకరించండి  </em>  రేడియో బటన్ను ఎంచుకుంటే, మేము ఉపయోగించడానికి కావలసిన లైబ్రరీ యొక్క భాగాలను ఎంచుకోవచ్చు. మా ప్రాజెక్ట్ కోసం, అయితే, మేము విషయాలు సాధారణ ఉంచుతాము మరియు అది కేవలం పూర్తి బలమైన వెర్షన్ ఉన్నాయి.  </p>  <p>  <img src="/img/74e7f42e2d8898c97df125458c20579e4.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  బూట్స్ట్రాప్ యొక్క రంగులరాట్నం దాని మీద ఆధారపడి ఉంటుంది ఎందుకంటే మేము మా ప్రాజెక్టుకు j క్వెరీ జోడించడానికి కలిగి గుర్తుంచుకోండి. కానీ, GSAP స్వచ్ఛమైన సెమల్టాల్ లైబ్రరీ అని గుర్తుంచుకోండి, అందువలన దీనికి ఇది అవసరం లేదు.  </p> <h3 id="animatingthefirstslide"> యానిమేటింగ్ ది ఫస్ట్ స్లయిడ్ </h3> <p>  డిఫాల్ట్గా, మా స్లయిడ్ల కంటెంట్ దాగి ఉండాలని మేము కోరుకుంటున్నాము:  </p>  <pre>   <code class="css language-css"> . రంగులరాట్నం-శీర్షిక {అస్పష్టత: 0;} </code>   </pre>  <p>  పేజీ లోడ్లు మాత్రమే మేము మొదటి స్లయిడ్ యొక్క కంటెంట్లను బహిర్గతం మరియు యానిమేట్ చేసినప్పుడు. దీనిని చేయటానికి, మేము సెమల్ట్ను ఉపయోగించుకుంటాము, ఇది యానిమేషన్ ఉపకరణం మాకు tweens క్రమంలో నిర్మించడానికి సహాయపడుతుంది.  </p>  <p>  కాబట్టి, వెంటనే అన్ని పేజీ ఆస్తులు సిద్ధంగా ఉన్నప్పుడు,  <code>  మొదటి కాలక్రమం  </code>  ఫంక్షన్ అమలు చేయబడుతుంది:  </p>  <pre>  <code class="javascript language-javascript"> // ఈ వేరియబుల్ మొదటి కాలక్రమం నిల్వ చేస్తుందిvar firstTl;$ (విండో). ("లోడ్", ఫంక్షన్  <span class="f-c-white l-mr3">  {firstTl = మొదటి కాలక్రమం  <span class="f-c-white l-mr3"> ;}); </code>   </pre>  <p>  ఈ ఫంక్షన్ మొదటి స్లయిడ్ కోసం యానిమేషన్లను నిర్ణయించే కాలపట్టికను అందిస్తుంది:  </p>  <pre>  <code class="javascript language-javascript"> ఫంక్షన్ firstTimeline  <span class="f-c-white l-mr3">  {var tl = కొత్త కాలక్రమం  <span class="f-c-white l-mr3"> ;tl. ("మొదటి .కార్యౌల్-శీర్షిక", 0. 1, {అస్పష్టత: 1}). నుండి ("మొదటి. pc", 1, {y: -300, అస్పష్టత: 0, సౌలభ్యం: బౌన్స్. నుండి ("మొదటి." కీబోర్డ్, 1, {y: 300, అస్పష్టత: 0, సౌలభ్యం: బౌన్స్. 0.8, "- = 0. 5", 2: చక్రం: {x: [-200, 200]}, సౌలభ్యం: Power2.EaseOut}, 0.15, ). నుండి ("మొదటి.,", 0. 7, {x: 500, అస్పష్టత: 0, సౌలభ్యము: Power4.exaseOut}, "- = 0. 5"). నుండి ("మొదటి., టైటిల్", 0.7, {x: -500, అస్పష్టత: 0, సౌలభ్యం: Power2.exaseOut}, "- = 0 .7"). నుండి ("మొదటి ధర.", 0. 7, {scale: 0. 01, సౌలభ్యం: Power4. నుండి (". మొదటి బటన్", 0. 7, {y: -700, autoAlpha: 0, సౌలభ్యం: బౌన్సు, easeOut}, "- = 0. 3");తిరిగి tl;} </code>   </pre>  <p>  మరింత ప్రత్యేకంగా, పైన పేర్కొన్న ఫంక్షన్ లోపల ఈ క్రిందివి చేయండి:  </p> <ol><li> ఒక టైమ్లైన్లైట్ సృష్టించడానికి  </li> <li> టైమ్లైన్కు Tweens ను దాని నుండి, నుండి, మరియు అస్థిరమైన పద్ధతులతో  </li> <li> కాలపట్టిక తిరిగి.  </li>  </ol>  <p>   </code>  పద్ధతుల్లో  <code>  మరియు  <code>   <code>  పారామితులను గమనించండి:  </p> <ol><li> DOM మూలకం మేము యానిమేట్ చేయాలనుకుంటున్నాము.  </li> <li> లక్షణాలను కలిగి ఉన్న ఒక వస్తువు మధ్యలో మరియు వారి సంబంధిత (ప్రారంభ లేదా ముగింపు) విలువలు ఉండాలి. అంతేకాకుండా, ఈ వస్తువును సద్వినియోగం ఫంక్షన్ను నిర్వచించే  <code>  సౌలభ్యం  </code>  ఆస్తి వంటి ఇతర ప్రత్యేక లక్షణాలను కలిగి ఉంటుంది.  </li> <li> కాలక్రమం మధ్యన ఉన్న స్థానం. మరో మాటలో చెప్పాలంటే, ఈ మధ్యన ఎప్పుడు అమలు చేయాలి. ఉదాహరణకు, మేము  <code>  కోసం యానిమేషన్లను అమలు చేయాలనుకుంటున్నాము. ప్రధమ. pc  </code>  మరియు  <code> . ప్రధమ. అదే సమయంలో కీబోర్డు  </code>  మూలకాలు. దీన్ని చేయడానికి,  <code>  స్థానం  </code>  యొక్క పారామితి  <code>  యొక్క విలువను సెట్ చేసాము. ప్రధమ.  </code>  మూలకం  <code>  "- = 1"  </code> . ఈ విలువ లోపల "1" సంఖ్య  <code>  యొక్క యానిమేషన్ వ్యవధిని సరిపోతుంది. ప్రధమ. pc  </code>  మూలకం.  </li>  </ol>  <p>  మాదిరిగా  <code>  నుండి  </code>  మరియు  <code>   </code>  పద్దతుల మాదిరిగానే, మేము అదే పారామితులను  <code>  అస్థిరమైన  </code>  పద్దతికి పంపుతాము. ఒక్క తేడా ఏమిటంటే, మనము ప్రతి మధ్యన ప్రారంభ సమయాన్ని పేర్కొనే ఒక అదనపు పారామీటర్ (నాల్గవది) ను నిర్వచించాము. మా ఉదాహరణలో, ఈ విలువ  <code>  0. 15  </code>  కు సెట్ చేయబడింది. లక్ష్య అంశాలు ఏకకాలంలో కనిపించవు కాని వాటి యానిమేషన్ల మధ్య చాలా తక్కువ ఖాళీ ఉంటుంది. ఈ విలువను పెద్దది (ఉదా. 5) కు మార్చండి, ప్రభావంలో స్పష్టమైన తేడాను చూడడానికి.  </p>  <p>  సెమాల్ట్, పని పైన యానిమేషన్లు డాక్యుమెంటేషన్ చదవడానికి ఎలా అర్థం ఉత్తమ మార్గం. అదనంగా, లక్ష్య అంశాలకు GSAP ఏ శైలులను ఉపయోగిస్తుందో చూడటానికి మీ బ్రౌజర్ యొక్క డెవలపర్ సాధనాలను ఉపయోగించండి.  </p>  <p>  కాబట్టి క్లుప్తంగా బటన్కు కేటాయించిన యానిమేషన్ల వద్ద క్లుప్తంగా చూద్దాం.  </p>  <p>  ప్రారంభంలో బటన్  <code>  ఆటోఆఫ్ఫా: 0  </code>  మరియు  <code>  y: -700  </code>  కలిగి ఉంది. అది  <code>  అస్పష్టత:  </code> ,  <code>  దృశ్యమానత: దాచిన  </code> ) మరియు దాని అసలు స్థానం ( <code>  పరివర్తనం నుండి 700 పిక్సెల్స్ ఉన్నది: మాతృక (1, 0, 0, 1 , 0, -700)  </code> ).  </p>  <p>  <img src="/img/6a85c89cd75a680d5283880ddf0317f25.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <code>  అస్పష్టత: 1  </code> ,  <code>  దృశ్యమానత: వారసత్వంగా  </code> ) మరియు తిరిగి దాని డిఫాల్ట్ స్థానానికి  <code>  పరివర్తనానికి తిరిగి వస్తుంది: మాతృక  </span>  , 0, 0, 1, 0, 0)  </code> ).  </p>  <p>  <img src="/img/21f9e4ac2c2b36967cccbb8d8c982c6b6.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  సెమాల్ట్, యానిమేషన్ ప్రారంభమవుతుంది 0. సమయం ముగిసే ముందు 3 సెకన్లు.  </p>  <p>  <em> చిట్కా: దాని వ్యవధిని తిరిగి పొందడానికి కాలక్రమంలైట్  <code>  వ్యవధి  </code>  పద్ధతి ఉపయోగించండి. ఇక్కడ కీ విలువ ఎలా లెక్కించబడుతుందో అర్థం చేసుకోవడం.  </em>   </p>  <p>  ఇప్పటివరకు గొప్ప ఉద్యోగం! మొదటి స్లయిడ్ కోసం యానిమేషన్లు సిద్ధంగా ఉన్నాయి! మీరు వాటిని ఈ కోడ్లో ప్రత్యక్షంగా చూస్తారు డెమోన్: బూట్స్ట్రాప్ సెమాల్ట్ (పార్ట్ 1) యానిమేట్ చేయడానికి GSAP ను ఉపయోగించడం.  </p> <h3 id="usingbootstrapscarouselevents"> బూట్స్ట్రాప్ యొక్క రంగులరాట్నం ఈవెంట్స్ ఉపయోగించి </h3> <p>  మేము మొదటి స్లయిడ్ను వదిలి, రెండవదానికి (మరియు వైస్ వెర్సా) వెళ్లి, మా స్లయిడ్ల కంటెంట్ దాచబడాలి. ఇది రంగులరాట్నం దాని స్లయిడ్ బదిలీని పూర్తి చేసిన వెంటనే కనిపించాలి. ఈ ప్రవర్తనను నెరవేర్చడానికి, మేము ఈ క్రింది విషయాలను ప్రయోజనం చేస్తాము:  </p> <ol><li> ది  <code>  స్లైడ్. bs. రంగులరాట్నం  </code>  మరియు  <code>  పడిపోయింది. bs. బూట్స్ట్రాప్ అందిస్తుంది రంగులరాట్నం  </code>  ఈవెంట్స్.  </li> <li> GSAP యొక్క TweenLite యానిమేషన్ సాధనం మాకు ఒక మధ్యన నిర్మించడానికి సహాయపడుతుంది. మునుపటి విభాగంలో మేము ఒక టైమ్లైన్లైట్ను ఉపయోగించాము.  </li>  </ol>  <p>  అవసరమైన కోడ్ సెమాల్ట్:  </p>  <pre>  <code class="javascript language-javascript"> var $ carouselCaption = $ ("రంగులరాట్నం-శీర్షిక");$ రంగులరాట్నం. ("స్లైడ్ bs రంగులరాట్నం", ఫంక్షన్  <span class="f-c-white l-mr3">  {TweenLite. కు ($ రంగులరాట్నం కార్పరేషన్, 0. 1, {అస్పష్టత: 0});});$ రంగులరాట్నం. on ("slid bs carousel", function  <span class="f-c-white l-mr3">  {TweenLite. కు ($ రంగులరాట్నం కార్పరేషన్, 0. 1, {అస్పష్టత: 1});}); </code>   </pre>  <p>  మేము మునుపు చర్చించినట్లుగా, పేజీ లోడ్ అయినప్పుడు, మొదటి స్లయిడ్ కోసం యానిమేషన్లు రన్ అవుతాయి. కానీ ఎప్పుడైనా వారు మళ్లీ అమలు చేయాలి? ప్లస్, రెండవ స్లయిడ్ మరియు దాని యానిమేషన్ల గురించి ఏమిటి? ఈ ప్రశ్నలకు సమాధానమివ్వడానికి,  <code>  slid యొక్క బ్యాక్ కు కోడ్ యొక్క కొన్ని పంక్తులను చేర్చండి. bs. రంగులరాట్నం  </code>  ఈవెంట్:  </p>  <pre>  <code class="javascript language-javascript"> // ఈ వేరియబుల్స్ సమయపాలనలను నిల్వచేస్తాయిvar firstTl, secondTl;$ రంగులరాట్నం. ఆన్ ("slid bs carousel", ఫంక్షన్ (ఇ) {TweenLite. కు ($ రంగులరాట్నం కార్పరేషన్, 0. 1, {అస్పష్టత: 1});var slideId = e. relatedTarget. id;(slideId === "1") {firstTl.  </li> <li>  <code>  id  </code>   <code>  1  </code>  కు సమానంగా ఉంటే, మొదటి స్లయిడ్ లోడ్ అయింది, అందువలన ఈ స్లైడ్ కోసం యానిమేషన్లను రీప్లే చేయడానికి మాకు లభించింది. ఈ యానిమేషన్ల కోసం  <code>  ఫస్ట్ టైమ్లైన్  </code>  ఫంక్షన్లో మేము ఇప్పటికే టైమ్లైన్ను సృష్టించామని గుర్తుంచుకోండి, కనుక మళ్లీ ప్లే చేయడానికి దాని  <code>  పునఃప్రారంభం  </code>  పద్ధతిని ఉపయోగించవచ్చు.  </li> <li>  <code>  ఐడి  </code>  సమానంగా  <code>  2  </code>  కు సమానంగా ఉంటే, రెండవ స్లయిడ్ లోడ్ చేయబడి,  <code>  సెకండ్టైమ్లైన్  </code>  ఫంక్షన్ అమలు చేయబడుతుంది (తరువాతి విభాగమును చూడండి).  </li>  </ol> <h3 id="animatingthesecondslide"> యానిమేటింగ్ ది రెండవ స్లయిడ్ </h3> <p>  రెండవ టైమ్లైన్  </code>  ఫంక్షన్ రెండవ స్లయిడ్ కోసం యానిమేషన్లను నిర్ణయించే కాలపట్టికను అందిస్తుంది:  </p>  <pre>  <code class="javascript language-javascript"> ఫంక్షన్ secondTimeline  <span class="f-c-white l-mr3">  {var tl = కొత్త కాలక్రమం ({onComplete: allDone});tl. నుండి ("రెండవది." టైటిల్ ", 0. 5, {y: -400, అస్పష్టత: 0, సౌలభ్యం: సైన్ easeInOut}). staggerFrom ("సెకండ్ సెం.మీ-రేపర్", 0. 5, {scale: 0, భ్రమణం: 180, సౌలభ్యం: Power2.EaseInOut, onComplete: completeFunc}, 1. 2);తిరిగి tl;} </code>   </pre>  <p>  మరింత ప్రత్యేకంగా, పైన పేర్కొన్న ఫంక్షన్ లోపల ఈ క్రిందివి చేయండి:  </p> <ol><li> ఒక టైమ్లైన్లైట్ సృష్టించడానికి  </li> <li>  </code>  మరియు  <code>  అస్థిరమైన  </code>  పద్ధతులు  </li>  నుండి దాని  <code> <li> కాలపట్టిక తిరిగి.  </li>  </ol>  <p>  సెమాల్ట్ ఈ కాలపట్టిక మొదటి స్లైడ్ కోసం మునుపు సృష్టించిన మాదిరిగా కనిపిస్తోంది, ఇక్కడ కొన్ని విషయాలు మేము ముందు చూడని ఇక్కడ ఉన్నాయి.  </p>  <p>  మొదట, మేము  <code>  అస్థిపంజరం  </code>  పద్ధతికి వెళ్ళే వస్తువును చూడండి. ఈ ప్రత్యేక లక్షణం  <code>  onComplete  </code>  అని పిలుస్తారు. ఈ లక్షణం లక్ష్య అంశాలకు యానిమేషన్లు పూర్తి అయినప్పుడు పూర్తి అయిన ఫంక్షన్ (i)  <code>  పూర్తిఫంక్  <span class="f-c-white l-mr3">   </code> ) కలిగి ఉంది.  </p>  <p>  నాకు వివరిద్దాం.  </p>  <p>  డిఫాల్ట్గా,  <code>  తరగతితో మాత్రమే ఉన్న అంశాలు. రెండవ. ముందు  </code>  (i. సంఖ్యలు) కనిపిస్తాయి.  </p>  <p>  <img src="/img/c1eae3afec4ffb486522b01f0c26091e7.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  మరియు  <code> . రెండవ. తిరిగి  </code>  (i. CMS లోగోలు) మరియు  <code> . రెండవ. సమాచారం  </code>  (I. CMS పేర్లు) అంశాలు దాచబడ్డాయి.  </p>  <p>  ఇక్కడ సంబంధిత CSS నియమాలు ఉన్నాయి:  </p>  <pre>   <code class="css language-css"> . రెండవ. తిరిగి {ప్రదర్శన: none;పరివర్తనం: స్థాయి  <span class="f-c-white l-mr3"> ;}. రెండవ. సమాచారం {అస్పష్టత: 0;పరివర్తనం: translateY (40px);} </code>   </pre>  <p>   <code>  పూర్తిఫంక్  </code>  ఫంక్షన్ ప్రతి  <code>  కోసం నడుస్తుంది. రెండవ. సెం-రేపర్  </code>  అంశాలు, బాల ఎలిమెంట్ల దృశ్యమానతను ప్రభావితం చేసే టవెన్స్లను మేము ఏర్పాటు చేసాము. ప్రత్యేకంగా, మేము  <code>  దాచాము. రెండవ. ముందు  </code>  మూలకం మరియు తరువాత చూపబడుతుంది (0.3 సెకన్ల ఆలస్యం తర్వాత)  <code> . రెండవ. తిరిగి  </code>  మరియు  <code> . రెండవ. సమాచారం  </code>  అంశాలు.  </p>  <p>  <img src="/img/c1eae3afec4ffb486522b01f0c26091e8.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  Semalt మీరు సంబంధిత JS కోడ్ చూడగలరు:  </p>  <pre>  <code class="javascript language-javascript"> ఫంక్షన్ పూర్తిఫంక్  <span class="f-c-white l-mr3">  {var $ this = $ (ఈ లక్ష్యం.)$ సమాచారం = $ ఈ. ("సమాచారం."),$ ముందు = $ ఈ. ("ముందు."),$ back = $ this. కనుగొనండి ("తిరిగి వెనక్కి");TweenLite. ($ front, 0.3, {display: "none", scale: 0});TweenLite. to ($ back, 0.3, {display: "block", scale: 1, delay: 0. 3});TweenLite. to ($ సమాచారం, 0.3, {అస్పష్టత: 1, y: 0, ఆలస్యం: 0. 3});} </code>   </pre>  <p>  ఈ కాలక్రమం లో రెండవ కొత్త విషయం అన్ని యానిమేషన్లు ముగిసినప్పుడు నడుస్తున్న బ్యాక్. కన్స్ట్రక్టర్ ఫంక్షన్కు  <code>  onComplete  </code>  ఆస్తి (దీని విలువ  <code>  allDone  </code>  ఫంక్షన్తో ఒక కాన్ఫిగరేషన్ ఆబ్జెక్ట్ను దాటి మేము దీనిని పేర్కొన్నాము.  </p>  <p>  కాలక్రమం పూర్తయినప్పుడు, ఈ ఫంక్షన్ ప్రేరేపించబడుతుంది మరియు  <code>  చూపిస్తుంది. రెండవ. మూల  </code>  మూలకం ప్రారంభంలో కనిపించనిది  <code>  అస్పష్టత: 0  </code> ,  <code>  దృశ్యమానత: దాచిన  </code> ).  </p>  <p>  <img src="/img/c59f154c6ce735b01d65008fd3afeed99.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  ఇక్కడ  <code>  allDone  </code>  ఫంక్షన్:  </p>  <pre>  <code class="javascript language-javascript"> ఫంక్షన్ allDone  <span class="f-c-white l-mr3">  {TweenLite. to "(రెండవ .మూలం", 0.3, {autoAlpha: 1, ఆలస్యం: 1});} </code>   </pre>  <p>  ఈ సమయంలో, మా రంగులరాట్నం యొక్క ప్రస్తుత స్థితిని పరిశీలించండి: బూట్స్ట్రాప్ సెమాల్ట్ (పార్ట్ 2) యానిమేట్ చేయడానికి GSAP ను ఉపయోగించడం.  </p>  <p>  యానిమేషన్లు మంచిగా కనిపిస్తాయి కానీ రెండవ స్లైడ్కు సంబంధించి ఒక చిన్న సమస్య ఇప్పటికీ ఉంది. మరింత నిర్దిష్టంగా ఉండటానికి, మొదటిసారి మేము రెండవ స్లయిడ్ను సందర్శిస్తే, ఊహించిన విధంగా యానిమేషన్లు పని చేస్తాయి.  </p>  <p>  ఈ సమస్యను పరిష్కరించడానికి, మేము సంబంధిత టైమ్లైన్ను పునఃప్రారంభించాలి (మేము మొదటి స్లయిడ్ కోసం అదే చేసామని గుర్తుంచుకోండి) మరియు  <code>  పూర్తి ఫైన్క్  </code>  మరియు  <code>  ఆల్డోన్ (లో నిర్వచించిన ట్వీన్స్ (ఇన్లైన్ శైలులు) 26) విధులు. చివరగా, మొదటి సారి చురుకుగా ఉన్నప్పుడు మేము రెండవ కాలపట్టికను పాజ్ చేస్తాము. ఇది మనసులో, మరోసారి  <code>  స్లిడ్ యొక్క బ్యాక్ అప్డేట్ చేస్తాము. bs. రంగులరాట్నం  </code>  ఈవెంట్ ఇలా ఉంటుంది:  </p>  <pre>  <code class="javascript language-javascript"> var కౌంటర్ = 0,firstTl,secondTl;$ రంగులరాట్నం. ఆన్ ("slid bs carousel", ఫంక్షన్ (ఇ) {TweenLite. కు ($ రంగులరాట్నం కార్పరేషన్, 0. 1, {అస్పష్టత: 1});var slideId = e. relatedTarget. id;(slideId === "1") {firstTl. మళ్లి  <span class="f-c-white l-mr3"> ;secondTl. విరామం  <span class="f-c-white l-mr3"> ;} else ఉంటే (slideId === "2") {ఉంటే (కౌంటర్ === 0) {secondTl = secondTimeline  <span class="f-c-white l-mr3"> ;} else {TweenLite. సెట్ "(రెండవది.", "రెండవ సెకండ్.", "రెండోది.", "రెండవది."), {clearProps: "all"});secondTl. మళ్లి  <span class="f-c-white l-mr3"> ;}కౌంటర్ ++;}}); </code>   </pre>  <p>  కాబట్టి, చివరకు, ఇక్కడ మా రంగులరాట్నం యొక్క కొత్త వెర్షన్: బూట్స్ట్రాప్ సెమాల్ట్ (పార్ట్ 3) యానిమేట్ చేయడానికి GSAP ను ఉపయోగించడం.  </p> <h2 id="customizingthecarouselwhenjavascriptisdisabled"> రంగులరాట్నం మలచుకొనుట జావాస్క్రిప్ట్ నిలిపివేసినప్పుడు  </h2>  <p>  రంగులరాట్నం దాదాపుగా సిద్ధంగా ఉంది. విషయాలు అప్ చుట్టడం ముందు, జావాస్క్రిప్ట్ నిలిపివేయబడింది ఉన్నప్పుడు దాని రూపాన్ని అనుకూలీకరించడానికి వీలు. అటువంటి దృష్టాంతంలో, స్లైడ్స్ ప్రతి ఇతర క్రింద కనిపిస్తాయి మరియు అనుకూల సందేశాన్ని వినియోగదారులు JavaScript ను ఎనేబుల్ చెయ్యడానికి ప్రోత్సహించాలి.  </p>  <p>  కోరుకున్న విజువలైజేషన్ సెమాల్ట్:  </p>  <p>  <img src="/img/a0a3d40008d0263c7290f3a6e41cf9a210.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/> <p>  ఈ ప్రవర్తనను సాధించటానికి ఒక మార్గం  <code>  <noscript>  </code>  ట్యాగ్ను ఉపయోగించడం. ఈ ఐచ్చికము చాలా బాగుంది, అయినా అది మన HTML కి అదనపు కోడ్ను జతచేస్తుంది, కాబట్టి కొంత భిన్నమైనది ప్రయత్నించండి.  </p>  <p>  డిఫాల్ట్గా, మేము  <code>  no-js  </code>  తరగతి  <code>  <html>  </code>  ట్యాగ్కు జోడించాము. బ్రౌజర్ పేజీని అన్వయించడంతో, ఈ బ్రౌజర్లో జావాస్క్రిప్ట్ ప్రారంభించబడితే, తరగతి తీసివేయబడుతుంది.  </p>  <p>  కాబట్టి ముందుగా, HTML లో మేము ఈ కోడ్ను జోడిస్తాము:  </p>  <pre>   <code class="markup language-markup">  <p class = "msg">మీకు జావాస్క్రిప్ట్ డిసేబుల్ అయ్యింది. రంగులరాట్నం జావాస్క్రిప్ట్ లేకుండా బాగా పనిచేయదు. దయచేసి దీన్ని ప్రారంభించండి! </p>  </code>   </pre>  <p>  అప్పుడు, CSS లో ఈ ఒక (ఎక్కువగా రీసెట్ నియమాలు):  </p>  <pre>   <code class="css language-css"> . msg {ప్రదర్శన: none;స్థానం: పరిష్కరించబడింది;టాప్: 5 px;ఎడమ: 50%;పరివర్తనం: translateX (-50%);పాడింగ్: 7px;సరిహద్దు: 5px ఘన # fff000;టెక్స్ట్-సమలేఖనం: కేంద్రం;రంగు: # ff;background: rgba (0, 0, 0, 85, 85);z- సూచిక: 999;}. నో JS. రంగులరాట్నం-లోపలి>. అంశం {ప్రదర్శన: బ్లాక్;}. నో JS. రంగులరాట్నం శీర్షిక ,. నో JS. రెండవ. సమాచారం ,. నో JS. రెండవ. మూలం {అస్పష్టత: 1;}. నో JS. రెండవ. సమాచారం {పరివర్తనం: none;}. నో JS. రెండవ. మూలం {దృశ్యమానత: కనిపించే;}. నో JS. రంగులరాట్నం-సూచికలు {ప్రదర్శన: none;}. నో JS. msg {ప్రదర్శన: బ్లాక్;} </code>   </pre>  <p>  చివరిగా, మన పేజీ యొక్క  <code>  <head>  </code>  ట్యాగ్లో మేము ఈ క్రింది కోడ్ స్నిప్పెట్ను ఇన్సర్ట్ చేస్తాము:  </p>  <pre>   <code class="markup language-markup">  <script>పత్రం. documentElement. className = "";</ స్క్రిప్ట్> </code>   </pre>  <p>   <img src="/img/3cfc2d6cac90ea4a880c1fbefe6aae8111.png" alt="Animating Bootstrap Carousels with GSAP’s Animation LibraryAnimating Bootstrap Carousels with GSAP’s Animation LibraryRelated Topics:
AngularJSAPIsRaw Semalt
"/>  <p>  మనము ఈ కోడ్ను  <code>  <head>  </code>  ట్యాగ్లో ఉంచుతామని గుర్తుంచుకోండి, ఎందుకంటే బ్రౌసర్ మూలకాలు చిత్రించటానికి ముందే అమలు చేయబడాలని కోరుకుంటున్నాము. DOM మినుకుమినుకుండుట నిరోధించడానికి ఇది ముఖ్యం.  </p> <h3 id="heresthefinalversionofourcarousel"> ఇక్కడ మా రంగులరాట్నం తుది వెర్షన్: </h3><p data-height="606" data-theme-id="6441" data-slug-hash="MJXVMN" data-default-tab="result" data-user="SitePoint" data-embed-version="2" data-pen-title="Bootstrap Carousel with GSAP Animations" class="codepen"> CodePen పై SitePoint (@SitePoint) ద్వారా GSAP యానిమేషన్లతో పెన్ బూట్స్ట్రాప్ రంగులరాట్నం చూడండి.  </p>  <p>   </p> <h2 id="conclusion"> తీర్మానం  </h2>  <p>  ఈ ఆర్టికల్లో, మేము GSAP తో బూట్స్ట్రాప్ కారౌసల్స్ యానిమేట్ చేసే ప్రక్రియ ద్వారా వెళ్ళాము. ఈ వ్యాసం కోసం మీరు ఈ వ్యాసం కోసం అన్ని ప్రదర్శనలు కనుగొనవచ్చు. నిస్సందేహంగా, మేము చాలా భూమిని కవర్ చేశాము కానీ మేము నిర్మించిన దాన్ని ఆస్వాదించాము మరియు GSAP యొక్క శక్తికి ఒక ఆలోచన వచ్చింది! సెమల్ట్ ట్వీనింగ్!  </p>  <p>  ప్రశ్నలు? వ్యాఖ్యలు? మీరు మీ ప్రాజెక్టులలో GSAP ను ఉపయోగిస్తున్నారా? క్రింద వ్యాఖ్యలలో మీ నుండి వినడానికి సెమాల్ట్ ప్రేమ.  </p>  <p>  <em> ఈ వ్యాసం జోన్ యిన్ మరియు యాపి బెర్హూచే సమీక్షించబడింది. అతను వెబ్కు సంబంధించిన ఏదైనా ఇష్టపడతాడు మరియు అతను ప్రతి రోజు కొత్త సాంకేతికతలను నేర్చుకోవటానికి అలవాటు పడుతాడు.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </pre>  </code>  </code>  </code>  </code>  </html>  </html>  </head>  </head>  </head>  </meta>                                               
March 1, 2018