01 03 નો
તાજેતરના અણુ.આય સુધારામાં સ્ક્રોલવાળી કન્ટેનર્સ શામેલ છે
થોડા મહિના પહેલાં મેં દર્શાવ્યું હતું કે અણુપ્રદર્શિત ગતિ માટે અણુ.ઓનો ઉપયોગ કરી શકાય છે . આ ભાગમાં મેં જે કી બિંદુઓ બનાવ્યા છે તે ક્લાઈન્ટ અથવા ટીમની કલ્પનાઓને છોડવાને બદલે "ગતિ દર્શાવતી" છે તે મહત્વનું છે. વાસ્તવમાં, આ એટલું જટિલ બની ગયું છે કે દ્રશ્ય પર યુએક્સ / UI ટૂલ્સની એક સંપૂર્ણ નવી શ્રેણી દેખાય છે. તેમાં એપલ કેનોટ, એડોબના એજ એનિમેટ, ઇફેક્ટ્સ પછી અને યુએક્સપિન , થોડા નામ આપવાનો સમાવેશ થાય છે . બ્લોક પરનું નવું બાળક અણુ.ઓઓ છે જે ઓપન બીટામાં હતું જ્યારે મેં પ્રથમ ઉત્પાદન વિશે લખ્યું હતું.
ઓપન બીટા વિશે સુઘડ વસ્તુ તેઓ સૉફ્ટવેર ઉત્પાદકને ફીચર સેટ પર વપરાશકર્તા પ્રતિસાદ એકત્રિત કરવાની તક આપે છે, જેમાં ગુમ સુવિધાઓ શામેલ છે, અને પછી એપ્લિકેશનમાં તેમને ઉમેરો અને વ્યવસાયિક પ્રકાશન પહેલાં પરીક્ષણ કરવામાં આવે છે. અણુના કિસ્સામાં, એક વસ્તુ જે મેં ખરેખર ચૂકી છે તે સામગ્રી ઊભી અથવા આડા રીતે સરકાવવાની ક્ષમતા હતી તેમાં કાર્ડ, સ્લાઇડ શો અથવા વ્યવહારીક કંઈપણ, જે કોઈ વપરાશકર્તા સ્વાઇપ અથવા કોઈ એપ્લિકેશન અથવા સાઇટના ઇન્ટરફેસની સીમાઓ અંદર ખેંચી શકે છે તેવી વસ્તુઓનો સમાવેશ કરી શકે છે.
આ ઘણા બધા વપરાશકર્તાઓને પૂછવામાં આવ્યાં છે કારણ કે આ મહિને સ્ક્રોલવાળા કન્ટેનર્સને એપ્લિકેશનમાં રજૂ કરવામાં આવ્યા હતા અને, મને પ્રોટોટાઇપમાં સ્ક્રોલ સામગ્રી બનાવવાની મંજૂરી આપવી પડે છે.
અહીં કેવી રીતે ...
02 નો 02
અણુમાં વર્ટિકલ સ્ક્રોલિંગ સામગ્રી કેવી રીતે બનાવવી
તમારે પ્રથમ મફત 30-દિવસ ટ્રાયલ માટે સાઇન અપ કરવું પડશે અને, તે સમયગાળાના અંતે, તમને ત્રણ કિંમતના યોજનાઓ સાથે રજૂ કરવામાં આવશે.
તમારે જાણવાની જરૂર છે તે પ્રથમ વસ્તુ એ છે કે તમે જે કાર્ય કરશો તે બ્રાઉઝરમાં છે અને એપ્લિકેશનનો હેતુ Google Chrome પર સખત છે. એકવાર તમે લોગ ઇન કરો, તમને પ્રોજેક્ટ્સ પૃષ્ઠ પર લઈ જવામાં આવશે. એપ્લિકેશન ખોલવા માટે, નવી પ્રોજેક્ટ બટનને ક્લિક કરો .
જ્યારે ઈન્ટરફેસ દેખાય છે ત્યારે તમે જોશો કે ત્યાં મર્યાદિત સંખ્યામાં સાધનો છે, પૃષ્ઠોને પાનાંઓ અને સ્તરો ઉમેરવા માટેની ક્ષમતા, આર્ટબોર્ડ અને, જમણી તરફ, સંદર્ભ-સંવેદનશીલ ગુણધર્મો પેનલ.
આ ઉદાહરણમાં, મેં iPhone 5 પ્રીસેટ સાથે શરૂ કર્યું છે જે 320 x 568 છે. પછી ફોલ્ડરને સ્ક્રોલ કરવા માટેના છબીઓને ખોલો અને તેમને કેનવાસ પર ખેંચે છે તેઓ આપમેળે પ્રોજેક્ટમાં ઉમેરાઇ ગયા હતા અને તમે જોઈ શકો છો કે તેઓ સ્તરો ટેબ પર ક્લિક કરો છો તો તે વ્યક્તિગત સ્તરો પર છે. મેં પછી એરો ટૂલ (પસંદગી) પસંદ કર્યું, એક ઈમેજ પસંદ કરી અને તેમની વચ્ચે અમુક જગ્યા ઉમેરવા માટે તેને નવી પદ પર ખેંચી. મેં પછી બધી છબીઓ પસંદ કરી અને ટૂલબાર પર વર્ટિકલી વિતરણ બટનને ક્લિક કર્યું . આ છબીઓને સમાનરૂપે અંતરે છે
આગળનું પગલું એ સ્ક્રોલ કરવા માટેની બધી સામગ્રી પસંદ કરવી અને કન્ટેઈનર બટન પર ક્લિક કરવું અથવા જૂથ બટન પોપ ડાઉનમાંથી સ્ક્રોલ કન્ટેઇનર બનાવો પસંદ કરો . એકવાર કન્ટેનર બનાવવામાં આવે - તમે તેને સ્તરો પેનલમાં જોશો - કન્ટેનર પર ક્લિક કરો અને કેનવાસના તળિયે તળિયે હેન્ડલ ઉપર ખેંચો . પ્રોપર્ટીઝ પેનલના તળિયે પૂર્વાવલોકન બટન પર ક્લિક કરો અને આ બ્રાઉઝર વિન્ડો લોંચ કરશે. સામગ્રીને સ્ક્રોલ કરવા માટે તમારા માઉસની સ્ક્રોલ વ્હીલનો ઉપયોગ કરો. તમારા પ્રોજેક્ટ પર પાછા આવવા માટે, બ્રાઉઝર વિંડોની નીચે જમણી બાજુએ સંપાદિત કરો બટન ક્લિક કરો .
03 03 03
અણુમાં આડી સ્ક્રોલિંગ સામગ્રી કેવી રીતે બનાવવી
આડું સરકાવવું પૂર્ણ કરવા જેટલું જ સરળ છે.
આ કિસ્સામાં, કેનવાસ પર છબીઓની શ્રૃંખલા ખેંચી અને એકબીજાની વિરુદ્ધ તેમને બટ્ટ આપી. પસંદ કરેલી છબીઓ સાથે, હું પછી ટોચના સંરેખિત બટનને ક્લિક કરવા માટે ખાતરી કરું છું કે તેઓ એકબીજા સાથે ગોઠવાયેલ છે.
મેં પછી Shift કીને નીચે રાખ્યું અને સ્તરો પેનલમાં દરેક સ્તર પસંદ કર્યું. પસંદ કરેલી છબીઓ સાથે, મેં કન્ટેઈનર બટનને ક્લિક કર્યું અને , પ્રોપર્ટીઝ પેનલોમાં, બીહેવીયર્સ એરિયામાં આડું પસંદ કર્યું.
મેં પછી પૂર્વાવલોકન બટન પર ક્લિક કરીને બ્રાઉઝર વિંડોમાં પ્રોજેક્ટને પરીક્ષણ કર્યું છે.
તેમ છતાં મેં દર્શાવ્યું છે કે વર્ટિકલ અને હોરીઝોન્ટલ સ્ક્રોલિંગની વ્યક્તિગત આવૃત્તિ કેવી રીતે બનાવવી, જ્યાં સુધી તમે સ્કેરેબલ સામગ્રીને એક કન્ટેનરમાં મૂકી દો છો, તમે આ કન્ટેનર્સને સ્ક્રીનના જુદા ભાગોમાં રાખી શકો છો. ઉદાહરણ તરીકે, વેબપેજ બાજુ મેનૂમાં ઊભી રીતે સરકાવનાર સામગ્રી અને સમાન પૃષ્ઠ પર સ્લાઇડ શોમાં આડા સરકાવનાર સામગ્રી હોઈ શકે છે. વાસ્તવમાં, એક ડબ્લ્યુએન અથવા તેથી થંબનેલ્સ ધરાવતી છબી પીકર જેવી આઇટમ્સ માટે કન્ટેનર બંને ઊભી અને આડી સરકાવનાર હોઈ શકે છે.
Atomic.io માં આ સુવિધા વિશે વધુ જાણવા માટે તપાસો:
- બ્લોગની જાહેરાત
- સ્ક્રોલિંગ કન્ટેનર ટ્યુટોરીયલ
- કન્ટેનરનો ઉપયોગ કરીને માસ્કીંગ
- મુશ્કેલીનિવારણ સ્ક્રોલિંગ કન્ટેનર