• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект свечения лампочки на jQuery (Как сделать эффект наложения света при включение на JS и CSS)
Создать эффект свечения лампочки на jQuery
Kosten
Дата: Четверг, 2020-04-30, 20:28 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29163
Награды: 62


Есть много вариаций, где при входе на страницу, вам нужно включить свет, это делается для того, чтоб можно было все корректно наблюдать. Ведь по умолчанию мы наблюдаем темную гамму, и для этого специально создается выключатель, но в нашем случай также идет включатель.

Мы по умолчанию видим провод с лампочкой на темном фоне, а рядом как раз то включатель, где нужно навести курсор и кликнуть, где сразу автоматически становится светло , так как лампочка начинает светить. Это больше такой трюк, что можно реализовать под тематику или под информацию, которая открыта, но чтоб ее прочесть вы включаем освещение.

Так при входе смотрится:



Здесь мы включили питание и во чудо, лампочка стала светится:



Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

HTML

Код
<div id="sampa-konteynus">
<div id="waistband"></div>
<div id="soyedineniye"></div>
<div id="veneye-gnezdog"></div>
<div id="snizu-gnezdos"></div>
<div id="gnezdo-nazad"></div>
<div class="alampochka" id="bulb-top"></div>
<div class="alampochka" id="bulb-bottom"></div>
</div>
<div id="kereucal-konteyn">
<div id="kuchatel-perepleta">
    <div class="anglekosem"></div>
    <div id="pereklyuca"></div>
    <div class="anglekosem"></div>
  </div>
</div>

CSS

Код
#kereucal-konteyn {
  width: 20%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#sampa-konteynus {
  width: 40%;
  height: 100vh;
  align-self: center;
}

#kuchatel-perepleta {
  background: #3d3b3c;
  width: 80px;
  height: 120px;
  border-radius: 5px 5px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 0px 5px black;
}

.anglekosem {
  width: 5px;
  margin: 10px;
  height: 5px;
  background: #2f2f2f;
  border-radius: 50%;
}

#pereklyuca {
  background: linear-gradient(#3d3b3c, #2f2f2f);
  position: relative;
  width: 40px;
  height: 60px;
  border-bottom: 1px solid black;
  border-top: 5px solid #1f1f1f;
  border-right: 1px solid black;
  border-left: 1px solid black;
  cursor: pointer;
  transition: all .1s ease-Out;
}

#waistband {
  width: 10px;
  background: #3d3b3c;
  height: 200px;
  display: block;
  margin: 0 auto;
}

#soyedineniye {
  width: 15px;
  height: 15px;
  background: #211f1f;
  margin: 0 auto;
  border-radius: 15px 15px 0 0;
  margin-top: -5px;
}

#veneye-gnezdog {
  width: 50px;
  height: 20px;
  margin: 0 auto;
  background: #312e2d;
  border-radius: 50px 50px 0 0;
  margin-top: -3px;
  border-bottom: 1px solid #282626;
}

#snizu-gnezdos {
  width: 50px;
  height: 30px;
  margin: 0 auto;
  background: #312e2d;
}

#gnezdo-nazad {
  margin: 0 auto;
  width: 50px;
  height: 10px;
  background: #1d1d1d;
  border-radius: 50%;
  margin-top: -5px;
  opacity: .5;
}

#bulb-top {
  width: 46px;
  height: 30px;
  background: #050513;
  margin: 0 auto;
  margin-top: -8px;
  border-radius: 10px 10px 0 0;
}

#bulb-bottom {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: #050513;
  border-radius: 50%;
  margin-top: -15px;
}

.bglightOn {
  background: #bfbda4;
  transition: all .3s ease-Out;
}

#kereucal-konteyn .cover-shadow {
  box-shadow: 0px 0px 5px #717171;
}

#kereucal-konteyn .pereklyuca-color {
  background: #deded2;
}

#kereucal-konteyn .pereklyuca-border {
  background: linear-gradient(#cecec3, #deded2);
  border-bottom: 5px solid #737373;
  border-top: 1px solid #888;
  border-right: 1px solid #888;
  border-left: 1px solid #888;
}

#kereucal-konteyn .anglekosem-color {
  background: #bfbfb5;
}

#sampa-konteynus .bulbLightOn {
  background: #deded2;
  box-shadow: 0px 8.5px 24px 3px #deded2;
}

JS

Код
$('#pereklyuca').click(function() {

  $('#kuchatel-perepleta').toggleClass('cover-shadow');
  $('#kuchatel-perepleta, #pereklyuca').toggleClass('pereklyuca-color');
  $('.anglekosem').toggleClass('anglekosem-color');
  $('#pereklyuca').toggleClass('pereklyuca-border');
  $('body').toggleClass('bglightOn');
  $('.alampochka').toggleClass('bulbLightOn');

});

Теперь вы можете реализовать эффект переключателя в виде лампочки.

Демонстрация
Прикрепления: 2371819.png(17.2 Kb) · 2509303.png(29.2 Kb) · css-lightbulb.zip(4.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать эффект свечения лампочки на jQuery (Как сделать эффект наложения света при включение на JS и CSS)
  • Страница 1 из 1
  • 1
Поиск: