உருள்: வேடிக்கையான வலை வடிவமைப்பு

வலை வடிவமைப்பில் ஒரு போக்கு என்பது பயனர்களால் வலுவாக ஏற்றுக்கொள்ளப்பட்ட தளங்களை உணர்ந்து கொள்வதற்காக ஏற்றுக்கொள்ளப்பட்ட பாணியைப் போன்றது, பொதுவாக தற்காலிக காலங்களில். 2016 ஆம் ஆண்டில் இதுவரை ஏற்பட்ட போக்குகளின் ஒரு பகுதி மற்றும், 2017 ஆம் ஆண்டில் தொடர்ந்து தொனியை அமைக்கும், அனிமேஷன்கள் மற்றும் நீண்ட உருளைகள் நிறைய சுருள்களைக் கொண்டுள்ளன.

இந்த பாணி பயனருக்கு மிகவும் கவர்ச்சிகரமானதாகவும், வேடிக்கையாகவும் இருக்கிறது என்பது இரகசியமல்ல, அனிமேஷன்களால், தளத்தை உள்ளுணர்வுடனும், அவை நன்கு பயன்படுத்தப்படுகின்ற வரை பொழுதுபோக்குக்காகவும் நாம் செய்ய முடியும். இந்த காரணத்திற்காக, jQuery ஸ்க்ரோல் மேஜிக் சொருகி பயன்படுத்தி உங்கள் வலைத்தளத்தில் அனிமேஷன் செய்யப்பட்ட சுருள்களை சேர்க்க ஒரு டுடோரியலை உருவாக்கியுள்ளோம்.

ஸ்க்ரோல் மேஜிக்: வேடிக்கையான வலை வடிவமைப்பு

ஸ்க்ரோல் மேஜிக் என்பது வலைத்தளங்களை நகர்த்தும்போது தொடர்புகளை அடைய ஜாவாஸ்கிரிப்டில் செய்யப்பட்ட ஒரு நூலகமாகும். இது அதன் முன்னோடி சூப்பர்ஸ்க்ரோலோராமாவின் முழுமையான மாற்றியமைப்பாகும், மேலும் அதன் கட்டமைப்பு எளிதான தனிப்பயனாக்கம் மற்றும் விரிவாக்கத்தை வழங்கும் செருகுநிரல்களை அடிப்படையாகக் கொண்டது.

பின்வரும் சில விஷயங்களை நாங்கள் செயல்படுத்த விரும்பினால் அது மிகவும் சிறந்தது:

• தளத்தின் நிலை அல்லது இடப்பெயர்வை அடிப்படையாகக் கொண்ட அனிமேஷன். அனிமேஷனைத் தூண்டவும் அல்லது சுருளின் இயக்கத்துடன் ஒத்திசைக்கவும். அதிக முயற்சி இல்லாமல் இடமாறு விளைவைச் சேர்க்கவும். எல்லையற்ற சுருள் கொண்ட ஒரு பக்கத்தை உருவாக்கவும், அஜாக்ஸுடன் உள்ளடக்க ஏற்றுதலைக் கையாளவும்.

ஸ்க்ரோல் மேஜிக் அம்சங்கள்

• உகந்த செயல்திறன், இது ஒளி, நெகிழ்வானது மற்றும் விரிவாக்கத்தை அனுமதிக்கிறது. நிகழ்வு மேலாண்மை மற்றும் பொருள் சார்ந்த நிரலாக்கங்கள். இது தகவமைப்பு வலை வடிவமைப்பை ஆதரிக்கிறது. இது இரு திசைகளிலும் இயக்கங்களுக்கு ஆதரவைக் கொண்டுள்ளது (கிடைமட்ட மற்றும் செங்குத்து) இது கொள்கலன்களுக்குள் இயக்கங்களுக்கு ஆதரவைக் கொண்டுள்ளது (div), ஒரு பக்கத்தில் கூட பல. இது உலாவிகளுக்கு சரியாக வேலை செய்கிறது: பயர்பாக்ஸ் 26+, குரோம் 30+, சஃபாரி 5.1+, ஓபரா 10+, IE 9+. அதன் கிட்ஹப் களஞ்சியத்தில், இது விரிவான ஆவணங்கள் மற்றும் பல பயன்பாட்டு எடுத்துக்காட்டுகளைக் கொண்டுள்ளது.

ScrollMagic ஐப் பெறுக

அதை பல்வேறு வழிகளில் பெற கிடைக்கிறது.

1: கிட்ஹப்

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

2: போவர்

bower install scrollmagic

3: முனை தொகுப்பு மேலாளர்

npm ஸ்க்ரோல்மேஜிக் நிறுவவும்

4: சி.டி.என்

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

அவுட்லுக்கில் மின்னஞ்சலின் வடிவமைப்பை எவ்வாறு தனிப்பயனாக்குவது என்பதையும் நீங்கள் படிக்கலாம்

நிறுவல் மற்றும் பயன்பாடு

நிறுவல் மிகவும் எளிதானது, நாங்கள் அதைப் பயன்படுத்த விரும்பும் HTML கோப்புகளில் கர்னல் கோப்பை மட்டுமே சேர்க்கிறோம்.

;

பயன்பாட்டிற்கு, சொருகி ஒரு கட்டுப்பாட்டு சார்ந்த வடிவமைப்பு வடிவத்தை வழங்குகிறது, இதில் ஒன்று அல்லது அதற்கு மேற்பட்ட காட்சிகள் சேர்க்கப்படுகின்றன. இந்த காட்சிகள் ஒரு குறிப்பிட்ட இடத்திற்கு நகரும்போது கொள்கலன்களில் என்ன நடக்கிறது என்பதை வரையறுக்கப் பயன்படுகிறது.

இது ஒரு அடிப்படை எடுத்துக்காட்டு:

// init கட்டுப்படுத்தி var கட்டுப்படுத்தி = புதிய ScrollMagic.Controller (); // ஒரு காட்சியை உருவாக்க புதிய ஸ்க்ரோல் மேஜிக்.சீன் ({காலம்: 100, // காட்சி 100px ஆஃப்செட் சுருள் தூரத்திற்கு நீடிக்க வேண்டும்: 50 // 50px for க்கு ஸ்க்ரோலிங் செய்த பிறகு இந்த காட்சியைத் தொடங்கவும்).setPin ("# my-sticky- உறுப்பு ") // காட்சியின் காலத்திற்கான உறுப்பை பின்ஸ் செய்கிறது.addTo (கட்டுப்படுத்தி); // காட்சியை கட்டுப்படுத்திக்கு ஒதுக்குங்கள்

ஒரு மேம்பட்ட எடுத்துக்காட்டு, பல ஆஃப்செட்களை அடையலாம், அதன் மூல குறியீடு பின்வருமாறு:

function (செயல்பாடு () document // ஆவணம் தயார் செய்ய காத்திருங்கள் // init கட்டுப்படுத்தி var கட்டுப்படுத்தி = புதிய ஸ்க்ரோல் மேஜிக்.கண்ட்ரோலர் (); // கட்டியெழுப்புதல் var tween = TweenMax.to ("# animate", 0.5, {scale: 3, எளிதானது: லீனியர்.இஸ்நொன்}); addIndicators ({name: "மறுஅளவிடு"}) // குறிகாட்டிகளைச் சேர்க்கவும் (சொருகி தேவை).addTo (கட்டுப்படுத்தி); // init கட்டுப்படுத்தி கிடைமட்ட var controller_h = new ScrollMagic.Controller ({செங்குத்து: தவறான}); // இருபது கிடைமட்ட var tween_h = TweenMax.to ("# animate", 0.5, {rotation: 360, easy: Linear.easeNone}); // காட்சி காட்சி var scene_h = new ScrollMagic.Scene ({காலம்: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // குறிகாட்டிகளைச் சேர்க்கவும் (சொருகி தேவை).addTo (controller_h);});

சொருகி ஆவணத்தில் அவற்றின் மூலக் குறியீட்டைக் கொண்டு இன்னும் பல எடுத்துக்காட்டுகளைக் காணலாம்.

யூ.எஸ்.பி ஸ்டிக்கைப் பயன்படுத்தி விண்டோஸ் 10 ஐ சுத்தமாக நிறுவுவது எப்படி என்பதை நாங்கள் பரிந்துரைக்கிறோம்