Home Store Newbie site

Home Store Newbie site's hosting company Giveaway My source Integrated Development Strategy Videos HTML 5 & CSS 3 HTML & CSS PHP jQuery WordPress Video Series Integrated Web Development Articles CSS jQuery interlink Tools section Hosting & Domain Uncategorized Guide Review Design UI / UX Web Design Illustrator Photoshop interlink Essentials Themes WordPress Plug-in dev dev Exp Experience Meetup Jobs Interview Question What dams Support Copyright FAQs Contact Send Message list Close Home Giveaway interlink Source site's hosting company Newbie My Store Operation Integrated interlink development in HTML 5 and CSS 3 Videos HTML & CSS PHP jQuery WordPress Video Series Integrated Web Development Articles CSS jQuery Tools section Hosting & Domain Uncategorized Guide Review Design UI / UX Web Design Photoshop Illustrator WordPress Essentials Themes Plug-in dev dev Exp Experience Meetup Jobs Interview Question What dams Support Copyright FAQs Contact Send Message
CSS3 transform can help us easily rotate an object into many different angles. interlink However, rotate each letter of the text is very difficult. Arc Text is a jQuery plug-in interlink will help us to do the seemingly impossible "to bend the text," according to a circular arc. # Request
- You need to know html and css basics plus you also have to know the basic jQuery again. - You need to put jQuery library and plug-in ArcText.js to your project, within the head tag. For example: interlink <script src = "js / jquery.1.7.2.min.js" type = "text / javascript"> </ script> <script src = "js / jquery.arctext.js" type = "text / javascript "> </ script> <script src =" js / jquery.global.js "type =" interlink text / javascript "> </ script> # How it works
First, I need to setup a html code like this: <script type = "text / javascript"> jQuery (document) .ready (function ($) {$ ("ex"). Arctext ({radius: 210, The curves of the letters dir // 1 // 1 curved, bent down -1});}); </ Script> <h1 id = "ex"> Test try something considered </ h1>
You can change the radius interlink value and dir to know more about its features. interlink If you want it vertical 90 degrees as shown in the demo above, only adding css code below, and if you want to curve to the left or right, then just change the values in Jquery dir 1, -1 {#ex // // h1 tag's ID CSS3 -webkit-transform for all browsers: rotate (-90deg); -moz-transform: rotate interlink (-90deg); -o-transform: rotate (-90deg); -ms-transform: rotate (-90deg); transform: rotate (-90deg); } # Practical application
Html and css code Setup <style interlink type = "text / css"> body {font-family: Roboto; color: # 6ABDC5; background: # 6ABDC5 url (../ images / background-puple.png) repeat; Article} {width: 900px; margin: 0 auto; } Article section {width: 400px; height: 400px; position: relative; background: #fff; display: inline-block; // Replace the float, which equals 2 object border-radius: 50%; // Create circular text-align: center; margin-top: 50px; margin-right: 80px; cursor: pointer; } H1 {article section line-height: 400px; font-size: 30px; font-size: 180px; text-transform: uppercase; } P {article interlink section position: absolute; bottom: -40px; // Allocates p card left: 20px; color: #fff; font-size: 25px; text-transform: uppercase; } Article section: last-child {margin-right: 0; // remove margin left for the 2nd section} </ style> <article> interlink <section id = "yes"> <h1> interlink YES </ h1> <p> Lorem ipsum dolor sit Amet </ p> </ section> <section id = "No"> <h1> NO </ h1> <p> Lorem ipsum dolor sit Amet </ p> </ section> </ article>
Then you can look at it, but it still has not completed offline. Now we'll dip into jQuery. <Script type = "text / javascript"> jQuery (document) .ready (function ($) {var sec = $ ("section"); sec.find ("p"). interlink Css ('bottom', '50' ); // set css to hide the text in p tags sec.find ("p"). arctext ({radius: 210, dir: -1}); // set text for text // arc hover funtion can be understood like this: // When hover on it will find the card section p. p // then push down 40px animate to show off. sec.hover interlink (function () {$ (this) .find ( 'p'). animate ({'bottom': - 40 // when hover on the push down 40px}, "slow")}, function () {$ (this) interlink .find ('p'). animate ({ 'bottom': interlink 50 // when you hover the said section turned out position}, "slow") // slow, fast or ms})}); </ Script> interlink
Now when you hover on the word YES or NO, then the Description section will appear. Quite interesting is not it. In the next section, I will guide you to make the clouds, birds, fish, animation, similar to its website. Note that the image you can download in the download section below.
Want to learn better, to learn the right questions. Therefore, in the process of learning and research, you will always have questions. Therefore, let c