{"id":6072,"date":"2018-02-13T16:43:33","date_gmt":"2018-02-13T16:43:33","guid":{"rendered":"http:\/\/pearson.immtcnj.com\/wordpress\/?p=6072"},"modified":"2018-02-13T17:00:10","modified_gmt":"2018-02-13T17:00:10","slug":"the-calm","status":"publish","type":"post","link":"http:\/\/pearson.immtcnj.com\/wordpress\/2018\/02\/the-calm\/","title":{"rendered":"Bridge over troubled water, ice in my muddy water"},"content":{"rendered":"<p><a href=\"http:\/\/pearson.immtcnj.com\/wordpress\/wp-content\/uploads\/2018\/02\/Chopped.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-6093\" src=\"http:\/\/pearson.immtcnj.com\/wordpress\/wp-content\/uploads\/2018\/02\/Chopped-300x188.png\" alt=\"\" width=\"300\" height=\"188\" srcset=\"http:\/\/pearson.immtcnj.com\/wordpress\/wp-content\/uploads\/2018\/02\/Chopped-300x188.png 300w, http:\/\/pearson.immtcnj.com\/wordpress\/wp-content\/uploads\/2018\/02\/Chopped-768x480.png 768w, http:\/\/pearson.immtcnj.com\/wordpress\/wp-content\/uploads\/2018\/02\/Chopped-1024x640.png 1024w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\"><\/a><\/p>\n<pre>Credit: OVO Papers\r\n<\/pre>\n<div id=\"output\" class=\"embed-scope static split-output\">\n<div id=\"css-box\" class=\"code-box box  active\">\n<pre><code id=\"css-code\" class=\" cm-s-default cm-s-default\" data-lang=\"css\"><span class=\"cm-builtin\">#scroll-animate<\/span>\r\n{\r\n  <span class=\"cm-property\">overflow<\/span>: <span class=\"cm-atom\">hidden<\/span>;\r\n}\r\n\r\n<span class=\"cm-builtin\">#scroll-animate-main<\/span>\r\n{\r\n  <span class=\"cm-property\">width<\/span>: <span class=\"cm-number\">100%<\/span>;\r\n  <span class=\"cm-property\">left<\/span>: <span class=\"cm-number\">0<\/span>;\r\n  <span class=\"cm-property\">position<\/span>: <span class=\"cm-atom\">fixed<\/span>;\r\n}\r\n\r\n<span class=\"cm-builtin\">#heightPage<\/span>,\r\n<span class=\"cm-builtin\">#heightScroll<\/span>\r\n{\r\n  <span class=\"cm-property\">width<\/span>: <span class=\"cm-number\">10px<\/span>;\r\n  <span class=\"cm-property\">top<\/span>: <span class=\"cm-number\">0<\/span>;\r\n  <span class=\"cm-property\">position<\/span>: <span class=\"cm-atom\">absolute<\/span>;\r\n  <span class=\"cm-property\">z-index<\/span>: <span class=\"cm-number\">99<\/span>;\r\n}\r\n\r\n<span class=\"cm-builtin\">#heightPage<\/span>\r\n{\r\n  <span class=\"cm-property\">left<\/span>: <span class=\"cm-number\">0<\/span>;\r\n}\r\n\r\n<span class=\"cm-builtin\">#heightScroll<\/span>\r\n{\r\n  <span class=\"cm-property\">right<\/span>: <span class=\"cm-number\">0<\/span>;\r\n}\r\n\r\n<span class=\"cm-tag\">header<\/span>\r\n{\r\n  <span class=\"cm-property\">width<\/span>: <span class=\"cm-number\">100%<\/span>;\r\n  <span class=\"cm-property\">height<\/span>: <span class=\"cm-number\">100%<\/span>;\r\n  <span class=\"cm-property\">background<\/span>: <span class=\"cm-atom\">url<\/span>(<span class=\"cm-string\">https:\/\/raw.githubusercontent.com\/hudsonmarinho\/header-and-footer-parallax-effect\/master\/assets\/images\/bg-header.jpg<\/span>) <span class=\"cm-atom\">no-repeat<\/span> <span class=\"cm-number\">50%<\/span> <span class=\"cm-number\">50%<\/span>;\r\n  <span class=\"cm-property\">top<\/span>: <span class=\"cm-number\">0<\/span>;\r\n  <span class=\"cm-property\">position<\/span>: <span class=\"cm-atom\">fixed<\/span>;\r\n  <span class=\"cm-property\">z-index<\/span>: <span class=\"cm-number\">-1<\/span>;\r\n}\r\n\r\n<span class=\"cm-tag\">footer<\/span>\r\n{\r\n  <span class=\"cm-property\">width<\/span>: <span class=\"cm-number\">100%<\/span>;\r\n  <span class=\"cm-property\">height<\/span>: <span class=\"cm-number\">300px<\/span>;\r\n  <span class=\"cm-property\">background<\/span>: <span class=\"cm-keyword\">gray<\/span>;\r\n  <span class=\"cm-property\">bottom<\/span>: <span class=\"cm-number\">-300px<\/span>;\r\n  <span class=\"cm-property\">position<\/span>: <span class=\"cm-atom\">fixed<\/span>;\r\n  <span class=\"cm-property\">z-index<\/span>: <span class=\"cm-number\">-1<\/span>;\r\n}\r\n\r\n<span class=\"cm-qualifier\">.content<\/span>\r\n{\r\n  <span class=\"cm-property\">height<\/span>: <span class=\"cm-number\">1000px<\/span>;\r\n  <span class=\"cm-property\">min-height<\/span>: <span class=\"cm-number\">1000px<\/span>;\r\n  <span class=\"cm-property\">background<\/span>: <span class=\"cm-atom\">#ededed<\/span>;\r\n  <span class=\"cm-property\">position<\/span>: <span class=\"cm-atom\">relative<\/span>;\r\n  <span class=\"cm-property\">z-index<\/span>: <span class=\"cm-number\">1<\/span>;\r\n}\r\n\r\n<span class=\"cm-qualifier\">.wrapper-parallax<\/span> {\r\n  <span class=\"cm-property\">margin-top<\/span>: <span class=\"cm-number\">100%<\/span>;\r\n  <span class=\"cm-property\">margin-bottom<\/span>: <span class=\"cm-number\">300px<\/span>;\r\n  <span class=\"cm-property\">box-shadow<\/span>: <span class=\"cm-number\">0px<\/span> <span class=\"cm-number\">0px<\/span> <span class=\"cm-number\">20px<\/span> <span class=\"cm-atom\">rgba<\/span>(<span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0.5<\/span>);\r\n}\r\n\r\n<span class=\"cm-tag\">h1<\/span>{\r\n  <span class=\"cm-property\">width<\/span>: <span class=\"cm-number\">100%<\/span>;\r\n  <span class=\"cm-property\">height<\/span>: <span class=\"cm-number\">100%<\/span>;\r\n  <span class=\"cm-property\">padding<\/span>: <span class=\"cm-number\">0<\/span>;\r\n  <span class=\"cm-property\">margin<\/span>: <span class=\"cm-number\">0<\/span>;\r\n  <span class=\"cm-property\">text-transform<\/span>: <span class=\"cm-atom\">uppercase<\/span>;\r\n  <span class=\"cm-property\">text-align<\/span>: <span class=\"cm-atom\">center<\/span>;\r\n  <span class=\"cm-property\">font-family<\/span>: <span class=\"cm-variable\">Helvetica<\/span>;\r\n  <span class=\"cm-property\">font-size<\/span>: <span class=\"cm-number\">150px<\/span>;\r\n  <span class=\"cm-property\">color<\/span>: <span class=\"cm-atom\">#fff<\/span>;\r\n}\r\n\r\n<span class=\"cm-tag\">header<\/span> <span class=\"cm-tag\">h1<\/span>{}\r\n\r\n<span class=\"cm-qualifier\">.content<\/span> <span class=\"cm-tag\">h1<\/span>{\r\n  <span class=\"cm-property\">line-height<\/span>: <span class=\"cm-number\">1000px<\/span>;\r\n  <span class=\"cm-property\">color<\/span>: <span class=\"cm-atom\">#999<\/span>;\r\n}\r\n\r\n<span class=\"cm-tag\">footer<\/span> <span class=\"cm-tag\">h1<\/span>\r\n{\r\n  <span class=\"cm-property\">line-height<\/span>: <span class=\"cm-number\">300px<\/span>;\r\n}\r\n\r\n<span class=\"cm-tag\">header<\/span>,\r\n<span class=\"cm-tag\">footer<\/span>,\r\n<span class=\"cm-builtin\">#scroll-animate-main<\/span>\r\n{\r\n  <span class=\"cm-meta\">-webkit-<\/span><span class=\"cm-property\">transition-property<\/span>: <span class=\"cm-atom\">all<\/span>;\r\n     <span class=\"cm-meta\">-moz-<\/span><span class=\"cm-property\">transition-property<\/span>: <span class=\"cm-atom\">all<\/span>;\r\n      <span class=\"cm-property\">transition-property<\/span>: <span class=\"cm-atom\">all<\/span>;\r\n\r\n  <span class=\"cm-meta\">-webkit-<\/span><span class=\"cm-property\">transition-duration<\/span>: <span class=\"cm-number\">0.4s<\/span>;\r\n     <span class=\"cm-meta\">-moz-<\/span><span class=\"cm-property\">transition-duration<\/span>: <span class=\"cm-number\">0.4s<\/span>;\r\n      <span class=\"cm-property\">transition-duration<\/span>: <span class=\"cm-number\">0.4s<\/span>;\r\n\r\n  <span class=\"cm-meta\">-webkit-<\/span><span class=\"cm-property\">transition-timing-function<\/span>: <span class=\"cm-variable\">cubic-bezier<\/span>(<span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">1<\/span>);\r\n     <span class=\"cm-meta\">-moz-<\/span><span class=\"cm-property\">transition-timing-function<\/span>: <span class=\"cm-variable\">cubic-bezier<\/span>(<span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">1<\/span>);\r\n      <span class=\"cm-property\">transition-timing-function<\/span>: <span class=\"cm-variable\">cubic-bezier<\/span>(<span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">0<\/span>, <span class=\"cm-number\">1<\/span>);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Credit: OVO Papers #scroll-animate { overflow: hidden; } #scroll-animate-main { width: 100%; left: 0; position: fixed; } #heightPage, #heightScroll { width: 10px; top: 0; position: absolute; z-index: 99; } #heightPage { left: 0; } #heightScroll { right: 0; } header { width: 100%; height: 100%; background: url(https:\/\/raw.githubusercontent.com\/hudsonmarinho\/header-and-footer-parallax-effect\/master\/assets\/images\/bg-header.jpg) no-repeat 50% 50%; top: 0; position: fixed; z-index: -1; } footer { width: 100%; height: 300px; background: gray; bottom: -300px; position: fixed; z-index: -1; } .content { height: 1000px; min-height: 1000px; background: #ededed; position: relative; z-index: 1; } .wrapper-parallax { margin-top: 100%; margin-bottom: 300px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); } h1{ width: 100%; height: 100%; padding: 0; margin: 0; text-transform: uppercase; text-align: center; font-family: Helvetica; font-size: 150px; color: #fff; } header h1{} .content h1{ line-height: 1000px; color: #999; } footer h1 { line-height: 300px; } header, footer, #scroll-animate-main { -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1); -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1); transition-timing-function: cubic-bezier(0, 0, 0, 1); } &nbsp;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":2598,"featured_media":6093,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_crdt_document":"","footnotes":""},"categories":[1],"tags":[323,322],"class_list":["post-6072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-drizzy","tag-ovo"],"_links":{"self":[{"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/posts\/6072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/users\/2598"}],"replies":[{"embeddable":true,"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/comments?post=6072"}],"version-history":[{"count":5,"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/posts\/6072\/revisions"}],"predecessor-version":[{"id":6142,"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/posts\/6072\/revisions\/6142"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/media\/6093"}],"wp:attachment":[{"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/media?parent=6072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/categories?post=6072"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pearson.immtcnj.com\/wordpress\/wp-json\/wp\/v2\/tags?post=6072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}