{"id":17417,"date":"2019-07-10T06:43:24","date_gmt":"2019-07-10T06:43:24","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=17417"},"modified":"2019-07-10T06:49:58","modified_gmt":"2019-07-10T06:49:58","slug":"image-cutout-parallax-effect-css-svg","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/image-cutout-parallax-effect-css-svg\/","title":{"rendered":"IMAGE CUTOUT, PARALLAX EFFECT: CSS + SVG"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author<\/em><\/span><\/strong>:<\/h4>\n\n\n\n<ul><li>Alex O&#8217;Neal<\/li><li>October 28, 2018<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with<\/em><\/span><\/strong>:<\/h4>\n\n\n\n<ul><li>HTML \/ CSS<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code<\/em><\/span><\/strong>:<\/h4>\n\n\n\n<p>This is an amazing Parallax Effect which works on desktop\/laptop, but not on mobile. Just make an SVG cutout of the same background color as your background. Then make a parallax background with CSS. Use the same proportions as your SVG. Place an\u00a0<code>img<\/code>\u00a0of your SVG inside the HTML for your parallax\u00a0<code>div<\/code>. Finally align and size parallax background as you like. Don&#8217;t forget to make things responsive!<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> Yes<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> &#8211;<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/alexoneal\/share\/zip\/OBqaoe\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/alexoneal\/pen\/OBqaoe\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Alex O&#8217;Neal October 28, 2018 Made with: HTML \/ CSS About the code: This is an amazing Parallax Effect which works on desktop\/laptop, but not on mobile. Just make an SVG cutout of the same background color as your background. Then make a parallax background with CSS. Use the same proportions as your SVG. Place an\u00a0img\u00a0of your SVG inside the HTML for your parallax\u00a0div. Finally align and size parallax background as you like. Don&#8217;t forget to make things responsive! Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: &#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":17418,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5087],"tags":[20,5095,3861,5092,1123,5093,5096],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/17417"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=17417"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/17417\/revisions"}],"predecessor-version":[{"id":17419,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/17417\/revisions\/17419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/17418"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=17417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=17417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=17417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}