API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 23rd, 2014
38
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.84 KB | None | 0 0
raw download clone embed print report
  1. <section class="dark" style="background:url('http://www.mccullagh.org/db9/10d-2/new-york-city-at-night.jpg') no-repeat fixed;background-size:cover;">
  2. <div class="brdr_out">
  3. <div class="brdr_in">
  4. <div class="content" style="height:10em;margin-top:-5em;">
  5. <div class="title1">TITLE 1</div>
  6. </div>
  7. </div>
  8. </div>
  9. </section>
  10. <section class="light" style="background:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg') no-repeat fixed;background-size:cover;">
  11. <div class="brdr_out">
  12. <div class="brdr_in">
  13. <div class="content" style="height:10em;margin-top:-5em;">
  14. <div class="title2">Title 2</div>
  15. <div class="title3">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
  16. </div>
  17. </div>
  18. </div>
  19. </section>
  20.  
  21. body, html
  22. {
  23. height: 100%;
  24. }
  25. body
  26. {
  27. font-size: 16px;
  28. margin: 0;
  29. }
  30. .brdr_in, .brdr_out
  31. {
  32. bottom: 0;
  33. height: auto;
  34. left: 0;
  35. position: absolute;
  36. right: 0;
  37. top: 0;
  38. }
  39. .brdr_in
  40. {
  41. margin: .25em;
  42. padding: 1em;
  43. }
  44. .brdr_out
  45. {
  46. margin: 1em;
  47. padding: .25em;
  48. }
  49. .clr1, .dark
  50. {
  51. color: #fff;
  52. }
  53. .clr2, .light
  54. {
  55. color: #000;
  56. }
  57. .dark .brdr_in
  58. {
  59. border: 3px solid #d5d7a1;
  60. }
  61. .dark .brdr_out
  62. {
  63. border: 5px solid #d5d7a1;
  64. }
  65. .light .brdr_in
  66. {
  67. border: 3px solid #000;
  68. }
  69. .light .brdr_out
  70. {
  71. border: 5px solid #000;
  72. }
  73. section
  74. {
  75. height: 100%;
  76. position: relative;
  77. text-align: center;
  78. }
  79. section .content
  80. {
  81. position: absolute;
  82. top: 50%;
  83. width: 100%;
  84. }
  85. .title1, .title2
  86. {
  87. display: inline-block;
  88. letter-spacing: .25em;
  89. line-height: 1.875em;
  90. padding-bottom: .8em;
  91. }
  92. .title2
  93. {
  94. border-bottom: 1px solid #4a4639;
  95. margin-bottom: 3em;
  96. }
  97.  
  98. $(window).on('scroll', function(){
  99. var slide_distance = window.scrollY / 1000, slide = Math.floor(slide_distance)
  100. var color = color_interp(slide_colors[slide], slide_colors[slide + 1], slide_distance - slide)
  101. $('#border').css('color', color)
  102. })
  103.  
  104. <section class="dark" style="background:url('http://www.mccullagh.org/db9/10d-2/new-york-city-at-night.jpg') no-repeat fixed;background-size:cover;">
  105. <div class="content" style="height:10em;margin-top:-5em;">
  106. <div class="title1">TITLE 1</div>
  107. </div>
  108. </section>
  109. <section class="light" style="background:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg') no-repeat fixed;background-size:cover;">
  110. <div class="content" style="height:10em;margin-top:-5em;padding:0 20%;width:60%">
  111. <div class="title2">Title 2</div>
  112. <div class="title3">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
  113. </div>
  114. </section>
  115.  
  116. <div id="top" style="background:url('http://www.mccullagh.org/db9/10d-2/new-york-city-at-night.jpg') no-repeat fixed;background-size:cover;display:none;height:24px;position:fixed;top:0;left:0;right:0;z-index:3;"></div>
  117. <div id="bottom" style="background:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg') no-repeat fixed;background-size:cover;display:none;height:24px;position:fixed;bottom:0;left:0;right:0;z-index:3;"></div>
  118.  
  119. <div class="brdr_out">
  120. <div class="dark">
  121. <div class="top"></div>
  122. <div class="right"></div>
  123. <div class="bottom"></div>
  124. <div class="left"></div>
  125. </div>
  126. <div class="light">
  127. <div class="top"></div>
  128. <div class="right"></div>
  129. <div class="bottom"></div>
  130. <div class="left"></div>
  131. </div>
  132. </div>
  133. <div class="brdr_in">
  134. <div class="dark">
  135. <div class="top"></div>
  136. <div class="right"></div>
  137. <div class="bottom"></div>
  138. <div class="left"></div>
  139. </div>
  140. <div class="light">
  141. <div class="top"></div>
  142. <div class="right"></div>
  143. <div class="bottom"></div>
  144. <div class="left"></div>
  145. </div>
  146. </div>
  147.  
  148. body, html
  149. {
  150. height: 100%;
  151. }
  152. body
  153. {
  154. font-size: 16px;
  155. margin: 0;
  156. }
  157. .clr1, .dark
  158. {
  159. color: #fff;
  160. }
  161. .clr2, .light
  162. {
  163. color: #000;
  164. }
  165. section
  166. {
  167. height: 100%;
  168. position: relative;
  169. text-align: center;
  170. }
  171. section .content
  172. {
  173. position: absolute;
  174. top: 50%;
  175. width: 100%;
  176. }
  177. .title1, .title2
  178. {
  179. display: inline-block;
  180. letter-spacing: .25em;
  181. line-height: 1.875em;
  182. padding-bottom: .8em;
  183. }
  184. .title2
  185. {
  186. border-bottom: 1px solid #4a4639;
  187. margin-bottom: 3em;
  188. }
  189.  
  190. /*The Frame Styles*/
  191. .brdr_in .bottom
  192. {
  193. bottom: 24px;
  194. }
  195. .brdr_in .bottom, .brdr_in .top
  196. {
  197. height: 3px;
  198. left: 24px;
  199. right: 24px;
  200. }
  201. .brdr_in .dark div, .brdr_out .dark div
  202. {
  203. background-color: #e4d7b0;
  204. }
  205. .brdr_in div, .brdr_out div
  206. {
  207. position: fixed;
  208. z-index: 4;
  209. }
  210. .brdr_in .left
  211. {
  212. left: 24px;
  213. }
  214. .brdr_in .left, .brdr_in .right
  215. {
  216. bottom: 24px;
  217. top: 24px;
  218. width: 3px;
  219. }
  220. .brdr_in .light div, .brdr_out .light div
  221. {
  222. background-color: #434345;
  223. }
  224. .brdr_in .right
  225. {
  226. right: 24px;
  227. }
  228. .brdr_in .top
  229. {
  230. top: 24px;
  231. }
  232. .brdr_out .bottom
  233. {
  234. bottom: 15px;
  235. }
  236. .brdr_out .bottom, .brdr_out .top
  237. {
  238. height: 5px;
  239. left: 15px;
  240. right: 15px;
  241. }
  242. .brdr_out .left
  243. {
  244. left: 15px;
  245. }
  246. .brdr_out .left, .brdr_out .right
  247. {
  248. bottom: 15px;
  249. top: 15px;
  250. width: 5px;
  251. }
  252. .brdr_out .right
  253. {
  254. right: 15px;
  255. }
  256. .brdr_out .top
  257. {
  258. top: 15px;
  259. }
  260.  
  261. function borders() {
  262. var viewportHeight = $(window).height();
  263. var scrollY = window.scrollY;
  264. var distance = viewportHeight - scrollY;
  265.  
  266. //Once we start scrolling, the top border of the next slide needs to be hidden so it doesn't appear over content
  267. if (scrollY >= 0) {
  268. $('.light .top').css('display', 'none');
  269. }
  270. if (scrollY < 27) {
  271. $('.brdr_in .light .bottom').css('display', 'none');
  272. }
  273. else {
  274. $('.brdr_in .light .bottom').css('display', 'block');
  275. }
  276. if (scrollY < 20) {
  277. $('.brdr_out .light .bottom').css('display', 'none');
  278. }
  279. else {
  280. $('.brdr_out .light .bottom').css('display', 'block');
  281. }
  282.  
  283. var outerTop = distance;
  284. var innerTop = distance;
  285.  
  286. //We've scrolled enough so that the top of the bottom slide reaches the top of the viewport, need to add top border back in
  287. if (outerTop < 15) {
  288. $('.brdr_out .light .top').css('display', 'block');
  289. outerTop = 15;
  290. }
  291. if (innerTop < 24) {
  292. $('.brdr_in .light .top').css('display', 'block');
  293. innerTop = 24;
  294. }
  295.  
  296. $('.brdr_out .light .left, .brdr_out .light .right').css('top', outerTop);
  297. $('.brdr_in .light .left, .brdr_in .light .right').css('top', innerTop);
  298.  
  299.  
  300. //Add the background image to top/bottom to hide the text as it scrolls under/above it
  301. if ($('#light .brdr_out').css('border-top-width') == '0px') {
  302. $('#top').css('display', 'block');
  303. }
  304. else {
  305. $('#top').css('display', 'none');
  306. }
  307. if (scrollY > 24) {
  308. $('#bottom').css('display', 'block');
  309. }
  310. else {
  311. $('#bottom').css('display', 'none');
  312. }
  313. }
  314.  
  315. $(window).load(function () {
  316. borders();
  317. });
  318.  
  319. $(window).scroll(function () {
  320. borders();
  321. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!