{"id":12076,"date":"2017-03-01T00:11:05","date_gmt":"2017-02-28T14:11:05","guid":{"rendered":"https:\/\/codemyui.com\/?p=12076"},"modified":"2018-05-16T16:59:31","modified_gmt":"2018-05-16T06:59:31","slug":"slides-text-splitting-middle","status":"publish","type":"post","link":"https:\/\/codemyui.com\/slides-text-splitting-middle\/","title":{"rendered":"Slides With Text Splitting In The Middle"},"content":{"rendered":"<p>This <a href=\"https:\/\/codemyui.com\/tag\/slider\/\">slide<\/a> with text splitting in the middle was designed by <a href=\"https:\/\/twitter.com\/nathantokyo\" target=\"_blank\" rel=\"noopener\">Nathan Taylor<\/a>. You have a big text in the background and a smaller <a href=\"https:\/\/codemyui.com\/tag\/text-animation\/\">text<\/a> on top of it, when you <a href=\"https:\/\/codemyui.com\/tag\/click-animation\/\">click<\/a> on the <a href=\"https:\/\/codemyui.com\/tag\/split-screen\/\">screen the layout splits<\/a> from the centre and reveals the content from the other slides. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/d23972febfac81778c0383b74f8db33f\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Center Splitting Text Snippet<\/h2>\n<p class='codepen'  data-height='475' data-theme-id='0' data-slug-hash='ZLRLvZ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Split Text Slides by Nathan Taylor (@nathantaylor) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This slide with text splitting in the middle was designed by Nathan Taylor. You have a big text in the background and a smaller text on top of it, when you click on the screen the layout splits from the centre and reveals the content from the other slides.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/slides-text-splitting-middle\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":12081,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[36516635,38934147,268522,1000032,1512930],"class_list":["post-12076","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-click-animation","tag-hero-section","tag-image-slider","tag-split-screen","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/slides-with-text-splitting-in-the-middle.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":4416,"url":"https:\/\/codemyui.com\/slide-animation-reveal-new-text\/","url_meta":{"origin":12076,"position":0},"title":"Slide Animation to Reveal New Text","author":"Hima Vincent","date":"November 25, 2016","format":false,"excerpt":"In this text animation designed by Nathan Taylor you have a block of text and then you will see a solid swoop of colour moving in from left to right over the text to reveal new text. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Slide Animation to Reveal New Text","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/slide-animation-to-reveal-new-text.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/slide-animation-to-reveal-new-text.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/slide-animation-to-reveal-new-text.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/slide-animation-to-reveal-new-text.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6078,"url":"https:\/\/codemyui.com\/realistic-css-switch\/","url_meta":{"origin":12076,"position":1},"title":"Realistic CSS Switch","author":"Hima Vincent","date":"February 8, 2017","format":false,"excerpt":"A checkbox input field designed to look like a toggle switch. This is a pure CSS snippet, designed by Nathan Taylor. If you are having trouble with the pen, try the archived copy on GitHub Realistic Toggle Switch Snippet","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/realistic-css-switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17407,"url":"https:\/\/codemyui.com\/3d-push-bounce-back-button-effect\/","url_meta":{"origin":12076,"position":2},"title":"3D Push and Bounce Back Button Effect","author":"Hima Vincent","date":"May 29, 2017","format":false,"excerpt":"Here is a pure CSS button designed by Nathan Taylor, it has a nice 3D with long shadow effect to it and when you click on it and release it, the button bounces back. If you are having trouble with the pen, try the archived copy on GitHub Bounce Back\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Push and Bounce Back Button Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/3d-push-and-bounce-back-button-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/3d-push-and-bounce-back-button-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/3d-push-and-bounce-back-button-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/3d-push-and-bounce-back-button-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":10965,"url":"https:\/\/codemyui.com\/staff-appointment-booking-form\/","url_meta":{"origin":12076,"position":3},"title":"Staff Appointment Booking Form","author":"Hima Vincent","date":"March 11, 2017","format":false,"excerpt":"This staff appointment booking form was designed by Nathan Taylor. You get a list of staff members and you can click on one of them to pick a date and time and put in a booking appointment with them. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"calendar\"","block_context":{"text":"calendar","link":"https:\/\/codemyui.com\/tag\/calendar\/"},"img":{"alt_text":"Staff Appointment Booking Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/fluid-booking-form.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/fluid-booking-form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/fluid-booking-form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/fluid-booking-form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":7597,"url":"https:\/\/codemyui.com\/login-form-visual-cues-invalid-input\/","url_meta":{"origin":12076,"position":4},"title":"Login Form with Visual Cues for Invalid Input","author":"Hima Vincent","date":"February 26, 2017","format":false,"excerpt":"This login form provides visual cues by wiggling the input field when an invalid input is entered. It also notifies the visitor when the password is wrong and also notify the user the number of retries left. This is designed by Nathan Taylor. If you are having trouble with the\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loginform.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loginform.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loginform.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loginform.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25448,"url":"https:\/\/codemyui.com\/hovering-image-card-slider-alligned-image-background\/","url_meta":{"origin":12076,"position":5},"title":"Hovering Image Card Slider with Alligned Image Background","author":"Saijo George","date":"February 14, 2018","format":false,"excerpt":"We have an image slider that appears as a card over the background image, the background image is blurred but aligned with the clear image on the card. It was designed by Nathan Taylor. If you are having trouble with the pen, try the archived copy on GitHub Image Card\u2026","rel":"","context":"In \"blur effect\"","block_context":{"text":"blur effect","link":"https:\/\/codemyui.com\/tag\/blur-effect\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/hovering-image-card-slider-with-alligned-image-background.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/12076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=12076"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/12076\/revisions"}],"predecessor-version":[{"id":25910,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/12076\/revisions\/25910"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/12081"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=12076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=12076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=12076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}