Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

CodePen પર CSS એનિમેશનનાં ૧૫ પ્રેરક ઉદાહરણ

by
Length:LongLanguages:

Gujarati (ગુજરાતી) translation by Dee.P.Tree (you can also view the original English article)

CodePen આપણા વેબ ક્રિએશન્સથી શુ કરી શકીએ છીએ તે બતાવા માટે ઝડપથી સામાન્ય જગ્યા બાની રહી છે. હાલમાં લોકો CSS અનિમેશન્સથી કેટલીક અદભુત વસ્તુઓ બનાવી રહ્યા છે તેનું લિસ્ટ આ રહ્યું!

. JavaScript Mickey Watch-જાવાસ્ક્રિપ્ટ મિકી વોચ

જય સાલવટ-Jay Salvat (@jaysalvat) દ્વારા "Apple watch like Mickey watch".

સુંદર મિકી માઉસ વોચ ફેસ પર હાથને ગોઠવવા માટે CSS ટ્રાન્સીશન્સ, SVG ગ્રાફિક્સ અને JAVAScript ને સાંકળતું સરસ ઉદાહરણ છે.

. CSS Submarine-CSS સબમરીન

એલ્બર્ટો જેરેઝ-Alberto Jerez (@ajerez) દ્વારા "Submarine with CSS".

ગોળાકાર પોર્ટ-હોલ આકારના કન્ટેનરનો સુંદર પ્રયોગ આ એનિમેશનને ઘણી સુંદરતા બક્ષે છે.

. ASCII AT-AT

ટિમ પિતૃસ્કી-Tim Pietrusky (@TimPietrusky) દ્વારા "AT-AT".

સ્ટાર વોર્સથી પ્રેરિત AT-AT પર્સનલ વાહક, ટેક્સ્ટ દ્વારા દોરાયેલું અને CSS દ્વારા રંગીન કરાયેલું. ગજબની ઇફેક્ટ.

. SVG/CSS Loader-SVG/CSS લોડર

બીડજી-Bidji (@Bidji) દ્વારા "Loader SVG/CSS"

આ લોડર બદલાતા રંગોનો પ્રયોગ કરે છે જે ફરતું હોય એવો ભાસ કરાવે છે.

. 3D CSS Tardis-3D CSS ટારડિસ 

ગેરવીન વેન રોયેન-Gerwin van Royen (@Gerwinnz) દ્વારા 3D CSS Tardis.

કેટલીક અદભુત 3D ઇફેક્ટ્સ તૈયાર કરવા માટે CSS નો ઉપયોગ કરી શકીએ છીએ. એક 3D tardis-3D ટાર્ડીસ આ રહ્યું:

. Dozing Bird-ઝોકા ખાતું પક્ષી

પીટર કલેન-Peter Klein (@pmk) દ્વારા Dozing Bird.

સરળ કલાની સ્ટાઇલ અને એકદમ જોઈએ એટલું જ એનિમેશન આ ઊંઘેટુ પક્ષી જીવંત હોય તેવો ભાસ કરાવે છે.

. Pure CSS border animation-સંપૂર્ણ CSS દ્વારા કિનારીનુ એનિમેશન

આરપ્લસ-Rplus (@rplus) દ્વારા Pure CSS border animation without SVG.

લોડિંગ પ્રકારના એનિમેશન માટે CSS નો સામાન્ય છતાં અસરકારક પ્રયોગ.

. Star Wars: The Force Awakens-સ્ટાર વૉર્સ: ઘી ફોર્સ અવેકન્સ

ડોનોવોન હચીસન-Donovan Hutchinson (@donovanh) દ્વારા Star Wars: The Force Awakens in CSS.

CSS, HTML અને થોડી JavaScript ના પ્રયોગથી તૈયાર કરાયેલું આવનારી Star Wars-સ્ટાર વૉર્સ મુવીનું શીર્ષક-ટાઇટલ.

. 3D Synth-3D સિન્થ

નિકોલે તાલાનોવ-Nikolay Talanov (@suez) દ્વારા Pure CSS 3D Synthesizer (mousedown for rotation)

CSS નો ઉપયોગ કરીને તૈયાર કરેલું આ 3D સિંથની કી અને એને ફેરવવાનો પ્રયાસ કરો.  અદભુત કામ:

૧૦. Cascading Solar System-કાસકેડિંગ સોલાર સિસ્ટમ

Tady Walsh (@tadywankenobi) દ્વારા Cascading Solar System!

આપણા સૂર્યમંડળનું મોડેલ-પ્રતિરૂપ, ફરવાની ઝડપના બદલાવ, ચંદ્રો અને અન્ય માહિતી સાથે સંપૂર્ણ. આ સૂર્ય અસલ સૂર્યનું જીવંત કેપ્ચર-પકડી પડેલું હોય એવું જ છે!

૧૧. 3D Solar System-3D સૂર્ય મંડળ

વેઇન ડનકલી-Wayne Dunkley (@waynedunkley) દ્વારા Full CSS 3D Solar System.

વધુ એક સૂર્યમંડળ, પણ આ વખતે 3D માં. શેડિંગ-છાયાનો સુંદર ઉપયોગ.

૧૨. Flat Design Camera-ફ્લેટ ડિઝાઇન કેમેરા

ડેમિન પરીરા-Damien Pereira Morberto (@damienpm) દ્વારા Flat design camera with CSS animation.

CSS અનિમેશનનો ઉપયોગ કરીને આ ફ્લેટ કેમેરા પર ફોટો ખેંચતો જોવા માટે શટરને દબાવો. 

૧૩. Day and Night Transition-દિવસ અને રાતની સંક્રાંતિ

સાયમન સ્ટાયપા-Szymon Stypa (@Catagen) દ્વારા Day Night simulation.

દિવસને રાતમાં પરિવર્તિત કરવા માટે બટન દબાવો.

૧૪. Animated Sprite with CSS-CSSથી એનિમેટેડ સ્પ્રાઇટ-કમ્પ્યુટરમાં હાલતી ચાલતી તસવીરો

અવાઝ બૉકીવ-Avaz Bokiev (@samarkandiy) દ્વારા Animate sprite with CSS

સ્ટોપ-મોશન એનિમેશન તૈયાર કરવા માટે, કેવી રીતે એક તસવીરોની હારમાળા (સ્પ્રાઇટ) ને વાપરી શકાય તેનું પ્રદર્શન.

૧૫. Dodecahedron-ડોડેકાહેડ્રોન

વૉન્ટૅમ-wontem (@wontem) દ્વારા Dodecahedron

એક હલકું-ફૂલકું, સુંદર dodecahedron, જે સંપૂર્ણપણે CSS દ્વારા તૈયાર અને અનિમેટ કરવામાં આવ્યું છે.

સમાપન

થોડા સમય પહેલા, આપણે બ્રાઉઝરમાં ના એનિમેશન માટે Flash-ફ્લેશ કે JavaScript-જાવાસ્ક્રિપ્ટ્સ ને પસંદ કરી હોત. હાર્ડવેર એક્સીલરેટેડ 3D અને એનિમેશન સાથે, આધુનિક બ્રોઉઝર્સ CSS માટે વધુ સારો સપોર્ટ-સમર્થન લાવ્યા છે.

CodePen-કોડપેન જેવી વેબસાઇટ્સને ધન્યવાદ કે જેના લીધે આપણે પહેલા કરતા પણ વધુ આસાનીથી શીખી શકીએ છીએ અને શેર-વહેંચી શકીએ છીએ. હાલમાં તમે જોયા હોય એવા કયા એકદમ પ્રેરણાદાયી એનિમેશનના ડેમો-પ્રદર્શન ઉપલબ્ધ છે?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.