{"id":23147,"date":"2019-09-23T22:10:05","date_gmt":"2019-09-23T12:10:05","guid":{"rendered":"https:\/\/codemyui.com\/?p=23147"},"modified":"2019-09-23T22:38:58","modified_gmt":"2019-09-23T12:38:58","slug":"vertical-split-image-slideshow","status":"publish","type":"post","link":"https:\/\/codemyui.com\/vertical-split-image-slideshow\/","title":{"rendered":"Vertical Split Image Slideshow"},"content":{"rendered":"<p>This is a fancy little <a href=\"https:\/\/codemyui.com\/tag\/slider\/\">slideshow<\/a> where the <a href=\"https:\/\/codemyui.com\/tag\/image-effects\/\">image<\/a> <a href=\"https:\/\/codemyui.com\/tag\/split-screen\/\">splits into two vertically<\/a>. The left side moves down and the right side moves up. It was designed by <a href=\"https:\/\/twitter.com\/supahfunk\" target=\"_blank\" rel=\"noopener\">Fabio Ottaviani<\/a>.<\/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\/5255af54a3f909d3d1d7331d685b2ffe\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a><\/p>\n<h2>Vertical Split Image Snippet<\/h2>\n<p class='codepen'  data-height='528' data-theme-id='0' data-slug-hash='zZaPeE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a fancy little slideshow where the image splits into two vertically. The left side moves down and the right side moves up. It was designed by Fabio Ottaviani.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/vertical-split-image-slideshow\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":23152,"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":true,"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":[1745484,81450,268522,138009468,1000032],"class_list":["post-23147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-effects","tag-image-gallery","tag-image-slider","tag-scroll-animation","tag-split-screen","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/vertical-split-image-slideshow.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26556,"url":"https:\/\/codemyui.com\/colorful-gradient-long-shadow\/","url_meta":{"origin":23147,"position":0},"title":"Colorful Gradient Long Shadow","author":"Saijo George","date":"June 29, 2018","format":false,"excerpt":"A colourful long shadow text animation that slides into view on click designed by Fabio Ottaviani. If you are having trouble with the pen, try the archived copy on GitHub Colorful Gradient Long Shadow Snippet","rel":"","context":"In \"shadow\"","block_context":{"text":"shadow","link":"https:\/\/codemyui.com\/tag\/shadow\/"},"img":{"alt_text":"Colorful Gradient Long Shadow","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Colorful-Gradient-Long-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Colorful-Gradient-Long-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Colorful-Gradient-Long-Shadow.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Colorful-Gradient-Long-Shadow.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29721,"url":"https:\/\/codemyui.com\/split-screen-text-and-image-with-load-more-on-scroll\/","url_meta":{"origin":23147,"position":1},"title":"Split Screen Text and Image with Load More on Scroll","author":"Saijo George","date":"April 22, 2020","format":false,"excerpt":"Code by: elgatodealien from Codepen If you are having trouble with the pen, try the archived copy on GitHub Split Screen Text and Image Snippet","rel":"","context":"In \"split screen\"","block_context":{"text":"split screen","link":"https:\/\/codemyui.com\/tag\/split-screen\/"},"img":{"alt_text":"Split Screen Text and Image with Load More on Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Split-Screen-Text-and-Image-with-Load-More-on-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Split-Screen-Text-and-Image-with-Load-More-on-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Split-Screen-Text-and-Image-with-Load-More-on-Scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Split-Screen-Text-and-Image-with-Load-More-on-Scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24834,"url":"https:\/\/codemyui.com\/2-column-split-screen-image-gallery-description-box\/","url_meta":{"origin":23147,"position":2},"title":"2 Column Split Screen Image Gallery With Description Box","author":"Hima Vincent","date":"September 23, 2019","format":false,"excerpt":"A 2 column split screen image and cation gallery designed by Eduardo Bou\u00e7as. When you scroll each section loads a new content side by side. If you are having trouble with the pen, try the archived copy on GitHub Split Screen Image Gallery Snippet","rel":"","context":"In \"image gallery\"","block_context":{"text":"image gallery","link":"https:\/\/codemyui.com\/tag\/image-gallery\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/split-screen-gallery.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/split-screen-gallery.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/split-screen-gallery.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/split-screen-gallery.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27038,"url":"https:\/\/codemyui.com\/css-only-vertical-image-slider-with-thumbnails\/","url_meta":{"origin":23147,"position":3},"title":"CSS Only Vertical Image Slider with Thumbnails","author":"Saijo George","date":"January 9, 2019","format":false,"excerpt":"In this CSS only snippet you have a vertical image slider with thumbnails on the right, you can click on an image thumbnail and jump to that image in the slider. Designed by Chen Hui Jing. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"image slider\"","block_context":{"text":"image slider","link":"https:\/\/codemyui.com\/tag\/image-slider\/"},"img":{"alt_text":"CSS Only Vertical Image Slider with Thumbnails","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/CSS-Only-Vertical-Image-Slider-with-Thumbnails.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/CSS-Only-Vertical-Image-Slider-with-Thumbnails.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/CSS-Only-Vertical-Image-Slider-with-Thumbnails.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/CSS-Only-Vertical-Image-Slider-with-Thumbnails.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15715,"url":"https:\/\/codemyui.com\/slide-expand-vertical-image-gallery\/","url_meta":{"origin":23147,"position":4},"title":"Slide and Expand Vertical Image Gallery","author":"Hima Vincent","date":"June 7, 2017","format":false,"excerpt":"This image gallery snippet was designed by Dudley Storey. You see a vertical section where each image is cropped to be a part of a stack when you click on one it slides out to the right and expands to the full image. If you are having trouble with the\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Slide and Expand Vertical Image Gallery","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/slide-and-expand-vertical-image-gallery.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\/slide-and-expand-vertical-image-gallery.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/slide-and-expand-vertical-image-gallery.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/slide-and-expand-vertical-image-gallery.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4083,"url":"https:\/\/codemyui.com\/split-photo-canvas-effect-3d\/","url_meta":{"origin":23147,"position":5},"title":"Split Photo Canvas Effect in 3D","author":"Hima Vincent","date":"November 15, 2016","format":false,"excerpt":"Do you love the split canvas photo effects that you see on different home interior design magazines? You can get that effect on your website using this pure CSS code snippet where you add an image and it will give you a 3D split image output and even include the\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-split-image.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\/3d-split-image.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-split-image.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-split-image.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/23147","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=23147"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/23147\/revisions"}],"predecessor-version":[{"id":28260,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/23147\/revisions\/28260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/23152"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=23147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=23147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=23147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}