Jump to content

hetsketch

Newbie
  • Posts

    12
  • Joined

  • Last visited

Everything posted by hetsketch

  1. Да, пожалуй просто вешать классы из JS правильнее. Так и сделаю @Igor Schnaider, спасибо! То что надо)
  2. @Igor Schnaider, да, забыл указать, что пробовал с visibility, но тогда второй блок остается в потоке документа(при visibility: hidden), а мне нужно, чтобы был только один блок.
  3. Приветствую всех! В общем на html странице есть 2 блока: с приветствием и кнопкой и второй блок с калькулятором. Хотелось бы сделать, чтобы при нажатии на кнопку первый блок плавно сдвигался влево и исчезал(как бы за границу экрана), а второй плавно появлялся на его месте. Все как бы работает, но как я понял display:block ломает всю анимацию, то есть второй блок появляется не плавно. Подскажите как лучше это реализовать. Хотелось бы просто, без jQuery. Вот код <div id="content"> <div id="welcome"> <a href="#" id="try-it"/> </div> <div id="calc-wrapper"> </div> </div> #welcome { transition: all 1s ease-in; } #calc-wrapper { display: none; opacity: 0; transition: opacity 1.5s; } 'use strict'; let welcome = document.getElementById('welcome'); let tryIt = document.getElementById('try-it'); let wrapper = document.getElementById('calc-wrapper'); tryIt.addEventListener('click', function (event) { welcome.style = "transform: translate(-100%, 0);"; setInterval(function () { welcome.style = "display: none;"; wrapper.style = "display:block; opacity:1;"; }, 1000); });
  4. @Q4Dizzy, спасибо! Не знал, как эта штука называется, поэтому не смог найти в гугле. Буду ее юзать
  5. Собственно, есть вот такой блок(картинка внизу). При нажатии на пункт, он должен разворачиваться. Открытым может быть только один пункт. Но у меня пока другая проблема, я никак не могу понять, как мне задать обработчик для каждого пункта по отдельности. Например, когда я нажимаю на первый элемент, то открываться должен только он, у меня получается, что открываются все. Вот то, что я наваял на JS. Прошу сильно не пинать, это только 2й макет). <div class="work-type"> <div class="work-item"> <span>Photography</span> <i class="fa fa-angle-down" aria-hidden="true"></i> </div> <p class="desc">Lorem</p> <div class="work-item"> <span>Photography</span> <i class="fa fa-angle-down" aria-hidden="true"></i> </div> <p class="desc">Lorem</p> </div> $(document).ready(function() { var workItem = $('.work-item'); var workDesc = $('.desc'); var arrow = $('.work-item i'); $(workItem).on('click', function(e) { workDesc.slideToggle(); if ($(arrow).hasClass('fa-angle-down')) { $(arrow).removeClass('fa-angle-down'); $(arrow).addClass('fa-angle-up'); workItem.css('margin-bottom', '0'); } else{ $(arrow).removeClass('fa-angle-up'); $(arrow).addClass('fa-angle-down'); workItem.css('margin-bottom', '10px'); } }); });
  6. Короче проблему решил так: создал свой миксин, который из спрайта вытягивает иконку по номеру. И в цикле каждому nth-child(i) задавал i-ю иконку с помощью миксина. @mixin add-icon($sprite-url, $image-width, $n, $offset-x: 0) background-image: url($sprite-url) @if $n == 1 background-position: 0 0 @else background-position: ($n - 1)*($image-width+$offset-x)*(-1) 0px @for $i from 1 through 6 & :nth-child(#{$i}) .service-item &:before @include add-icon("../img/icons.png", 32px, $i, 10px) Всем спасибо за ответы
  7. @andrey7287, да уж... Это пока сложно для моего понимания) Как я понял код написан на SCSS, сейчас пытаюсь в нем разобраться. Попробую сделать без компаса пока, правда не очень хорошо понимаю, как это всё реализовать. Ну а вообще подход делать через background правильный? Или это не так принципиально?
  8. В общем, есть такой блок(см. прикрепленные файлы). Так же есть спрайт с иконками для каждого пункта. Я написал такой код для каждого айтема. И у меня возник такой вопрос: как лучше разместить иконки в айтеме? Читал, что нужно делать в CSS через background, но тогда придется дублировать код и нужно будет давать уникальные имена айтемам. Или же всё таки в этом случае использовать тэг img? Хотелось бы услышать мнение бывалого специалиста) p.s. для разметки использовалась сетка bootstrap <div class="row"> <div class="services"> <div class="col-md-4"> <div class="service-item"> <h3>Photography</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, itaque.</p> </div> </div> ... </div> </div>
  9. @npofopr, хм, мне кажется, что ваш вариант даже лучше. В смысле гибкости больше, во внутренний див можно поместить всё что угодно.
  10. @npofopr, вы имеете в виду на одном слое градиент, а на 2м иконка с текстом?
  11. Ребят, спасибо всем! Я даже не ожидал, что тут так быстро отвечают. Воспользовался советом @Switch74. @npofopr, спасибо за годные примеры! Возник еще такой вопрос: как лучше разместить текст с иконкой? Если бы просто текст, то понятно. Пихаешь в content и все. А как туда добавить ещё и иконку(шрифтовую)?
  12. Всем привет! Такой вопрос: как при наведении на <img> наложить полупрозрачный градиент средствами CSS поверх картинки? Структура HTML такая: <div class="item"> <img src="/img/about-us-1.png" alt="#"> </div> Пример: справа - нормальная картинка, слева при наведении.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy