{"id":25388,"date":"2018-01-30T13:07:34","date_gmt":"2018-01-30T03:07:34","guid":{"rendered":"https:\/\/codemyui.com\/?p=25388"},"modified":"2019-09-13T11:10:07","modified_gmt":"2019-09-13T01:10:07","slug":"ripple-loading-effect-image-slider","status":"publish","type":"post","link":"https:\/\/codemyui.com\/ripple-loading-effect-image-slider\/","title":{"rendered":"Ripple Loading Effect Image Slider"},"content":{"rendered":"

A spectacular image slider<\/a> with a ripple like loading effect<\/a> for the transition, it was designed by Yugam<\/a><\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

Ripple Image Slider Snippet<\/h2>\n

\nSee the Pen Image Overlay Slider by Yugam (@pizza3) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

A spectacular image slider with a ripple like loading effect for the transition, it was designed by Yugam<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":25390,"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,268522],"class_list":["post-25388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-effects","tag-image-slider","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/ripple-loading-effect-image-slider.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25378,"url":"https:\/\/codemyui.com\/split-screen-image-transition-scroll\/","url_meta":{"origin":25388,"position":0},"title":"Split Screen Image Transition On Scroll","author":"Saijo George","date":"January 29, 2018","format":false,"excerpt":"A fancy image slider where you have 2 images side by side and when you hover over them it expands into the other image's section and on scroll, the image is split into multiple rows and it slides in the next image with a slight delay for each rows' transition.\u2026","rel":"","context":"In \"gsap\"","block_context":{"text":"gsap","link":"https:\/\/codemyui.com\/tag\/gsap\/"},"img":{"alt_text":"Split Screen Image Transition On Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/split-screen-image-transition-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\/2018\/01\/split-screen-image-transition-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/split-screen-image-transition-on-scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/split-screen-image-transition-on-scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29923,"url":"https:\/\/codemyui.com\/folding-airline-boarding-pass-mobile-ui\/","url_meta":{"origin":25388,"position":1},"title":"Folding Airline Boarding Pass Mobile UI","author":"Saijo George","date":"June 4, 2020","format":false,"excerpt":"Code by: Yugam from Codepen If you are having trouble with the pen, try the archived copy on GitHub Airline Boarding Pass Snippet","rel":"","context":"In \"mobile optimised\"","block_context":{"text":"mobile optimised","link":"https:\/\/codemyui.com\/tag\/mobile-optimised\/"},"img":{"alt_text":"Folding Airline Boarding Pass Mobile UI","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/Folding-Airline-Boarding-Pass-Mobile-UI.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/Folding-Airline-Boarding-Pass-Mobile-UI.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/Folding-Airline-Boarding-Pass-Mobile-UI.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/Folding-Airline-Boarding-Pass-Mobile-UI.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17723,"url":"https:\/\/codemyui.com\/login-form-input-field-focus-animation\/","url_meta":{"origin":25388,"position":2},"title":"Login Form with Input Field Focus Animation","author":"Hima Vincent","date":"June 5, 2017","format":false,"excerpt":"A simple login form design in Card UI designed by Yugam. The underline on the active input field flows down with an animation when another input field is selected. If you are having trouble with the pen, try the archived copy on GitHub Input Field Focus Animation Snippet","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Login Form with Input Field Focus Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/login-form-with-input-field-focus-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/login-form-with-input-field-focus-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/login-form-with-input-field-focus-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/login-form-with-input-field-focus-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17636,"url":"https:\/\/codemyui.com\/smoke-liquid-button-animation-effects\/","url_meta":{"origin":25388,"position":3},"title":"Smoke and Liquid Button Animation Effects","author":"Hima Vincent","date":"June 7, 2017","format":false,"excerpt":"These set of button animations were designed by Yugam hey use CSS-Masks to achieve these experimental effects. The first hover effect feels like smoke being cleared out to reveal the content below, the second effect feels like erasing the layer from the top with a big brush and the final\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Smoke and Liquid Button Animation Effects","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/smoke-and-liquid-button-animation-effects.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/smoke-and-liquid-button-animation-effects.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/smoke-and-liquid-button-animation-effects.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/smoke-and-liquid-button-animation-effects.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":5150,"url":"https:\/\/codemyui.com\/arc-like-image-slider\/","url_meta":{"origin":25388,"position":4},"title":"Arc Like Image Slider","author":"Hima Vincent","date":"February 8, 2017","format":false,"excerpt":"This particular image gallery was designed by Sean Harrington. It kind of looks like a Simon Says electronic game where you have a small arc of images and clicking on the previous or next button will load the next image in the series. Something like this will work great when\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Arc Like Image Slider","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/arc-like-image-slider.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\/arc-like-image-slider.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/arc-like-image-slider.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/arc-like-image-slider.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6307,"url":"https:\/\/codemyui.com\/3d-flip-image-content-slider\/","url_meta":{"origin":25388,"position":5},"title":"3D Flip Image and Content Slider","author":"Hima Vincent","date":"February 13, 2017","format":false,"excerpt":"In this image content carousel, we can see that there is an image on the left-hand side and the content associated with the image on the right. When you click on the dot style navigation the image section does a 3d flip in one direction and the content flips in\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3d flip image content slider","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/3d-flip-image-content-slider.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\/3d-flip-image-content-slider.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/3d-flip-image-content-slider.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/3d-flip-image-content-slider.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\/25388","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25388"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25388\/revisions"}],"predecessor-version":[{"id":28046,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25388\/revisions\/28046"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25390"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}