API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 21st, 2017
565
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.96 KB | None | 0 0
raw download clone embed print report
  1.  
  2. STYLES.CSS
  3.  
  4. /* http://meyerweb.com/eric/tools/css/reset/
  5. v2.0 | 20110126
  6. License: none (public domain)
  7. */
  8. @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
  9. html, body, div, span, applet, object, iframe,
  10. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  11. a, abbr, acronym, address, big, cite, code,
  12. del, dfn, em, img, ins, kbd, q, s, samp,
  13. small, strike, strong, sub, sup, tt, var,
  14. b, u, i, center,
  15. dl, dt, dd, ol, ul, li,
  16. fieldset, form, label, legend,
  17. table, caption, tbody, tfoot, thead, tr, th, td,
  18. article, aside, canvas, details, embed,
  19. figure, figcaption, footer, header, hgroup,
  20. menu, nav, output, ruby, section, summary,
  21. time, mark, audio, video {
  22. margin: 0;
  23. padding: 0;
  24. border: 0;
  25. font-size: 100%;
  26. font: inherit;
  27. vertical-align: baseline; }
  28.  
  29. /* HTML5 display-role reset for older browsers */
  30. article, aside, details, figcaption, figure,
  31. footer, header, hgroup, menu, nav, section {
  32. display: block; }
  33.  
  34. body {
  35. line-height: 1; }
  36.  
  37. ol, ul {
  38. list-style: none; }
  39.  
  40. blockquote, q {
  41. quotes: none; }
  42.  
  43. blockquote:before, blockquote:after,
  44. q:before, q:after {
  45. content: '';
  46. content: none; }
  47.  
  48. table {
  49. border-collapse: collapse;
  50. border-spacing: 0; }
  51.  
  52. html,
  53. body {
  54. min-height: 100%;
  55. overflow-x: hidden; }
  56.  
  57. body {
  58. background-color: #f8f7f5;
  59. background-image: linear-gradient(to top, gray, #f8f7f5 30%);
  60. color: #333;
  61. font-family: 'Roboto Condensed', sans-serif;
  62. text-transform: uppercase;
  63. letter-spacing: 4px;
  64. font-size: 12px;
  65. -webkit-font-smoothing: antialiased;
  66. text-rendering: optimizeLegibility;
  67. overflow-y: hidden; }
  68.  
  69. a {
  70. text-decoration: none;
  71. color: #333; }
  72.  
  73. .small {
  74. font-size: .7em; }
  75.  
  76. h1,
  77. .link {
  78. position: fixed;
  79. z-index: 999; }
  80.  
  81. .link {
  82. padding: .8em 1.3em;
  83. top: 5em; }
  84.  
  85. h1 {
  86. background-color: #fff;
  87. font-size: 14px;
  88. letter-spacing: 4px;
  89. padding: .8em 1.5em;
  90. left: 4em;
  91. top: 4em;
  92. border-bottom: 2px solid #333; }
  93.  
  94. #about {
  95. left: 19em; }
  96.  
  97. #contact {
  98. left: 26em; }
  99.  
  100. #diary {
  101. left: 35em; }
  102.  
  103. #footer {
  104. margin: 4em auto;
  105. background-color: #fff;
  106. padding: 0.8em 1em;
  107. max-width: 11em;
  108. text-align: center; }
  109.  
  110. #backToTop {
  111. position: static;
  112. display: block;
  113. max-width: 9em;
  114. padding: .3em 1em .8em;
  115. margin: 17% auto 0;
  116. background-color: #fff;
  117. text-align: center;
  118. line-height: 120%; }
  119. #backToTop span {
  120. display: block;
  121. -webkit-transform: rotate(270deg);
  122. -ms-transform: rotate(270deg);
  123. -moz-transform: rotate(270deg);
  124. -o-transform: rotate(270deg);
  125. transform: rotate(270deg);
  126. -webkit-transition: none;
  127. -ms-transition: none;
  128. -moz-transition: none;
  129. -o-transition: none;
  130. transition: none;
  131. -webkit-animation-fill-mode: forwards;
  132. -ms-animation-fill-mode: forwards;
  133. -moz-animation-fill-mode: forwards;
  134. -o-animation-fill-mode: forwards;
  135. animation-fill-mode: forwards; }
  136.  
  137. #contentWrapper div {
  138. position: relative; }
  139. #contentWrapper div img {
  140. position: relative;
  141. opacity: 0;
  142. transition: opacity .3s ease-in; }
  143.  
  144. .popup {
  145. position: fixed; }
  146.  
  147. #aboutWrapper,
  148. #contactWrapper,
  149. #diaryWrapper {
  150. box-sizing: content-box;
  151. padding: 4em;
  152. display: none;
  153. z-index: 1000;
  154. line-height: 1.5;
  155. overflow: scroll;
  156. max-height: 80%;
  157. max-width: 700px;
  158. opacity: 0;
  159. transition: opacity .3s ease-in;
  160. background-color: white; }
  161. #aboutWrapper .close,
  162. #contactWrapper .close,
  163. #diaryWrapper .close {
  164. position: absolute;
  165. top: 10px;
  166. right: 10px;
  167. font-size: 2em; }
  168. #aboutWrapper h2,
  169. #contactWrapper h2,
  170. #diaryWrapper h2 {
  171. padding: 1em 0;
  172. font-weight: bold; }
  173. #aboutWrapper img,
  174. #contactWrapper img,
  175. #diaryWrapper img {
  176. display: block;
  177. margin: auto; }
  178. #aboutWrapper p,
  179. #contactWrapper p,
  180. #diaryWrapper p {
  181. padding: 1em 0; }
  182. #aboutWrapper .small,
  183. #contactWrapper .small,
  184. #diaryWrapper .small {
  185. display: block;
  186. text-align: right;
  187. padding: 0.5em 0; }
  188.  
  189. #aboutWrapper {
  190. text-transform: none; }
  191.  
  192. .shown {
  193. display: inline-block !important;
  194. opacity: 1 !important; }
  195.  
  196. .mobile img {
  197. width: 100%; }
  198. .mobile #img1,
  199. .mobile #img2 {
  200. margin-top: 0 !important; }
  201. .mobile #img1 img,
  202. .mobile #img2 img {
  203. margin-left: 0 !important; }
  204.  
  205. @media screen and (max-width: 1080px) {
  206. .link {
  207. top: 0;
  208. left: 2em !important;
  209. display: block;
  210. padding: .8em 1.5em; }
  211.  
  212. h1 {
  213. top: 2em;
  214. left: 2em; }
  215.  
  216. #about {
  217. top: 8em; }
  218.  
  219. #contact {
  220. top: 12em; }
  221.  
  222. #diary {
  223. top: 16em; }
  224.  
  225. .popup,
  226. #aboutWrapper,
  227. #contactWrapper,
  228. #diaryWrapper {
  229. box-sizing: border-box;
  230. padding: 2em 5%;
  231. top: 0;
  232. width: 100%;
  233. max-width: 100%;
  234. min-height: 100%;
  235. max-height: none; }
  236. .popup img,
  237. #aboutWrapper img,
  238. #contactWrapper img,
  239. #diaryWrapper img {
  240. width: 50%; }
  241. .popup .close,
  242. #aboutWrapper .close,
  243. #contactWrapper .close,
  244. #diaryWrapper .close {
  245. top: 5%;
  246. right: 5%;
  247. font-size: 4em;
  248. line-height: 100%; } }
  249. 

  250. jQuery Unveil
  251. /**
  252. * jQuery Unveil
  253. * A very lightweight jQuery plugin to lazy load images
  254. * http://luis-almeida.github.com/unveil
  255. *
  256. * Licensed under the MIT license.
  257. * Copyright 2013 Luís Almeida
  258. * https://github.com/luis-almeida
  259. */
  260.  
  261. ;(function($) {
  262.  
  263. $.fn.unveil = function(threshold, callback) {
  264.  
  265. var $w = $(window),
  266. th = threshold || 0,
  267. retina = window.devicePixelRatio > 1,
  268. attrib = retina? "data-src-retina" : "data-src",
  269. images = this,
  270. loaded;
  271.  
  272. this.one("unveil", function() {
  273. var source = this.getAttribute(attrib);
  274. source = source || this.getAttribute("data-src");
  275. if (source) {
  276. this.setAttribute("src", source);
  277. if (typeof callback === "function") callback.call(this);
  278. }
  279. });
  280.  
  281. function unveil() {
  282. var inview = images.filter(function() {
  283. var $e = $(this);
  284. if ($e.is(":hidden")) return;
  285.  
  286. var wt = $w.scrollTop(),
  287. wb = wt + $w.height(),
  288. et = $e.offset().top,
  289. eb = et + $e.height();
  290.  
  291. return eb >= wt - th && et <= wb + th;
  292. });
  293.  
  294. loaded = inview.trigger("unveil");
  295. images = images.not(loaded);
  296. }
  297.  
  298. $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
  299.  
  300. unveil();
  301.  
  302. return this;
  303.  
  304. };
  305.  
  306. })(window.jQuery || window.Zepto);
  307.  
  308.  
  309. SCRIPT.JS
  310. $(document).ready(function(){
  311. var windowWidth = $(window).width(),
  312. i = 3,
  313. isMobile = window.isMobile();
  314.  
  315. if (!isMobile) {
  316. // Randomize image position and scroll speed on desktops
  317.  
  318. var s = skrollr.init();
  319. $("#contentWrapper").on('DOMNodeInserted', 'div', function(){
  320. $(this).find("img").load(function(){
  321. var w = this.width,
  322. h = this.height,
  323. randomIndex = getRandomInt(0, 9),
  324. // Each image's scroll top and scroll bottom positions will be adjusted by semi-randomly choosen delta
  325. // The bigger the delta, the faster the scroll
  326. delta = [1,1,1,8,8,8,25,25,25,25][randomIndex]*50;
  327.  
  328. // Set scroll attributes
  329. $(this).attr({
  330. "data-bottom-top": "top: " + delta + "px;",
  331. "data-top-bottom": "top: " + (0-delta) + "px;",
  332. "data-anchor-target": "#img"+i
  333. });
  334. s.refresh($("#contentWrapper #img"+i+" img"));
  335.  
  336. // Position the image horizontally randomly on the screen
  337. $(this).css({
  338. "margin-left": getRandomInt(-w/4, windowWidth-w*0.75),
  339. "opacity": 1,
  340. "transition": "none"
  341. });
  342.  
  343. // Get the next photo URL and check if it exists on server.
  344. var nextImageURL = "img/photos/" + (++i) + ".jpg";
  345. $.ajax({
  346. url: nextImageURL,
  347. type:'HEAD',
  348. success: function() {
  349. // If photo exists, attach it to the page.
  350. $("#contentWrapper").append("<div id=\"img"+i+"\"><img src=\""+nextImageURL+"\" /></div>");
  351. // Position the image vertically randomly on the screen
  352. // Depends on the previous image height (should not cover too much), that's why applied here.
  353. $("#img"+i).css("margin-top", getRandomInt(-3*h/5, -h/5));
  354. }
  355. });
  356. });
  357. });
  358. // Attach the first dynamic image and start rolling.
  359. // First and second photos' positions are fixed, so we start attaching dynamically from #3.
  360. $("#contentWrapper").append("<div id=\"img3\"><img src=\"img/photos/3.jpg\" /></div>");
  361.  
  362.  
  363. } else {
  364. // On mobile, attach all dynamic DOM elements without waiting for images to load. Then apply lazy load (unveil) to images.
  365. $("body").addClass("mobile");
  366.  
  367. $("#contentWrapper").on('DOMNodeInserted', 'div', function(){
  368. var nextImageURL = "img/photos/" + (++i) + ".jpg";
  369. $.ajax({
  370. url: nextImageURL,
  371. type:'HEAD',
  372. success: function() {
  373. $("#contentWrapper").append("<div id=\"img"+i+"\"><img src=\"img/loading.gif\" data-src=\""+nextImageURL+"\" /></div>");
  374. },
  375. error: function() {
  376. $("img").unveil(200, function() {
  377. $(this).load(function() {
  378. this.style.opacity = 1;
  379. });
  380. });
  381. }
  382. });
  383. });
  384. $("#contentWrapper").append("<div id=\"img3\"><img src=\"img/loading.gif\" data-src=\"img/photos/3.jpg\" /></div>");
  385. }
  386.  
  387. $('#backToTop').click(function(e) {
  388. e.preventDefault();
  389. $('html, body').animate({scrollTop: 0}, 300);
  390. return false;
  391. });
  392. $('#about, #contact, #diary').click(function(e) {
  393. e.preventDefault();
  394. var popupID = '#' + this.id + 'Wrapper';
  395. $('.popup:not('+popupID+')').removeClass('shown');
  396. $(popupID).toggleClass("shown");
  397. if (!isMobile) {
  398. $(popupID).center();
  399. }
  400. return false;
  401. });
  402. $(".close").click(function(e) {
  403. e.preventDefault();
  404. $(".popup").removeClass('shown');
  405. return false;
  406. });
  407. $(document).keyup(function(e) {
  408. if (e.which === 27) {
  409. $(".popup").removeClass('shown');
  410. }
  411. });
  412. $('body').click(function(e) {
  413. if ($(e.target).closest('.popup').length === 0){
  414. $(".popup").removeClass("shown");
  415. }
  416. });
  417. });
  418.  
  419. window.isMobile = function() {
  420. var check = false;
  421. (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  422. return check;
  423. }
  424. function getRandomInt(min, max) {
  425. return Math.floor(Math.random() * (max - min + 1)) + min;
  426. }
  427. $.fn.center = function() {
  428. this.css("top", ($(window).height()/2 - $(this).outerHeight()/2) + "px");
  429. this.css("left", ($(window).width()/2 - $(this).outerWidth()/2) + "px");
  430. return this;
  431. };
  432.  
  433.  
  434. SCRIPT
  435. <!DOCTYPE html>
  436. <head>
  437. <title>Posternaks Film Photography</title>
  438. <meta content='posternaks, film, photography, photos, portfolio, photographer, sisters, twins' name='keywords'>
  439. <meta content='Posternaks photography portfolio' name='description'>
  440. <link href='img/icon.png' rel='shortcut icon'>
  441. <link href='css/styles.css' rel='stylesheet' type='text/css'>
  442. <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
  443. <script src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.29/skrollr.min.js' type='text/javascript'></script>
  444. <script src='js/jquery.unveil.js' type='text/javascript'></script>
  445. <script src='js/scripts.js' type='text/javascript'></script>
  446. </head>
  447. <body>
  448. <h1>
  449. <a href='/'>Posternaks</a>
  450. </h1>
  451. <a class='link' href='#' id='about'>About</a>
  452. <a class='link' href='#' id='contact'>Contact</a>
  453. <a class='link' href='#' id='diary'>Diary</a>
  454. <div id='contentWrapper'>
  455. <div id='img1'>
  456. <img data-anchor-target='#img2' data-bottom-top='top: 420px;' data-top-bottom='top:-20px;' src='img/photos/2.jpg' style='margin-left: 45%; opacity:1;'>
  457. </div>
  458. <div id='img2' style='margin-top: -30%;'>
  459. <img data-anchor-target='#img1' data-bottom-top='top: 20px;' data-top-bottom='top:-20px;' src='img/photos/1.jpg' style='margin-left: 10%; opacity:1;'>
  460. </div>
  461. </div>
  462. <div id='footer'>
  463. &copy; Posternaks
  464. </div>
  465. <a class='link' href='/' id='backToTop'>
  466. <span>&#9002;</span>
  467. <br>
  468. Back to top
  469. </a>
  470. <div class='popup' id='aboutWrapper'>
  471. <a class='close' href='#'>X</a>
  472. <p>
  473. Zhenya and Tanya Posternak, twin-sisters from Kiev, Ukraine.
  474. <br>
  475. Currently based in NYC.
  476. </p>
  477. </div>
  478. <div class='popup' id='contactWrapper'>
  479. <a class='close' href='#'>X</a>
  480. <h2>Say hello at:</h2>
  481. <a href='mailto:tposternak@gmail.com' target='_blank'>tposternak@gmail.com</a>
  482. <br>
  483. <a href='mailto:zposternak@gmail.com' target='_blank'>zposternak@gmail.com</a>
  484. </div>
  485. <div class='popup' id='diaryWrapper'>
  486. <a class='close' href='#'>X</a>
  487. <h2>Follow us:</h2>
  488. <a href='https://instagram.com/zposternak/' target='_blank'>instagram/zposternak</a>
  489. <br>
  490. <a href='https://instagram.com/tanyaposternak/' target='_blank'>instagram/tanyaposternak</a>
  491. </div>
  492. </body>
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!