Ответы пользователя по тегу CSS
  • Как сделать такие линии?

    Exomode
    @Exomode
    Архитектор ПО
    Либо отрисовать канвасом кривую Безье, как указали выше, либо только средствами CSS3, применить трансформацию к блоку с абсолютным позиционированием и скругленным бордером. В обоих случаях линии залить линейным градиентом. Получится примерно такой эффект как на картинке.
    Ответ написан
  • Как сверстать такую секцию landing page?

    Exomode
    @Exomode
    Архитектор ПО
    Можно и на CSS3:

    <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%;
    }


    https://codepen.io/Exomode/pen/vJYQjB
    Ответ написан
  • Как сделать такой эффект?

    Exomode
    @Exomode
    Архитектор ПО
    Там страница разбита на несколько блоков. У самого первого стоит обычный эффект параллакса, происходит смещение фона с более низкой скоростью, чем у самого скролла. В сети есть более 35 готовых реализаций на любой вкус и цвет. Во втором блоке просто идёт активация по триггеру, как только позиция скролла достигает позиции блока, проявляется верхний элемент с надписью, такое тоже не сложно реализовать, в сети есть куча примеров на том же jQuery. У остальных двух блоков эффектов при скроллинге я не заметил.
    Ответ написан
  • Находил ли кто подобный плагин?

    Exomode
    @Exomode Автор вопроса
    Архитектор ПО
    Аналогов я так и не нашел, вот решение, которое написал за вчера сам:
    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();
    });


    Полностью соответствует требованиям задачи ТЗ заказчика, не затрагивает структуру оригинальной верстки и стили, генерит что ему надо на лету, подключается в одну строку.
    Ответ написан
  • Пример с описанием написание на javascript всплывающего окна?

    Exomode
    @Exomode
    Архитектор ПО
    CSS:
    body {
        min-height: 100vh;
    }
    
    .modal {
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        z-index: 1;
        display: none;
    }


    HTML:
    <body>
        <div class="modal">PopUp!</div>
    </body>


    JavaScript:
    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");
            });
        }
    });
    Ответ написан
  • Как проставить пути к картинке в 92 пунктах?

    Exomode
    @Exomode
    Архитектор ПО
    Скриптом сгенерировать текст через шаблон, алгоритм примерно следующий (C#):
    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);
    Ответ написан
  • Можно ли сделать прокрутку в другую сторону?

    Exomode
    @Exomode
    Архитектор ПО
    Если я правильно тебя понял, ты пытаешься добиться эффекта т.н. "Parallax"? Есть готовые библиотеки JS, так же можно сделать на CSS3, оптимизация во втором случае будет заметно лучше, особенно на больших изображениях.

    50+ Best jQuery Parallax Plugin
    Параллакс на чистом CSS
    Ответ написан