{"id":17915,"date":"2024-03-15T15:57:56","date_gmt":"2024-03-15T15:57:56","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/"},"modified":"2024-03-21T12:03:17","modified_gmt":"2024-03-21T12:03:17","slug":"how-can-js-achieve-the-effect-of-image-sliding-door","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/","title":{"rendered":"How can JS achieve the effect of image sliding door?"},"content":{"rendered":"<p>One way to achieve the image sliding door effect is by using JavaScript and CSS.<\/p>\n<p>HTML section:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"door\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"front\"<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"image.jpg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Image\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"back\"<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"image.jpg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Image\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>CSS section:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-selector-class\">.container<\/span> {\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">400px<\/span>;\r\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">300px<\/span>;\r\n  <span class=\"hljs-attribute\">position<\/span>: relative;\r\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\r\n  <span class=\"hljs-attribute\">overflow<\/span>: hidden;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.door<\/span> {\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">50%<\/span>;\r\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\r\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\r\n  <span class=\"hljs-attribute\">transition<\/span>: transform <span class=\"hljs-number\">0.5s<\/span>;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.front<\/span> {\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">overflow<\/span>: hidden;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.back<\/span> {\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(-<span class=\"hljs-number\">100%<\/span>);\r\n  <span class=\"hljs-attribute\">overflow<\/span>: hidden;\r\n}\r\n\r\n<span class=\"hljs-selector-tag\">img<\/span> {\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">object-fit<\/span>: cover;\r\n}\r\n<\/code><\/pre>\n<p>JavaScript section:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">const<\/span> door = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">querySelector<\/span>(<span class=\"hljs-string\">'.door'<\/span>);\r\n<span class=\"hljs-keyword\">let<\/span> isOpen = <span class=\"hljs-literal\">false<\/span>;\r\n\r\ndoor.<span class=\"hljs-title function_\">addEventListener<\/span>(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  <span class=\"hljs-keyword\">if<\/span> (!isOpen) {\r\n    door.<span class=\"hljs-property\">style<\/span>.<span class=\"hljs-property\">transform<\/span> = <span class=\"hljs-string\">'translateX(100%)'<\/span>;\r\n    isOpen = <span class=\"hljs-literal\">true<\/span>;\r\n  } <span class=\"hljs-keyword\">else<\/span> {\r\n    door.<span class=\"hljs-property\">style<\/span>.<span class=\"hljs-property\">transform<\/span> = <span class=\"hljs-string\">'translateX(0)'<\/span>;\r\n    isOpen = <span class=\"hljs-literal\">false<\/span>;\r\n  }\r\n});\r\n<\/code><\/pre>\n<p>The above code implements an image of a sliding door effect, where clicking on the image can open or close the door. The CSS section defines the style and animation for the door, while the JavaScript section toggles the door&#8217;s state by listening for click events.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One way to achieve the image sliding door effect is by using JavaScript and CSS. HTML section: &lt;div class=&#8221;container&#8221;&gt; &lt;div class=&#8221;door&#8221;&gt; &lt;div class=&#8221;front&#8221;&gt; &lt;img src=&#8221;image.jpg&#8221; alt=&#8221;Image&#8221;&gt; &lt;\/div&gt; &lt;div class=&#8221;back&#8221;&gt; &lt;img src=&#8221;image.jpg&#8221; alt=&#8221;Image&#8221;&gt; &lt;\/div&gt; &lt;\/div&gt; &lt;\/div&gt; CSS section: .container { width: 400px; height: 300px; position: relative; margin: 0 auto; overflow: hidden; } .door { width: 50%; [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-17915","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How can JS achieve the effect of image sliding door? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can JS achieve the effect of image sliding door?\" \/>\n<meta property=\"og:description\" content=\"One way to achieve the image sliding door effect is by using JavaScript and CSS. HTML section: &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;door&quot;&gt; &lt;div class=&quot;front&quot;&gt; &lt;img src=&quot;image.jpg&quot; alt=&quot;Image&quot;&gt; &lt;\/div&gt; &lt;div class=&quot;back&quot;&gt; &lt;img src=&quot;image.jpg&quot; alt=&quot;Image&quot;&gt; &lt;\/div&gt; &lt;\/div&gt; &lt;\/div&gt; CSS section: .container { width: 400px; height: 300px; position: relative; margin: 0 auto; overflow: hidden; } .door { width: 50%; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T15:57:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T12:03:17+00:00\" \/>\n<meta name=\"author\" content=\"Olivia Parker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Parker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/\"},\"author\":{\"name\":\"Olivia Parker\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\"},\"headline\":\"How can JS achieve the effect of image sliding door?\",\"datePublished\":\"2024-03-15T15:57:56+00:00\",\"dateModified\":\"2024-03-21T12:03:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/\"},\"wordCount\":78,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/\",\"name\":\"How can JS achieve the effect of image sliding door? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:57:56+00:00\",\"dateModified\":\"2024-03-21T12:03:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can JS achieve the effect of image sliding door?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\",\"name\":\"Olivia Parker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"caption\":\"Olivia Parker\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can JS achieve the effect of image sliding door? - Blog - Silicon Cloud","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:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/","og_locale":"en_US","og_type":"article","og_title":"How can JS achieve the effect of image sliding door?","og_description":"One way to achieve the image sliding door effect is by using JavaScript and CSS. HTML section: &lt;div class=\"container\"&gt; &lt;div class=\"door\"&gt; &lt;div class=\"front\"&gt; &lt;img src=\"image.jpg\" alt=\"Image\"&gt; &lt;\/div&gt; &lt;div class=\"back\"&gt; &lt;img src=\"image.jpg\" alt=\"Image\"&gt; &lt;\/div&gt; &lt;\/div&gt; &lt;\/div&gt; CSS section: .container { width: 400px; height: 300px; position: relative; margin: 0 auto; overflow: hidden; } .door { width: 50%; [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:57:56+00:00","article_modified_time":"2024-03-21T12:03:17+00:00","author":"Olivia Parker","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Olivia Parker","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/"},"author":{"name":"Olivia Parker","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9"},"headline":"How can JS achieve the effect of image sliding door?","datePublished":"2024-03-15T15:57:56+00:00","dateModified":"2024-03-21T12:03:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/"},"wordCount":78,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/","name":"How can JS achieve the effect of image sliding door? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:57:56+00:00","dateModified":"2024-03-21T12:03:17+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-js-achieve-the-effect-of-image-sliding-door\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can JS achieve the effect of image sliding door?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9","name":"Olivia Parker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","caption":"Olivia Parker"},"url":"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17915"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17915\/revisions"}],"predecessor-version":[{"id":51558,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17915\/revisions\/51558"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}