{"id":6434,"date":"2017-02-19T08:52:11","date_gmt":"2017-02-18T22:52:11","guid":{"rendered":"https:\/\/codemyui.com\/?p=6434"},"modified":"2018-10-26T10:06:53","modified_gmt":"2018-10-25T23:06:53","slug":"scrolling-background-pattern","status":"publish","type":"post","link":"https:\/\/codemyui.com\/scrolling-background-pattern\/","title":{"rendered":"Scrolling Background Pattern"},"content":{"rendered":"

If you are looking for to add some scrolling effect to your background pattern you can do so with this snippet by Nils Riedemann<\/a>, the pattern scrolls<\/a> from top right to bottom left. This effect was achieved using pure CSS<\/a>. If you need to get more background patterns, head over to All The Free Stock<\/strong><\/a> they have a patterns section under free stock photos. <\/p>\n

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

Background Pattern Scroll Snippet<\/h2>\n

\nSee the Pen PWyYjV by Nils Riedemann (@riedemann) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

If you are looking for to add some scrolling effect to your background pattern you can do so with this snippet by Nils Riedemann, the pattern scrolls from top right to bottom left. This effect was achieved using pure CSS. If you need to get more background patterns, head over to All The Free Stock…<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":6476,"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":[608602279,30305495,138009468],"class_list":["post-6434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-pattern","tag-pure-css","tag-scroll-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/scrolling-background-pattern.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26706,"url":"https:\/\/codemyui.com\/change-background-gradient-on-scrolling\/","url_meta":{"origin":6434,"position":0},"title":"Change Background Gradient on Scrolling","author":"Saijo George","date":"July 18, 2018","format":false,"excerpt":"This is a stunning effect when you want to animate you background with gradients that changes on scroll. This CSS only snippet was designed by Mike. If you are having trouble with the pen, try the archived copy on GitHub Gradient on Scrolling Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Change Background Gradient on Scrolling","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Change-Background-Gradient-on-Scrolling.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Change-Background-Gradient-on-Scrolling.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Change-Background-Gradient-on-Scrolling.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Change-Background-Gradient-on-Scrolling.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24749,"url":"https:\/\/codemyui.com\/pure-css-half-half-scrolling-image-gallery\/","url_meta":{"origin":6434,"position":1},"title":"Pure CSS Half By Half Scrolling Image Gallery","author":"Hima Vincent","date":"October 4, 2017","format":false,"excerpt":"A really cool image gallery in pure CSS, as you scroll the left and right sections scroll one by one. It was designed by Kseso. If you are having trouble with the pen, try the archived copy on GitHub Half By Half Scrolling Animation Snippet","rel":"","context":"In \"image effects\"","block_context":{"text":"image effects","link":"https:\/\/codemyui.com\/tag\/image-effects\/"},"img":{"alt_text":"Half By Half Scrolling Image Gallery","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/half-by-half-scrolling.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/half-by-half-scrolling.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/half-by-half-scrolling.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/half-by-half-scrolling.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3547,"url":"https:\/\/codemyui.com\/parallax-effect-full-width-sections\/","url_meta":{"origin":6434,"position":2},"title":"Parallax Effect Full Width Sections","author":"Hima Vincent","date":"October 27, 2016","format":false,"excerpt":"In this code snippet, you can add a parallax effect using just Pure CSS. You got multiple colored backgrounds. When you scroll through them, it reveals a content on each of those slides in parallax effect. Designed by Ravi Dhiman. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"full screen\"","block_context":{"text":"full screen","link":"https:\/\/codemyui.com\/tag\/full-screen\/"},"img":{"alt_text":"Parallex Effect Sections","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/parallex-effect-sections-1.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/parallex-effect-sections-1.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/parallex-effect-sections-1.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/parallex-effect-sections-1.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1395,"url":"https:\/\/codemyui.com\/navbar-scroll-indicator-articles\/","url_meta":{"origin":6434,"position":3},"title":"Navbar Scroll Indicator for Articles","author":"Hima Vincent","date":"August 4, 2016","format":false,"excerpt":"Showing reading time or a progress indicator on articles is a relatively new trend, now you can do that for your next project with this snippet. There are 2 variation one with JS and one in pure CSS. The initial version was designed by Derek Palladino and the pure CSS\u2026","rel":"","context":"In \"article\"","block_context":{"text":"article","link":"https:\/\/codemyui.com\/tag\/article\/"},"img":{"alt_text":"Navbar Scroll Indicator for Articles","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/navbar-scroll-indicator-for-articles.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/navbar-scroll-indicator-for-articles.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/navbar-scroll-indicator-for-articles.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/navbar-scroll-indicator-for-articles.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26835,"url":"https:\/\/codemyui.com\/retro-yes-no-popup-dialog-box\/","url_meta":{"origin":6434,"position":4},"title":"Retro Yes No Popup Dialog Box","author":"Saijo George","date":"September 6, 2018","format":false,"excerpt":"Here is a really cool retro dialog box popup designed by r\u00e9mi and coded by Thibaud Goiffon. It's got a very simple look with a colourful scrolling background and is in pure CSS. If you are having trouble with the pen, try the archived copy on GitHub Retro Dialog Box\u2026","rel":"","context":"In \"modal window\"","block_context":{"text":"modal window","link":"https:\/\/codemyui.com\/tag\/modal-window\/"},"img":{"alt_text":"Retro Yes No Popup Dialog Box","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Retro-Yes-No-Popup-Dialog-Box.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Retro-Yes-No-Popup-Dialog-Box.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Retro-Yes-No-Popup-Dialog-Box.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Retro-Yes-No-Popup-Dialog-Box.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3708,"url":"https:\/\/codemyui.com\/disappearing-header-scrolling-parallax\/","url_meta":{"origin":6434,"position":5},"title":"Disappearing Header on Scrolling Parallax","author":"Hima Vincent","date":"October 31, 2016","format":false,"excerpt":"This snippet is great for displaying the title on blog posts. You have a title on the hero image that will be tucked under the image using a parallax effect when you start scrolling down. Designed by Dudley Storey. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"article\"","block_context":{"text":"article","link":"https:\/\/codemyui.com\/tag\/article\/"},"img":{"alt_text":"Disappearing Header on Scrolling Parallax","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/disappearing-header-on-scrolling-parallax.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/disappearing-header-on-scrolling-parallax.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/disappearing-header-on-scrolling-parallax.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/disappearing-header-on-scrolling-parallax.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\/6434","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=6434"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6434\/revisions"}],"predecessor-version":[{"id":25928,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6434\/revisions\/25928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/6476"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=6434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=6434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=6434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}