{"id":351,"date":"2011-05-24T07:19:24","date_gmt":"2011-05-24T07:19:24","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=351"},"modified":"2017-05-19T15:10:10","modified_gmt":"2017-05-19T15:10:10","slug":"sliding-letters-with-jquery","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/","title":{"rendered":"Sliding Letters with jQuery"},"content":{"rendered":"

Sliding Letters with jQuery : <\/strong>We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.<\/p>\n

Demo :<\/strong> http:\/\/tympanus.net\/Development\/SlidingLetters\/<\/a><\/p>\n

Download : <\/a><\/strong>http:\/\/tympanus.net\/codrops\/2011\/05\/09\/sliding-letters-with-jquery\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Sliding Letters with jQuery : We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[79],"tags":[83,87],"class_list":["post-351","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-jquery-2","tag-sliding-letters"],"yoast_head":"\nSliding Letters with jQuery<\/title>\n<meta name=\"description\" content=\"Sliding Letters with jQuery : We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sliding Letters with jQuery\" \/>\n<meta property=\"og:description\" content=\"Sliding Letters with jQuery : We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:author\" content=\"http:\/\/facebook.com\/webkul\" \/>\n<meta property=\"article:published_time\" content=\"2011-05-24T07:19:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-19T15:10:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vipin Sahu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/vipinsahu\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vipin Sahu\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/\"},\"author\":{\"name\":\"Vipin Sahu\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8ed13bf168e6e8fe92fe499c470111f1\"},\"headline\":\"Sliding Letters with jQuery\",\"datePublished\":\"2011-05-24T07:19:24+00:00\",\"dateModified\":\"2017-05-19T15:10:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/\"},\"wordCount\":84,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"jquery\",\"sliding letters\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/\",\"url\":\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/\",\"name\":\"Sliding Letters with jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2011-05-24T07:19:24+00:00\",\"dateModified\":\"2017-05-19T15:10:10+00:00\",\"description\":\"Sliding Letters with jQuery : We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sliding Letters with jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8ed13bf168e6e8fe92fe499c470111f1\",\"name\":\"Vipin Sahu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/98597dd669d66735fc160e891e1207c749a444ebea1b172de18a92f1435045c0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/98597dd669d66735fc160e891e1207c749a444ebea1b172de18a92f1435045c0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Vipin Sahu\"},\"description\":\"Executionist and Hardcore Planner to drive out best of the best. Want to boost up the E-Commerce industry with his concoct conception.\",\"sameAs\":[\"http:\/\/webkul.com\",\"http:\/\/facebook.com\/webkul\",\"https:\/\/x.com\/https:\/\/twitter.com\/vipinsahu\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sliding Letters with jQuery","description":"Sliding Letters with jQuery : We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Sliding Letters with jQuery","og_description":"Sliding Letters with jQuery : We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.","og_url":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_author":"http:\/\/facebook.com\/webkul","article_published_time":"2011-05-24T07:19:24+00:00","article_modified_time":"2017-05-19T15:10:10+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Vipin Sahu","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/vipinsahu","twitter_site":"@webkul","twitter_misc":{"Written by":"Vipin Sahu"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/"},"author":{"name":"Vipin Sahu","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8ed13bf168e6e8fe92fe499c470111f1"},"headline":"Sliding Letters with jQuery","datePublished":"2011-05-24T07:19:24+00:00","dateModified":"2017-05-19T15:10:10+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/"},"wordCount":84,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["jquery","sliding letters"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/","url":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/","name":"Sliding Letters with jQuery","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2011-05-24T07:19:24+00:00","dateModified":"2017-05-19T15:10:10+00:00","description":"Sliding Letters with jQuery : We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/sliding-letters-with-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Sliding Letters with jQuery"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8ed13bf168e6e8fe92fe499c470111f1","name":"Vipin Sahu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/98597dd669d66735fc160e891e1207c749a444ebea1b172de18a92f1435045c0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/98597dd669d66735fc160e891e1207c749a444ebea1b172de18a92f1435045c0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Vipin Sahu"},"description":"Executionist and Hardcore Planner to drive out best of the best. Want to boost up the E-Commerce industry with his concoct conception.","sameAs":["http:\/\/webkul.com","http:\/\/facebook.com\/webkul","https:\/\/x.com\/https:\/\/twitter.com\/vipinsahu"],"url":"https:\/\/webkul.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=351"}],"version-history":[{"count":1,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/351\/revisions"}],"predecessor-version":[{"id":353,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/351\/revisions\/353"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}