{"id":3615,"date":"2022-08-24T05:51:25","date_gmt":"2022-08-24T05:51:25","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3615"},"modified":"2023-06-10T11:35:44","modified_gmt":"2023-06-10T11:35:44","slug":"css-tutorial-dual-color-text-scroll-effect","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-dual-color-text-scroll-effect\/","title":{"rendered":"CSS Tutorial &#8211; Dual Color Text Scroll Effect"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; CSS Tutorial &#8211; Lightweight animation between header &amp; content. Easy to customize and apply to any website! Works with all devices and screen sizes.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - Dual Color Text Scroll Effect\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/oNMvmqm?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/oNMvmqm\"><br \/>\nCSS Tutorial &#8211; Dual Color Text Scroll Effect<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@import url('https:\/\/fonts.googleapis.com\/css?family=Raleway:700,900');\r\n\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: none;\r\n}\r\nbody {\r\n  font-size: 14px;\r\n  font-family: 'Raleway', sans-serif;\r\n}\r\na{\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Sections *\/\r\n.section{\r\n  height: 100vh;\r\n  min-height: 500px;\r\n  position: relative;\r\n}\r\n\r\n\/* Containers *\/\r\n.content-container{\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  z-index: 2;\r\n  clip: rect(auto, auto, auto, auto);\r\n  pointer-events: none;\r\n}\r\n.content-inner{\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 100%;\r\n  padding: 0;\r\n  z-index: 99;\r\n  -webkit-transform: translateZ(0);\r\n  transform: translateZ(0);\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n  will-change: transform;\r\n  -webkit-perspective: 1000;\r\n  perspective: 1000;\r\n  pointer-events: all;\r\n}\r\n.content-center{\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n}\r\n\r\n\r\n\/* Aesthetics *\/\r\n.top-section{\r\n  background: linear-gradient(135deg, #f4583a 0%,#cd1e38 100%);\r\n}\r\n.bottom-section{\r\n  background: #d4fef2;\r\n}\r\n.section h1{\r\n  font-size: 200px;\r\n  font-weight: 900;\r\n  text-transform: uppercase;\r\n  text-align: center;\r\n}\r\n.section p,\r\n.section a{\r\n  font-weight: 700;\r\n  letter-spacing: 7px;\r\n  text-transform: uppercase;\r\n  text-align: center;\r\n}\r\n\r\n.content-theme-dark h1{\r\n  color: #E33E39;\r\n  text-shadow: 0 20px 40px rgba(0,0,0,.5);\r\n}\r\n.content-theme-dark p,\r\n.content-theme-dark a{\r\n  color: #FEA98D;\r\n}\r\n.content-theme-light h1{\r\n  color:#062930;\r\n  text-shadow: 0 20px 40px rgba(0,0,0,.5);\r\n}\r\n.content-theme-light p,\r\n.content-theme-light a{\r\n  color: #728E93;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; CSS Tutorial &#8211; Lightweight animation between header &amp; content. <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-dual-color-text-scroll-effect\/\" title=\"CSS Tutorial &#8211; Dual Color Text Scroll Effect\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3616,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[197,390,103,227],"newstopic":[],"class_list":{"0":"post-3615","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-tutorial","10":"tag-text-scroll-effect","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3615"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3615\/revisions"}],"predecessor-version":[{"id":3617,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3615\/revisions\/3617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3616"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3615"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}