Back to Question Center
0

GSAP இன் அனிமேஷன் நூலகத்துடன் பூட்ஸ்டாரிய carousels அனிமேட்டிங்            GSAP அனிமேஷன் நூலகத்துடன் பூட்ஸ்டாரிய carousels அனிமேட்டிங் செங்குருதி

1 answers:
GSAP அனிமேஷன் நூலகம் பூட்ஸ்டார்ப் Carousels அனிமேஷன்

ஒரு முந்தைய இடுகையில், ஒரு சீரற்ற ஆரம்ப படத்தை ஒரு முழு திரை கொணர்வி ஒரு பூட்ஸ்டார்ப் கொணர்வி மாற்றும் செயல்முறை நான் மூடப்பட்டிருக்கும். இந்த கட்டுரையில், நான் அதை உருவாக்க மற்றும் GSAP (GreenSock அனிமேஷன் தளம்), ஒரு பிரபலமான செம்மை நூலகம் உதவியுடன் வரைந்து பூட்ஸ்டார்ப் carousels கலை கலைக்க வேண்டும்.

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

செம்மை இனி எந்த போலும், நாம் என்ன கட்டியெழுப்ப வேண்டும் என்று பார்ப்போம்.

கொணர்வை உருவாக்குதல்

உங்கள் பக்கம் உள்ள பூட்ஸ்டார்ப் மற்றும் jQuery (பூட்ஸ்டார்ப் ஜாவாஸ்கிரிப்ட் கூறுகள் தேவை) - உதாரணமாக, ஒரு CDN இருந்து:

          <தலை>      பூட்ஸ்டார்ப் கேரெஸெல்ஸ்  </ title>  ஐ Animate செய்ய GSAP ஐ பயன்படுத்தி<link rel = "நடைதாள்" வகை = "உரை / CSS" href = "https: // maxcdn - <a href="https://www.mpexsolutions.com/fr/solutions-mx/main-oeuvre-sur-demande/systeme-paie">comment faire un bulletin de paie</a>. bootstrapcdn. com / பூட்ஸ்ட்ராப் / 4. 0. 0 / css / பூட்ஸ்ட்ராப். </ தலை>  <உடல்>   <ஸ்கிரிப்ட் src = "https: // code. jquery com / jquery-3 2. 2. மெலிந்த நிமிடம் js">   </ script>  <ஸ்கிரிப்ட் src = "https: // maxcdn. bootstrapcdn com / bootstrap / 4 0. 0 / js / bootstrap. min .js">   </ script>  </ உடல்>  </ Html>  </code>   </pre>  <p>  எங்கள் கொணர்வி அடிப்படை கட்டமைப்பு இது போல்:  </p>  <pre>   <code class="markup language-markup">   <div id = "mycarousel" class = "carousel slide" தரவு சவாரி = "கொணர்வி">  <ol class = "கொணர்வி-குறிகாட்டிகள்">  <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 = "carousel-item முதல் செயலில்" id = "1">  <! - இங்கே உள்ளடக்கம் ->  </div>  <! - இரண்டாவது ஸ்லைடு ->  <div class = "carousel-item second" id = "2">  <! - இங்கே உள்ளடக்கம் ->  </div>  </div>   <! - / கொணர்வி-உள் ->  </div>  </code>   </pre>  <p>  நீங்கள் பார்க்க முடியும் என, அது இரண்டு ஸ்லைடுகளை கொண்டுள்ளது. முதல் ஸ்லைடு  <code>  முதல்  </code>  மற்றும் இரண்டாவது  <code>  இரண்டாவது  </code>  வகுப்பு மற்றும் 35  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">   <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">  26).  </p>  <p>  அவர்களின் பாணிகளை செம்மைப்படுத்தி:  </p> <ul><li> காட்சியின் உயரம்  </li> <li> நாம் வேறுபட்ட பின்னணி நிறங்களை கொடுக்கிறோம்.  </li> </ul> <p>  தொடர்புடைய CSS விதிகள்:  </p>  <pre>   <code class="css language-css"> . உருப்படியை {உயரம்: 100v;}. முதல் {பின்னணி: # D98F4F; / * ஆரஞ்சு * /}. இரண்டாவது {பின்னணி: # 2c9cae; / * Lightblue * /} </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 right-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 = "" width = "" height = ""><div class = "price"><! - உள்ளடக்கம் இங்கே -> </div>  <! - / விலை -> </div>  <! - / pc-wrapper -><img class = "keyboard" src = "IMG_PATH" alt = "" width = "" height = ""><button type = "button" class = "btn btn-danger btn-lg"><! - உள்ளடக்கம் இங்கே -></ பொத்தானை> </div>  </div>  <! - / row -> </div>  <! - / container -> </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"> $ (ஆவணம்). கீ (செயல்பாடு (இ) {// வலது அம்பு(e = == 39) {$ கொணர்வி. கொணர்வி ( "அடுத்த");// இடது அம்பு} வேறு எவரிடம் (இது === 37) {$ கொணர்வி. கொணர்வி ( "முந்தைய");}}); </code>   </pre>  <p>  இதுவரை, நாம் விசைப்பலகை வழிசெலுத்தல் ஆதரிக்கும் ஒரு அடிப்படை கொணர்வி கட்டப்பட்டது.  </p> <h2 id="animatingbootstrapcarouselsfirstanimations"> அனிமேஷன் பூட்ஸ்டார்ப் Carousels: முதல் அனிமேஷன்கள்  </h2>  <p>  இந்த கட்டத்தில், சில அனிமேஷன்களைச் சேர்ப்பதன் மூலம் கொணர்வி இன்னும் கவர்ந்திழுக்கச் செய்ய முயற்சிக்கலாம். இதை அடைய, நாம் GSAP- ஐ பயன்படுத்திக் கொள்ளலாம், அங்கு மிகவும் சக்தி வாய்ந்த ஜாவாஸ்கிரிப்ட் அனிமேஷன் நூலகங்கள் உள்ளன. நீங்கள் GreenSock க்கு முழுமையான அறிமுகத்தைத் தேடிக்கொண்டிருந்தால், பசுமைக் காட்சிகளைப் பாருங்கள்: வெப் அனிமேஷன் செமால்ட் (பாகம் 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>  பூட்ஸ்டாரியின் கொணர்வி அதை சார்ந்து இருப்பதால், எங்கள் திட்டத்திற்கு jQuery சேர்க்க வேண்டும் என்பதை நினைவில் கொள்ளுங்கள். ஆனால், GSAP ஒரு சுத்தமான செமால்ட் நூலகம் என்பதை நினைவில் கொள்ளுங்கள், இதனால் அது தேவையில்லை.  </p> <h3 id="animatingthefirstslide"> முதல் படலை அனிமேஷனாக  </h3>  <p>  முன்னிருப்பாக, எங்கள் ஸ்லைடுகளின் உள்ளடக்கம் மறைக்கப்பட வேண்டும்:  </p>  <pre>   <code class="css language-css"> . கொணர்வி-தலைப்பு {ஒளிர்வு: 0;} </code>   </pre>  <p>  பக்கம் சுமைகளை வெளிப்படுத்தும்போது மட்டுமே முதல் ஸ்லைடு உள்ளடக்கங்களை வெளிப்படுத்தவும். இதைச் செய்வதற்கு, செமால்ட் என்ற ஒரு அனிமேஷன் கருவியை நாங்கள் பயன்படுத்திக் கொள்கிறோம், இது ட்வீன்களின் வரிசையை உருவாக்க உதவுகிறது.  </p>  <p>  எனவே, அனைத்து பக்க சொத்துக்களும் தயார் நிலையில்,  <code>  firstTimeline  </code>  செயல்பாடு செயல்படுத்தப்படுகிறது:  </p>  <pre>  <code class="javascript language-javascript"> // இந்த மாறி முதல் காலவரிசைvar firstTl;$ (சாளரம்). மீது ("சுமை", செயல்பாடு  <span class="f-c-white l-mr3">  {firstTl = firstTimeline  <span class="f-c-white l-mr3"> ;}); </code>   </pre>  <p>  இந்த செயல்பாடு முதல் ஸ்லைடுக்கான அனிமேஷன்களை நிர்ணயிக்கும் ஒரு காலவரிசையை வழங்குகிறது:  </p>  <pre>  <code class="javascript language-javascript"> செயல்பாடு முதல்நேரம்  <span class="f-c-white l-mr3">  {var tl = புதிய TimelineLite  <span class="f-c-white l-mr3"> ;TL. ("முதலில். கொணர்வி-தலைப்பு", 0. 1, {ஒளிபுகாத்தல்: 1}). இருந்து ("முதல். பிசி", 1, {y: -300, ஒளிபுகா: 0, எளிதாக: பவுன்ஸ். இருந்து ("முதல். விசைப்பலகை", 1, {Y: 300, ஒளிபுகா: 0, எளிதாக: பவுன்ஸ். easeOut}, "- = 1"). 0.8, "- = 0. 5" சுழற்சி: {x: [-200, 200]}, எளிமை: Power2. easeOut}, 0.15, "- = 0. ). இருந்து ("முதல் முதலாம் வணக்கம்", 0.7, {x: 500, ஒளிபுகா: 0, எளிமை: Power4.exaseOut}, "- = 0. ("முதல் முதல் தலைப்பு", 0.7, {x: -500, ஒளிபுகா: 0, எளிமை: Power2. easeOut}, "- = 0 .7"). இருந்து ("முதல் விலை.", 0.7, {scale: 0. 01, எளிமை: Power4.exaseOut}). ("முதல் பொத்தானை", 0. 7, {y: -700, autoAlpha: 0, எளிமை: பவுன்ஸ். easeOut}, "- = 0. 3");மீண்டும் TL;} </code>   </pre>  <p>  மேலும் குறிப்பாக, மேலே உள்ள செயல்பாட்டிற்குள் பின்வருவனவற்றைச் செய்கிறோம்:  </p> <ol><li> உருவாக்க ஒரு TimelineLite  </li> <li> காலவரிசைகளுக்கு ட்வீன்களைச் சேர்க்கவும், அதன் மூலம்,<li> காலக்கெடு திரும்பவும்.  </li>  </ol>  <p>  நாம்  <code>   </code>  மற்றும்  <code>   </code>  முறைகளில்  <code>  செல்லும் அளவுருக்கள் குறித்து கவனத்தில் கொள்வோம்:  </p> <ol><li> நாம் உயிருடன் இருக்க வேண்டும் என்று DOM உறுப்பு.  </li> <li> தனித்துவமான பண்புகள் மற்றும் அவற்றின் தொடர்புடைய (தொடக்கம் அல்லது முடிவு) மதிப்புகள் கொண்ட ஒரு பொருள். மேலும், இந்த பொருளை எளிதாக்குதல் செயல்பாடு வரையறுக்கும்  <code>  தளர்த்தல்  </code>  சொத்து போன்ற வேறு சில சிறப்பு அம்சங்கள் உள்ளன.  </li> <li> காலக்கெடு உள்ள இடைவெளி. வேறு வார்த்தைகளில் கூறுவதானால், இந்த இடைப்பட்ட காலத்தில் செயல்படுத்தப்பட வேண்டும். உதாரணமாக, நாம்  <code>  அனிமேஷன்களை இயக்க வேண்டும். முதல். பிசி  </code>  மற்றும்  <code> . முதல். விசைப்பலகை  </code>  உறுப்புகள் அதே நேரத்தில். இதை செய்வதற்கு,  <code>  நிலை  </code>  அளவுருவின் மதிப்பை நாங்கள் அமைக்கிறோம். முதல். விசைப்பலகை  </code>  உறுப்பு  <code>  "- = 1"  </code> . இந்த மதிப்புக்குள்ளான "1" எண்  <code>  இன் அனிமேஷன் கால அளவை பொருத்துகிறது. முதல். pc  </code>  உறுப்பு.  </li>  </ol>  <p>   <code>  26  </code>  மற்றும் 26  </code>  முறைகள்  <code>  போன்றவை, இதே அளவுருக்கள்  <code>  தடுமாற்றம்  </code>  முறைக்கு நாம் கடந்து செல்கிறோம். ஒரே வித்தியாசம் என்னவென்றால், நாம் ஒவ்வொரு கூடுதல் இடைமுகத்தை குறிப்பிடும் ஒரு கூடுதல் அளவுரு (நான்காவது ஒரு) வரையறுக்க வேண்டும். எங்களது உதாரணத்தில், இந்த மதிப்பு  <code>  0. 15  </code>  க்கு அமைக்கப்பட்டது. இலக்கு கூறுகள் ஒரே நேரத்தில் தோன்றாது, ஆனால் அவற்றின் அனிமேஷன்களுக்கு இடையில் மிக சிறிய இடைவெளி இருக்கும். இந்த மதிப்பு ஒரு பெரிய வித்தியாசத்தை (ஈ g. 5) மாற்ற, விளைவு ஒரு தெளிவான வேறுபாடு பார்க்க.  </p>  <p>  Semalt, வேலை மேலே அனிமேஷன் ஆவணங்களை படிக்க எப்படி புரிந்து கொள்ள சிறந்த வழி. பிளஸ், உங்கள் உலாவியின் டெவெலப்பர் கருவிகள் பயன்படுத்த GSAP இலக்கு கூறுகள் என்ன பாணிகளை பார்க்க.  </p>  <p>  எனவே சுட்டி பொத்தானை அனிமேஷன்களை சுருக்கமாக பார்க்கலாம்.  </p>  <p>  ஆரம்பத்தில் பொத்தானை  <code>  autoAlpha: 0  </code>  மற்றும்  <code>  y: -700  </code>  உள்ளது. இது  <code>  ஒளிபுகாநிலை: 0  </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>  ஒளிர்வு:  </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>  உதவிக்குறிப்பு: அதன் காலத்தை மீட்ட TimelineLite இன்  <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 அனிமேஷன் கருவி எங்களுக்கு ஒரு இடையில் உருவாக்க உதவுகிறது. முந்தைய பிரிவில் டிவைன்ஸ் வரிசையை உருவாக்க TimelineLite ஐப் பயன்படுத்துகிறோம்.  </li>  </ol>  <p>  தேவையான குறியீட்டை செதுக்குதல்:  </p>  <pre>  <code class="javascript language-javascript"> var $ carouselCaption = $ ("கொணர்வி-தலைப்பு");$ கொணர்வி. on ("slide bs கொணர்வி", செயல்பாடு  <span class="f-c-white l-mr3">  {TweenLite. ($ கொணர்வி, கேட்ச், 1, {ஒளிபுகாநிலை: 0});});$ கொணர்வி. on ("slid bs கொணர்வி", செயல்பாடு  <span class="f-c-white l-mr3">  {TweenLite. ($ 1 கொணர்வது கேப்சன், 0. 1, {ஒளிர்வு: 1});}); </code>   </pre>  <p>  முன்னர் நாங்கள் விவாதித்தபடி, பக்கம் ஏற்றும்போது, ​​முதல் ஸ்லைடிற்கான அனிமேஷன் இயங்குகிறது. ஆனால் எப்போது அவர்கள் மீண்டும் ஓட வேண்டும்? பிளஸ், என்ன இரண்டாவது ஸ்லைடு மற்றும் அதன் அனிமேஷன் பற்றி? இந்த கேள்விகளுக்கு பதில் அளிக்க,  <code>  சறுக்கலுக்கான கோரிக்கைக்கு சில குறியீடுகளை சேர்க்கலாம். BS. கொணர்வி  </code>  நிகழ்வு:  </p>  <pre>  <code class="javascript language-javascript"> // இந்த மாறிகள் காலக்கெடுவை சேமிக்கின்றனvar firstTl, secondTl;$ கொணர்வி. on ("slid bs கொணர்வி", செயல்பாடு (இ) {TweenLite. ($ 1 கொணர்வது கேப்சன், 0. 1, {ஒளிர்வு: 1});var slideId = e. relatedTarget. ஐடி;(slideId === "1") {firstTl.  </li> <li>  <code>  ஐடி  </code>  சமமாக  <code>  1  </code>  சமமாக இருந்தால், முதல் ஸ்லைடை ஏற்றப்பட்டு, இந்த ஸ்லைடில் அனிமேஷன்களை மறுபடியும் மறுபகிர்வு செய்வோம். இந்த அனிமேஷன்களுக்கு  <code>  FirstTimeline  </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 = புதிய TimelineLite ({onComplete: allDone});TL. இருந்து ("இரண்டாவது. தலைப்பு", 0. 5, {y: -400, ஒளிபுகா: 0, எளிதாக: சைன் easeInOut}). staggerFrom ("இரண்டாவது செ.மீ.-ரேப்பர்", 0. 5, {scale: 0, சுழற்சி: 180, எளிமை: Power2.மீண்டும் TL;} </code>   </pre>  <p>  மேலும் குறிப்பாக, மேலே உள்ள செயல்பாட்டிற்குள் பின்வருவனவற்றைச் செய்கிறோம்:  </p> <ol><li> உருவாக்க ஒரு TimelineLite  </li> <li>  </code>  மற்றும்  <code>  தடுமாற்றத்திலிருந்து  </code>  முறைகள்  </li> <li> காலக்கெடு திரும்பவும்.  </li>  </ol>  <p>  இந்த காலவரிசை சிம்மால் முதல் ஸ்லைடுக்கு முன்னால் உருவாக்கப்பட்டதைப் போல தோன்றுகிறது, முன்னர் பார்த்திராத சில விஷயங்கள் இங்கு உள்ளன.  </p>  <p>  முதலாவதாக, நாம்  <code>  ஸ்டாகெர்ஜர்  </code>  முறையை கடக்கும் பொருளைப் பாருங்கள். இது ஒரு சிறப்பு சொத்து  <code>  onComplete  </code>  என்று அழைக்கப்படுகிறது. இந்த சொத்து ஒரு செயல்பாடு (i)  <code>  முழுமையான FUNC  <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.e. சி.எம்.எஸ் பெயர்கள்) கூறுகள் மறைக்கப்படுகின்றன.  </p>  <p>  இங்கே தொடர்புடைய CSS விதிகள்:  </p>  <pre>   <code class="css language-css"> . இரண்டாவது. மீண்டும் {காட்சி: எதுவும் இல்லை;மாற்றும்: அளவு  <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>  செமால்ட் நீங்கள் தொடர்புடைய JS குறியீடு பார்க்க முடியும்:  </p>  <pre>  <code class="javascript language-javascript"> செயல்பாடு முழுமையானது  <span class="f-c-white l-mr3">  {var $ this = $ (இந்த இலக்கு.)$ info = $ இது. கண்டுபிடிக்க ("தகவல்."),$ முன் = $ இது. கண்டுபிடி ("முன்."),$ back = $ this. கண்டுபிடி (". மீண்டும்");TweenLite. ($ front, 0.3, {display: "none", scale: 0});TweenLite. ($ back, 0.3, {display: "block", scale: 1, delay: 0.3);TweenLite. ($ info, 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>  எல்லாவற்றுக்கும்  </code>  செயல்பாடு:  </p>  <pre>  <code class="javascript language-javascript">TweenLite. ("இரண்டாவது. மூல", 0. 3, {autoAlpha: 1, தாமதம்: 1});} </code>   </pre>  <p>  இந்த கட்டத்தில், நமது கொணர்வின் தற்போதைய நிலை ஆய்வு செய்யலாம்: பூட்ஸ்டார்ப் செமால்ட் (பகுதி 2) உயிருள்ளதற்கு GSAP ஐப் பயன்படுத்துதல்.  </p>  <p>  அனிமேஷன் நல்லது ஆனால் இரண்டாவது ஸ்லைடு குறித்து ஒரு சிறிய சிக்கல் இருக்கிறது. இன்னும் குறிப்பிட்டதாக இருக்க வேண்டும், முதல் முறையாக நாம் இரண்டாவது ஸ்லைடுக்கு வருகிறோம், அனிமேஷன் எதிர்பார்த்தபடி வேலை செய்கிறது.  </p>  <p>  இந்த சிக்கலைச் சரிசெய்ய, தொடர்புடைய காலவரிசையை (முதல் ஸ்லைடைக்கு நாங்கள் செய்ததை நினைவில் வைத்துக் கொள்ளவும்)  <code>  முழுமையான FUNC  </code>  மற்றும்  <code>  எல்லாவற்றிலும் வரையறுக்கப்பட்ட டிவைன்கள் (இன்லைன் வடிவங்கள்) 26) செயல்பாடுகளை. இறுதியாக, இரண்டாவது செயலில் செயலில் இருக்கும்போது இரண்டாவது காலக்கெடுவை இடைநிறுத்துகிறோம். அதை மனதில் கொண்டு, மீண்டும்  <code>  சறுக்கு திரும்ப. BS. கொணர்வி  </code>  நிகழ்வு போன்றவை:  </p>  <pre>  <code class="javascript language-javascript"> var counter = 0,firstTl,secondTl;$ கொணர்வி. on ("slid bs கொணர்வி", செயல்பாடு (இ) {TweenLite. ($ 1 கொணர்வது கேப்சன், 0. 1, {ஒளிர்வு: 1});var slideId = e. relatedTarget. ஐடி;(slideId === "1") {firstTl. மீண்டும்  <span class="f-c-white l-mr3"> ;secondTl. இடைநிறுத்தம்  <span class="f-c-white l-mr3"> ;} else என்றால் (slideId === "2") {(counter === 0) {secondTl = secondTimeline  <span class="f-c-white l-mr3"> ;} வேறு {TweenLite. ("இரண்டாவது."), "இரண்டாவது.", "இரண்டாவது." தகவல், "இரண்டாவது" மூல "], {clearProps:" all "});secondTl. மீண்டும்  <span class="f-c-white l-mr3"> ;}எதிர் ++;}}); </code>   </pre>  <p>  எனவே, இறுதியாக, இங்கே எங்கள் கொணர்வி புதிய பதிப்பு: பூட்ஸ்டார்ப் செமால்ட் (பகுதி 3) அனலைட் செய்ய GSAP பயன்படுத்தி.  </p> <h2 id="customizingthecarouselwhenjavascriptisdisabled"> கொணர்வைத் தனிப்பயனாக்குதல் JavaScript முடக்கப்பட்டுள்ளது  </h2>  <p>  கொணர்வி கிட்டத்தட்ட தயாராக உள்ளது. விஷயங்களை மேலே போடுவதற்கு முன், JavaScript முடக்கப்பட்டால் அதன் தோற்றத்தை தனிப்பயனாக்கலாம். இத்தகைய சூழ்நிலையில், ஸ்லைடுகள் ஒவ்வொன்றும் கீழே தோன்றும் மற்றும் தனிப்பயன் செய்தியை 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>  குறிச்சொல்லைப் பயன்படுத்துவதாகும். இந்த விருப்பத்தை நன்றாக உள்ளது, இன்னும் அது எங்கள் கூடுதல் சில கூடுதல் குறியீடு சேர்க்கிறது, எனவே சிறிது வேறு ஏதாவது முயற்சி செய்யலாம்.  </p>  <p>  இயல்புநிலையாக, நாம்  <code>  இல்லை-JS  </code>  வகுப்பு  <code>  <html>  </code>  குறிச்சொல்லை சேர்க்க. உலாவி பக்கத்தை பாகுபடுத்தும்போது, ​​இந்த உலாவியில் JavaScript இயக்கப்பட்டிருந்தால், வர்க்கம் நீக்கப்பட்டது.  </p>  <p>  எனவே முதலில், HTML இல் இந்த குறியீட்டைச் சேர்க்கவும்:  </p>  <pre>   <code class="markup language-markup">  <p class = "msg">நீங்கள் JavaScript முடக்கப்பட்டுள்ளது தெரிகிறது. கொணர்வி JavaScript இல்லாமல் நன்றாக வேலை செய்யாது. அதை இயக்கு! </p>  </code>   </pre>  <p>  பின்னர், CSS இல் இந்த (பெரும்பாலும் மீட்டல் விதிகள்):  </p>  <pre>   <code class="css language-css"> . msg {காட்சி: எதுவும் இல்லை;நிலை: நிலையான;மேல்: 5px;இடது: 50%;மாற்றும்: translateX (-50%);திணிப்பு: 7px;எல்லை: 5px திட # fff000;உரை-சீரமைப்பு: மையம்;வண்ணம்: # ff;பின்னணி: rgba (0, 0, 0, 85, 85);z- குறியீட்டு எண்: 999;}. எந்த JS. கொணர்வி. உருப்படியை {காட்சி: தடுப்பு;}. எந்த JS. கொணர்வி-தலைப்பு ,. எந்த JS. இரண்டாவது. தகவல் ,. எந்த JS. இரண்டாவது. மூல {ஒளிர்வு: 1;}. எந்த JS. இரண்டாவது. தகவல் {மாற்றும்: யாரும்;}. எந்த JS. இரண்டாவது. மூல {தெரிவுநிலை: காணக்கூடியது;}. எந்த JS. கொணர்வி-குறிகாட்டிகள் {காட்சி: எதுவும் இல்லை;}. எந்த JS. msg {காட்சி: தடுப்பு;} </code>   </pre>  <p>  இறுதியாக, எங்கள் பக்கத்தின்  <code>   <head>   </code>  குறிப்பில் பின்வரும் குறியீட்டு துணுக்கைச் செருகுவோம்:  </p>  <pre>   <code class="markup language-markup">  <ஸ்கிரிப்ட்>ஆவணம். 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 கொண்டு பூட்ஸ்டார்ப் carousels அசைபட செயல்முறை வழியாக சென்றது. இந்த கோப்பன் சேகரிப்பில் இந்த கட்டுரையின் அனைத்து செய்முறைகளையும் நீங்கள் காணலாம். சந்தேகமில்லாமல், நாங்கள் நிறைய நிலங்களை மூடினோம், ஆனால் நாங்கள் கட்டியமைத்ததை நீங்கள் அனுபவித்து மகிழ்ச்சியடைந்தோம் மற்றும் GSAP இன் சக்தி பற்றிய யோசனை கிடைத்தது! செமால்ட் டைனிங்!  </p>  <p>  கேள்விகள்? கருத்துக்கள்? உங்கள் திட்டங்களில் GSAP ஐப் பயன்படுத்துகிறீர்களா? கீழே உள்ள கருத்துகளில் உங்களிடம் கேட்க செமால்ட் காதல்.  </p>  <p>   <em>  இந்த கட்டுரை ஜான் யென் மற்றும் யபீர் பெர்ஹனால் மதிப்பாய்வு செய்யப்பட்டது. அவர் வலை தொடர்பான எதையும் நேசிக்கிறார், ஒவ்வொரு நாளும் புதிய தொழில்நுட்பங்களை கற்றுக்கொள்வதற்கு அடிமையாகிறார்.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </p>  </pre>  </html>  </html>  </meta>                                               
March 1, 2018