How to know that the user has reached these items [duplicate]

Question

This question has already been answered:

How to determine what element is in the visible area of the browser window? 2 answers

In theory, this case should change the contents of #title to the name of the bolk, which is now in sight. But nothing happens. There are no errors in the console, but the code cannot cope with its task at all. I know that there are a lot of crutches here, until I can do it differently.

$(window).scroll(function(){ /* elements */ var $introducion = $("#introducion"), $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ $introducionPos = $introducion.offset().tot, $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ $scrollToIntroducion = $introducionPos - $winHeight, $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); } else if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); });

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> = "galery" src = "https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> = "galery" src = "https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> w753-h750-no "alt =" "> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> = "galery" src = "https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt = ""> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> = "galery" src = "https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> = "https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> = "https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> = "https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html> = "https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="height=device-height,width=device-width"> <title>My site</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header class="logo"> <ul> <li id="logoc"> <h1 id="logo"></h1> </li> <li id="name"> <h1 id="title"></h1> </li> <li> <a href="https://galactikka.com/146568"> <img src="galactikka.svg" alt=""> </a> </li> <li> <a href="https://vk.com/dm1tr1y147"> <i class="fa fa-vk" aria-hidden="true"></i> </a> </li> <li> <a href="https://www.instagram.com/ourwildworldpictures/"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> <li> <a href="https://ficbook.net/authors/2549589"> <img src="ficbook.svg" alt=""> </a> </li> </ul> </header> <!-- INTRODUCION --> <section id="introducion"> <p>Hello! Glad to see you on my <span>site</span><br>My name is <span>Dmitriy</span> I'm <script type="text/javascript">var date = new Date(); document.write(date.getFullYear()-2003);</script><br>My hobbies are <span>photographing</span>, <span>programming</span> and <span>writing</span></p> </section> <!-- GALERY --> <a href='' id='more'><i class='fa fa-long-arrow-left' aria-hidden='true'></i> More</a> <section id="photo"> <div id="exp"> <img id="first" class="galery" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <img id="second" class="galery" src="https://lh3.googleusercontent.com/Xk-USyHTClr2hYM0NOhcw2z1AMR7GHBreZYqVXDBv-BugFrjNjh6cv3ixTyrSv9xK0NzpD6-a56RRNowl9ImZPwYyTgLIGvc83kdKyWdhAu9D99BnRjBw5KtlRnfEsSxwk2qU1LHk-EYD5pKvs7bLZ7oYqRUZ2pyMX-kWbPxyoKDe2a8rtI0VKgmMBRlef-BQxlQ40AfCzdFTltPmV7-fNXQinXUgbD4vmve3lGxOnd-HFqr3_D9PVYo1r1Cszohw2m16kQ52AFFbNB-TPphuiMy0QHnOLoDipKkskpr-CVSosieVltVhEuFSgxvLNK7wjt_s7G5EpA9unnHnhgqpQeLs-WdQsjfpjSH-4pcxCPkN9yq9_DnDCx7-bc37_wdLNc630cnQ4YSLNk3b--d_bQbdtiVaGBFe-CdQvU5M_ZaglpJ_fvIGrGltntnDdrG5mnDqDSHVGOOwHuOIkuW1NWL6HmHmUJ1TqJWlFcJDNR0ZLOq_hcO7j3iQwdxlfLDzY0lKYHoFAfoJ7sRqP95QVsb3cUFLW_dsftehexvQqyhKouYzy-lELPKUEz82Fj8wW3nJTwJUxDbWqJh1FFUxcXXEdsFb6xo8NTDoXBCNQ=w753-h750-no" alt=""> <img id="third" class="galery" src="https://lh3.googleusercontent.com/L5EDRAd8Fck0fd5WDXD4CT5cNjB2piVH8JlDZ9SCdzeavuQZF5icWKyHepu5pNtEGAw9-ErzaTztRMJb2hhVVcpFFaJGTPSTeMpAruxu5Jt9tQ9nWIXM1k8MMQedGaVm3WFNDmreqOzUYb-cqXbr0_sqAk1hGSMmjjhDNm9Pax0Vm4URcQM-4c7V6dchF9xAEDUYr7SBwpF2t8fIW_fTpdmwawPwzTcGM2njZZvqKVd4GNMdhztvBdvNURrkzRRg2RKrSHZlU17xWXAfvCUVy2HVbgBUHe4LEpm9v7IpQCEFHfcJPwl9nfkHyLk5M3YI4RPwkZtTCuJmx6xnQyJp8xDdGHnwOC9AjVEAWPpTXjFcgcWp7qPmsuAEEEUugffhcm0SMSH5xauUioGUmSrZ_H_BsBKhjrc96hidsK1DbSR5IUFS0SL-iU1cErVsrKAAFLAo1ChP772BXof9fPBUU4NIGsEwONyIwe8t37oOXHe4xkiRuEPAvjcYwDsQ8_BXNPVUHMAFMtRfm-EyHoFWk8ZuZxsTsq-LOA_my8MfQKkQthyQx0hIbp1F2g0TLNK6KDS0_5naye-eHjxWkYLPYCfZHELdoSi9WrKjfq94gw=s750-no" alt=""> <img id="forth" class="galery" src="https://lh3.googleusercontent.com/Rg7w2QnYejKWtZd07aCjdaalmkIQVPHXylfQBtOdwxbCDB2Rem3ddiQqGfGuhzVkqHxZyWUbeh5inVWY4KOiZaGLRmR2gvavWDcnO309-x6qY7hoXDTMaSOP99JytCiLcDEp-I-WOhMeCSgQTC5Cw4MMM8dtySKO3hX22D_Me-YERm7MbOi_9b-Wmb_rx0pptmgj4NhXaeiK3c7weE43UtQOV2qVNeoQ6NZEvIolZS4ouO6W62G-EnfcFg6mTNFg_fxI9HbDBaxfUXVfLdGlJKbbP1lN9WtLudq9D8AxId0ob7vByLDG0fDNCVjp8JQAOW90bFitLmeu1SmQVeBKPNC6XMahxjb7Dqjozt3p3vQp8NMqimwlbTskJoiEMydoF-ifkEJVpUtHeH5T2jM6c0DWlSQHqbb5byAlGVC7iZuQk-4KdNIel6dIneGFm7e2LqW9gn1gFGuD0jQQnuCyIdee1dACIBXiMEZixpA1jv7_qdfBkx_AN355hNBPp7RYHk75QnT8oF6HkGqDJNfje4n7rI0zgbyCK70hG8eJPxS-ry_oTj0xmvWSXYUefUZsa53OE5F_NaCtuYfqjkzBkNK3CTyd-cZWYSg2ajo=w1001-h750-no" alt=""> <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- IMG RESIZER --> <script type="text/javascript"> $(document).ready(function(){ $('.galery').height($('.galery').width()); $(window).resize(function(){ $('.galery').height($('.galery').width()); }); }); </script> <script type="text/javascript"> $(".galery").hover(function() { $("#more").css; }); </script> </div> </section> <!-- PROJECTS --> <section id="projects"> <div class="exs" id="first"> <h2>Q.Noter</h2> <img class="exsi" src="clipboard1.svg" alt="Screenshot"> </div> <div class="exs" id="second"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <div class="exs" id="third"> <h2>Later</h2> <img class="exsi" src="Flag_of_None.svg" alt=""> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exsi').height($('.exsi').width()); $(window).resize(function(){ $('.exsi').height($('.exsi').width()); }); }); </script> </section> <!-- NEWS --> <section id="news"> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor tellus turpis, eu bibendum massa sagittis nec. Donec sed nibh neque. Suspendisse at neque ac risus consequat cursus. Praesent sollicitudin eu lectus eu placerat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus arcu sapien, euismod ac placerat quis, vestibulum vel sapien. Cras purus ante, ullamcorper sit amet sodales ornare, venenatis quis risus. Ut rutrum vitae ex in vulputate. Sed vehicula massa vel nulla feugiat finibus. Sed ut posuere arcu.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Aliquam blandit dolor nunc, ut consectetur augue egestas eget. Maecenas tempus erat nec orci sagittis faucibus. Nulla id urna id ex imperdiet ultrices. Nullam vitae ornare turpis. Aenean dignissim odio ac euismod lacinia. Donec in fermentum nisi. Sed enim enim, vehicula vel posuere ut, ultrices quis urna. Aliquam ac ultrices neque. Aenean ultricies arcu lacinia, posuere turpis vitae, ornare orci. Donec at ante quam. Donec et facilisis felis. Morbi vestibulum condimentum est ac tincidunt.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>In tincidunt eu metus quis volutpat. Curabitur semper ex ac elit fermentum, nec viverra neque hendrerit. Nulla aliquam vulputate odio ut posuere. Donec justo odio, blandit ut interdum id, scelerisque ac orci. Vivamus vel faucibus massa. Donec cursus nulla sed mauris fermentum porttitor. Vestibulum fringilla consequat sapien sed tincidunt. Etiam tincidunt rutrum turpis, eu porttitor libero venenatis nec. Duis placerat fringilla ultrices. Donec ac diam eget velit cursus congue eleifend at ex. Morbi sollicitudin lobortis lacinia.</p> </div> <div> <h2>Hello</h2> <img class="exni" src="https://lh3.googleusercontent.com/2b8I_zX4FGxIZ8pchP9cvKf58E2ef8qmdB1EnQOVdPP4Y-dSf3XkEYLwj7vcGE5W6XVyxRZrLu6EDJqvQ1sJHWZMJiu6J8WfjUXWoNaRual_kUJaX3pKgYoezfKRTDBw6gFhHm2bfOVvVWfj92_CVi9XMpEF_c8fxThyk-Kv3nsiYEpp0s_QSHmE5N8LmrRlaFQe4xaCOqtULajJKSVjjpRXnQjaTNnH2GvxiCMq6bhmjXqgIi-U9gSQ9lM_fBB1tT-FSuwt5ftpI3WLaXIArWJ6kBELJy_qtlQR7yyqrKr91jOeCF0ap7p5iuLT999qg-6BxaEdyTfG3eia2wIK-6JUZBtSUClqF4FUcRYRqZWXX7ieaLT7e4LNK0a_nFjAx9NQdIQC7x7uGPmEx8ZvxPXPiaPK6DbhIw4y1TdPpkskcU0oLFpZjHmdZnWi4wnjPZp2dZCYa0MZ-3xnjvm21aDnF-n-JeDPYJR-8a_XZQ_R-PeoeWTU08TM7cWvoyeXWOXHWotAbVA3MRpJl2h21KgSsxN-mqT3bSuRLXqgiazqb0ubQOz4_S_N9pW3Ex3pxbhAVRZKF3H_FgcJiKaUO089-P00_qA29RK86nRHEg=w1001-h750-no" alt=""> <p>Morbi id sapien ipsum. Praesent ullamcorper neque facilisis mauris vulputate tempus. In posuere ac ante sed imperdiet. Proin ante dui, bibendum ac lectus vitae, vestibulum elementum mi. Ut id risus ex. Phasellus porta velit dolor, ut consectetur libero suscipit sed. Aliquam ultrices risus sed dolor maximus mattis. Duis porta posuere hendrerit. Donec gravida laoreet magna at auctor. Suspendisse potenti.<br>Nam sed rhoncus ipsum. Suspendisse nec lectus purus. Phasellus interdum congue velit, eu hendrerit leo. Nulla eget lorem id magna hendrerit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum non interdum nibh. Mauris varius lectus augue, ac efficitur elit pellentesque dictum. Donec sed lorem vel elit scelerisque auctor. Cras ut leo mollis, iaculis lorem at, aliquam ex. Mauris fermentum leo eget nisl porta semper. Nullam vitae dolor sit amet est viverra vestibulum. Praesent efficitur nisl turpis, quis dictum urna ullamcorper quis. Maecenas in aliquet nunc. Donec aliquam consectetur nisl, eget scelerisque libero varius vel. Duis porttitor nibh quis pulvinar gravida.</p> </div> <!-- IMG RESIZER --> <script type="text/javascript"> $(function(){ $('.exni').height($('.exni').width()); $(window).resize(function(){ $('.exni').height($('.exni').width()); }); }); </script> </section> <!-- TITLE TRIGGER --> <script type="text/javascript"> /* elements */ var /*$introducion = $("#introducion"),*/ $photo = $("#photo"), $projects = $("#projects"), $news = $("#news"), /* elements positions */ /*$introducionPos = $introducion.offset().tot,*/ $photoPos = $photo.offset().tot, $projectsPos = $projects.offset().tot, $newsPos = $news.offset().tot, /* window heignt */ $winHeight = $(window).height(), /* distances to elements */ /*$scrollToIntroducion = $introducionPos - $winHeight,*/ $scrollToPhoto = $photoPos - $winHeight, $scrollToProjects = $projectsPos - $winHeight, $scrollToNews = $newsPos - $winHeight; /* checking */ $(window).scroll(function(){ var $winScrollTop = $(this).scrollTop(); /*if($winScrollTop > $scrollToIntroducion){ $("#title").text("Introducion"); }*/ if($winScrollTop > $scrollToPhoto){ $("#title").text("Galery"); } else if($winScrollTop > $scrollToProjects){ $("#title").text("Projects"); } else if($winScrollTop > $scrollToNews){ $("#title").text("News"); } }); </script> </body> </html>

@air I apologize, didn’t see that question, and the answer there, in my opinion, is a bit complicated, because I don’t need a horizontal scroll.
As for my question, then Kirill Korushkin gave a good answer, even, in my opinion, less crutch

Accepted Answer · 2017-12-29T20:54:09

 var $fx_height = $('.fx-height'), wh = $(window).height(), step = 100, // отвечает за нижнюю границу диапазона, в котором должен оказаться элемент своей верхней левой точкой (offset), что бы передался его контент (в данном случае значение id) // данное значение не должно быть больше высоты блока из набора $fx_height $title = $('#title'); $(document).scroll(function() { $fx_height.each(function() { if(($(this).offset().top - $(document).scrollTop()) > 0 && ($(this).offset().top - $(document).scrollTop()) < step) { $title.html('now is on view: ' + $(this).attr('id')); } }) }) $(document).trigger('scroll');

 #title{ position:fixed; width:100%; text-align:center; } .fx-height{height:400px} #introducion{background-color:lightgreen} #gallery{background-color:lightblue} #projects{background-color:lightyellow}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 id="title">now on view</h1> <div id="blocks"> <div id="introducion" class="fx-height">introducion block</div> <div id="gallery" class="fx-height">gallery block</div> <div id="projects" class="fx-height">projects block</div> </div>

Everything works quite well, but here '#introducion' does not want to change, when loading the page '#title' does not change, and if you scroll down and back up again, then '#title' remains now on view: photo.
@ Dmitry Shishkov there is a variable step, it is responsible for the lower limit of the range in which the element should be its upper left point (offset), so that its content is transmitted (in this case, the id value).
But what value to substitute if the first block is at the beginning of the page?

Answer 2 · 2017-12-29T16:01:45

Clean the inner wrapper

 $(window).scroll(function(){ ... });

around if-else s. The code is already in the scroll event handler.

Update

I did not understand something

Your code looks like this:

 $(window).scroll(function(){ ... $(window).scroll(function(){ ... }); });

What it does:

first external $(window).scroll(function(){ hangs the handler on the scroll event,
then for each scroll event this external handler adds another handler - the code inside the internal $(window).scroll(function(){ (and more, and more, and more).

Update

even after it is removed, nothing happens

You did not show your markup. Maybe your if-else logic is wrong.

Update

Expand the conditions in the if-else from the bottom to the top.

Indeed, $ (window) .scroll (function () {is already there, but it never solved the problem
Anyway, nothing works, okay, at the bottom there is already a solution

How to know that the user has reached these items [duplicate]

Reported as a duplicate by Air , my , mymedia , MSDN.WhiteKnight , Alex 17 Jan '18 at 17:57 .

2 answers 2

More articles: