<div class="background">
<div class="triangle"></div>
</div>* {
margin: 0;
padding: 0;
outline: 0 none;
box-sizing: border-box;
}
.background {
width: 100vw;
min-height: 100vh;
display: block;
overflow-x: hidden;
}
.triangle {
background: #404040;
height: 100vh;
display: block;
position: relative;
}
.triangle:after {
content: '';
position: absolute;
bottom: -15rem;
width: 0;
height: 0;
border: 1rem solid transparent;
background: transparent;
border-bottom: 14rem solid #404040;
transform: rotateX(180deg) scaleX(42);
left: 48.8%;
}var blackCoeff = 1.25; // Коэффициент затемнения
var sectionList;
var blackList;
var counter;
function buildStyles() {
var styles = 'body {' +
'height: ' + ($("body").height() + 'px;') +
'position: relative;' +
'}' +
'.black {' +
'position: absolute;' +
'top: 0;' +
'left: 0;' +
'background: black;' +
'opacity: 0.8;' +
'}' +
'section {' +
'position: relative;' +
'top: 0;' +
'}' +
'section.fixed {' +
'position: fixed;' +
'top: 0;' +
'}';
$('head').append('<style id="sticky-stack-styles" type="text/css">' + styles + '</style>');
}
$(window).on('scroll', function() {
var windowScrollPos = $(window).scrollTop();
var tmpCounter = counter;
counter = 0;
for (var i = 0; i < sectionList.length; i++) {
if (windowScrollPos >= $(sectionList[i]).offset().top) {
counter++;
}
}
if (counter > 1) {
$(blackList[counter - 2]).css("opacity", (windowScrollPos / $(sectionList[counter < sectionList.length ? counter : counter - 1]).offset().top - 1) * (-counter * blackCoeff));
}
if (counter != tmpCounter) {
for (var i = 0; i < sectionList.length; i++) {
$(sectionList[i]).removeClass("fixed");
}
if ((tmpCounter == 2 && counter <= 1)) {
return;
}
$(sectionList[counter - 1]).addClass("fixed");
}
});
$(function () {
$("footer").append("<section/>");
sectionList = $("section");
for (var i = 0; i < sectionList.length; i++) {
var zIndex = (sectionList.length - i) * 2;
$(sectionList[i]).css("z-index", zIndex);
if (i == 0) {
continue;
}
$(sectionList[i]).prepend('<div class="black" style="width: ' + $(sectionList[i]).width() + 'px; height: ' + $(sectionList[i]).height() + 'px; z-index: ' + (zIndex + 1) + '"></div>');
}
blackList = $(".black");
buildStyles();
});body {
min-height: 100vh;
}
.modal {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
z-index: 1;
display: none;
}<body>
<div class="modal">PopUp!</div>
</body>function setCookie(name, value, expY, expM, expD, path, domain, secure) {
var cookieString = name + "=" + escape(value);
if (expY) {
var expires = new Date(expY, expM, expD);
cookieString += "; expires=" + expires.toGMTString();
}
if (path) {
cookieString += "; path=" + escape(path);
}
if (domain) {
cookieString += "; domain=" + escape(domain);
}
if (secure) {
cookieString += "; secure";
}
document.cookie = cookieString;
}
function getCookie(cookieName) {
var results = document.cookie.match('(^|;) ?' + cookieName + '=([^;]*)(;|$)');
if (results) {
return (unescape(results[2]));
}
return null;
}
$(function () {
if (getCookie("is_shown_modal") != "1") {
$(".modal").fadeIn(500, function () {
setCookie("is_shown_modal", "1");
});
}
});string url = "https://адрес_сайта_с_изображениями.рф/"
string path = "D:/Путь_к_изображениям/";
string[] imgNames = Directory.GetFiles(path);
string result = "<ul>";
foreach (string imgName in imgNames) result += "<li><img src=\"" + url + imgName + "\" /></li>";
result += "</ul>";
File.WriteAllText("result.html", result);