Задать вопрос

lagudal

Ответы

  • Готовая сборка на Gulp?

    @lagudal
    Например, для некоторых проектов, причем как раз c less, использую известный шаблон, только заменил там sass на less, соответственно добавив предварительно gulp-less и естесственно остальное что надо.
    В шаблоне используется bootstrap, у меня есть проекты где он нужен и где нет. Где нет там выпиливаю, где нужен там можно использовать например неофициальную bootstrap-less-port
    А так под разные задачи нужно самому под себя сборки делать - со временем так и получается - ведь понятие "хорошая сборка" у всех разное. Кому то нужно минимальное решение с возможностью легко довесить все что нужно будет в проекте, а кто то предпочитает использовать монстра, где есть все на все случаи жизни, и наоборот, удалять неиспользуемые плагины. Как говорится, на вкус и цвет...
    Ответ написан
    Комментировать
    Комментировать

  • Как аниамировать svg stroke-dashoffset?

    @lagudal
    А почему stroke-dashoffset: -500; не устраивает?
    Ответ написан
    1 комментарий
    1 комментарий

  • За счет чего можно добиться вау-эффекта в Landing page?

    @lagudal
    Часто вспоминаю, что на меня в свое время, лет 7-8 назад, сильное впечатление произвел именно лендинг с wow-эффектами, это был лендинг nike air. Для своего времени был очень революционный, самым писком были эффекты с параллаксами. К сожалению, не сохранилось локальной копии, а в сети найти не могу, сколько не пытался.
    Но суть в том, что тогда параллакс был абсолютно новым трендом, а сегодня уже никого им не удивишь.
    Еще пример. Лет 5 назад наткнулся на один сайт, который буквально околдовал, и по большей части, именно благодаря эффектам. Это был сайт по натуральному камню. Понравился так, что захотелось обязательно сохранить себе копию.
    Вот эта копия (Звук можно будет отключить снизу справа сразу после загрузки контента, секунд через 10-12)
    Однако компания, чей сайт это был, уже 3 года как с совершенно новым сайтом, и там не нашлось место этим эффектам.
    Вот этот новый сайт
    Как вы думаете, какой из этих сайтов больше говорит о солидности фирмы, какой больше информации несет и какой даст больше клиентов и соответственно более оправдан с простой финансовой точки зрения?
    Мне кажется, ответы очевидны, хотя их старого сайта и немного жаль...
    Что касается технологий - вариантов очень много, правильно сказали, все действительно зависит от того, что вы хотите показать, чем удивить, конкретно, какие эффекты вы считаете как "wow", чего вы хотите добиться?
    Я иногда балуюсь такими вещами, тоже неравнодушен, отдаю предпочтение svg, так как более менее понимаю, чего и как могу с ним добиться. Если есть возможность, стараюсь обходиться без js, но конечно не все можно сделать без js.
    п.с. - очень редко, когда что то содержащее некое число эффектов выходит у меня в продакшен.
    Так, для себя, для души, кому то показать.
    Вот, например, как раз лендинг, где много эффектов, который начал делать где то год или даже больше назад, но до сих пор не закончил. Закончу или нет - сам не знаю... поживем увидим )
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно подключить две owl карусели с навигацией?

    @lagudal
    как вариант, задайте разные классы и подключайте каждый по отдельности - больше кода конечно но будет 100% работать
    Например (свои классы и настройки ставьте)
    <script>
			$(function() {
				// Owl Carousel
				
				$('.owl-carousel-1').owlCarousel({
					items: 4,
					margin: 20,
					loop: false,
					nav: false,
					dots: false,
					autoplay: false,
					responsiveClass:true,
					responsive:{
						0:{
							items:1,
							nav: false,
						},
						480:{
							items:2,
							nav: false,
						},
						768:{
							items:3,
							nav: false,
						},
						1024:{
							items:4,
							nav: false,							
						}
					},
					navText: [
					"<span class='icon-slider-back'></span>",
					"<span class='icon-slider-forwards'></span>"
					],
					beforeInit : function(elem){
						//Parameter elem pointing to $("#owl-demo")
						random(elem);
					}
					
				});
				$('.owl-carousel-2').owlCarousel({
					items: 3,
					margin: 10,
					loop: true,
					nav: true,
					dots: false,
					autoplay: false,
					responsiveClass:true,
					responsive:{
						0:{
							items:1,
							nav: false,
						},
						768:{
							items:2,
						},
						1024:{
							items:3,
						}
					},
					navText: [
					"<span class='icon-slider-back'></span>",
					"<span class='icon-slider-forwards'></span>"
					],
					beforeInit : function(elem){
						//Parameter elem pointing to $("#owl-demo")
						random(elem);
					}
					
				});
			});	
			
		</script>
    Ответ написан
    Комментировать
    Комментировать

  • Iconmoon "Strokes get ignored when generating fonts"?

    @lagudal
    Это означает, что шрифты могут генерироваться только из иконок без обводки - даже если у вас в svg только stroke, нужно вначале преобразовать это в path, и после этого скормить иконку Icomoon
    Ответ написан
    2 комментария
    2 комментария

  • Являются ли ошибки валидатора html существенными для SEO?

    @lagudal
    Как я недавно выяснял, качество кода в плане сео сейчас уже где то очень уж далеко. Т.е. я не знаю алгоритмов поисковиков, но если этот фактор присутствует и влияет на выдачу, то уж точно не находится по важности в первой десятке факторов.
    Как пример, немецкоязычный вч запрос "Etiketten" - в органической выдаче гугла на первом месте с большим отрывом идет вот эта страница. На втором месте - другая страница этого же сайта.
    Если посмотреть на код в валидаторе, то увидите 693 эррора и 293 варнинга. И ничего, так как другие факторы намного важнее.
    Ответ написан
    Комментировать
    Комментировать

  • Как достать код из svg?

    @lagudal
    у вас в вашем шаблоне psd не svg, а тупо png картинка, завернутая в svg -"data:image/png;base64" - или векторизовать или просите чтобы дизайнер не халтурил и дал вам нормальный вектор(если вы получили шаблон от дизайнера)
    Ответ написан
    2 комментария
    2 комментария

  • Как определить и устранить причину, по которой один блок наезжает на соседний?

    @lagudal Автор вопроса
    все, нашел сам - на 2 класса в таблице задана фиксированная ширина:
    на tbody.cart.item .col.item задан width:450px, и на .cart.item .col.price, .cart.item .col.subtotal width:130px
    Ответ написан
    1 комментарий
    1 комментарий

  • Какой инструмент лучше выбрать для простой svg анимации?

    @lagudal
    Я вижу 3 подхода:
    1 - чистая svg-анимация, где анимация реализуется внутри собственно svg- кода;
    2 - css-анимация с помощью keyframes;
    3 - анимация с помощью javascript-библиотек.

    Для себя, если возможно, стараюсь обходиться без js, однако иногда все же соблазн бывает слишком велик, в основном, когда надо сделать быстро и с определенными эффектами. Для меня именно эффекты ванильно реализовывать самое долго. А тут - добавил один js файл и красота.
    Вот пару известных библиотек именно по svg морфингу и не только.
    alexk111.github.io/SVG-Morpheus
    snapsvg.io
    Вот еще крутой, правда платный плагин -
    https://greensock.com/morphSVG
    Ну и что то можно еще полезного найти в статье на хабре
    Ответ написан
    1 комментарий
    1 комментарий

  • Как это сверстать?

    @lagudal
    Гы. сам задавался вопросом примерно полгода назад )))

    Как сегодня верстают такие бордеры?
    Ответ написан
    Комментировать
    Комментировать

  • Как с помощью css сделать вот такой стиль фото?

    @lagudal
    Есть еще вариант с mix-blend-mode - позволяет использовать режимы наложения, удобно тем, что почти как в фотошопе - тем кто привык к шопу.
    Пример
    Ответ написан
    Комментировать
    Комментировать

  • Когда в Illustrator ставить плашечные цвета (pantone) в режиме CMYK, а когда просто оставлять CMYK?

    @lagudal
    Я довольно долго работаю с иллюстратором, но с pantone столкнулся первый и единственный раз совсем недавно -
    в он-лайн типографии, в которой постоянно и много заказываем всего, файл не прошел проверку. Как оказалось, у них как раз к этому виду печати были требования перевести все исключительно в pantone.
    Если интересно, вот этот продукт, который заказывали.
    В общем, если печатью занимаетесь именно вы, то да, вопрос надо изучить очень серьезно.
    Если же отдаете на печать, то типография сама должна сказать, если будут требоваться pantone цвета.
    Ответ написан
    1 комментарий
    1 комментарий

  • Вопрос об SVG графике в вебе?

    @lagudal
    Для новичка мне кажется это несколько сложный подход будет.
    Если вы вообще знакомы с векторной графикой, то будет проще начать таким образом.
    1.Откройте векторный редактор и нарисуйте нужную вам картинку - иконку, ну или любую пока простейшую картинку, какую хотите.
    2.Сохраните файл как svg.
    3. Откройте данный svg в любимом редакторе кода, например notepad++
    4. Посмотрите что находится между тегами и .
    5. Можете попробовать также следующее.
    а) Залейте этот svg файл на сервер себе, пропишите как обычную картинку - <img src = "path_to_file/file.svg" >
    б) Убедившись, что картинка отображается как обычная, удалите ее и ее вызов.
    в) В коде, где вы эту картинку вызывали, пропишите вместо <img src = "path_to_file/file.svg" >
    <svg> ---тут важ код svg--</svg>
    Почувствуйте разницу )))
    Думаю, вы сможете понемногу понять, что там все совсем не так сложно, во всяком случае башка на месте останется ))
    Пс. Ресурсы вам посоветовали отличные, изучайте )
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать анимированный border с помощью JS?

    @lagudal
    как тут показали, можно на js, можно на чистом css - а можно и смешанный вариант применить - анимировать стилями по клику, клик обрабатывать js.
    Ответ написан
    Комментировать
    Комментировать

  • Какую сделать весеннюю анимацию на сайте?

    @lagudal
    На сайте это конечно все не нужно - ни снег зимой, ни соловьи летом.
    Но если сильно надо - например, начальство требует и не приемлет возражений - то хотя бы ограничить все минимально по срокам, только кратковременно на время каких то праздников. (8 марта, как главный весенний праздник, уже прошел )))
    В европе тут еще пасху как то обозначивают, у меня на работе это обычно ограничивается баннерами. Ну там трава, на траве зайчики, из травы яйца выскакивают.
    Ну можете еще какую-нить цветущую сакуру анимировать )
    Ответ написан
    Комментировать
    Комментировать

  • Вопрос по Adobe illustrator. Насчет краев фигур. Нужна ваша помощь. Как сгладить края фигур?

    @lagudal
    как вариант решения проблемы
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать прозрачные буквы?

    @lagudal
    картинка не видна, но если вы сами выделили нужное вам в span - то почему бы просто не задать этому селектору opacity: 0.5; или сколько вам нужно?
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать появление текста?

    @lagudal
    в зависимости от задач, и если не нужна поддержка internet explorer, можно и без js- на чистом html и css - есть такой тег details -
    https://www.w3schools.com/tags/tryit.asp?filename=...
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать данный функционал с помощью SVG?

    @lagudal
    я бы сегменты диаграммы делал stroke, без заливки - тогда можно спокойно применить манипуляции с stroke-dashoffset, напрямую воздействуя на эти сегменты.
    В примере я дал им общий класс, и отдельные id, на случай, если нужны также манипуляции с конкретным сегментом по клику или hover какой то сслыки. Здесь hover по ссылке класса .line6-link воздействует через селектор + на следующий за ним сегмент с айдишником line6 - это просто пример, как видно, линк встроен в svg. Если в реальном проекте линки вынесены из svg, то воздействовать так просто не получится, надо будет скорее всего использовать js.

    Ответ написан
    Комментировать
    Комментировать

  • Анимация картинки?

    @lagudal
    Вот тоже вариант с png спрайтом - простенькая анимация, но для понимания вашего примера подойдет, я думаю )
    Ответ написан
    Комментировать
    Комментировать