Изображения. Светлинен ефект на CSS и JQuery
.jpg)
сряда
Здравейте, приятели. Преглеждайки свободното интернет пространство попаднах на един интересен ефект за разглеждане на изображения.
Ефектът наподобява светещо фенерче, чиито сноп светлина попада върху изображението. Върху тъмно изображение на мястото на курсора се появява ярък кръг, като петно от светлина от фенерче. Петното се движи според движението на курсора. И всички елементи на изображението, попаднали в кръга на това петно от светлина, стават видими.
Ефектът ми се стори интересен, допадна ми и реших да го споделя. Разбирам, че ефектът е доста специфичен и не може да се използва навсякъде. Но може би на някой от вас ще е полезен.
Самият ефект се създава с помощта на радиален градиент и jQuery за преместване на обекта.
Демо Код
Това, което трябва да се редактира, е маркирано в синьо – адресът на вашето изображение. Ето и няколко адреса на изображения, за да не губите време да търсите подходящи.
Източник - atuin.ru
Ефектът наподобява светещо фенерче, чиито сноп светлина попада върху изображението. Върху тъмно изображение на мястото на курсора се появява ярък кръг, като петно от светлина от фенерче. Петното се движи според движението на курсора. И всички елементи на изображението, попаднали в кръга на това петно от светлина, стават видими.
Ефектът ми се стори интересен, допадна ми и реших да го споделя. Разбирам, че ефектът е доста специфичен и не може да се използва навсякъде. Но може би на някой от вас ще е полезен.
Самият ефект се създава с помощта на радиален градиент и jQuery за преместване на обекта.
<div class="spotlight-wrap">
<br />
<div class="spotlight">
</div>
</div>
<style>.spotlight-wrap {
background: url(адрес на изображението) no-repeat center center;
background-size: cover;
height: 500px;
cursor: none;
position: relative;
}
.spotlight-wrap a {
position: absolute;
z-index: 1;
bottom: 30px;
right: 40px;
font-family: "Roboto", Arial, sans-serif;
font-size: 26px;
line-height: 34px;
color: #AAA;
transition: color 0.5s;
text-shadow: 0 0 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5);
}
.spotlight-wrap a:hover {
color: #FFF;
}
.spotlight-wrap .spotlight {
position: absolute;
height: 500px;
width: 100%;
background-image: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
}</style>
<script>
$(window).mousemove(function(e){
let w = $('.spotlight').innerWidth(),
h = $('.spotlight').innerHeight(),
t = e.pageY - $('.spotlight').offset().top,
l = e.pageX - $('.spotlight').offset().left;
$('.spotlight').css('background-image', 'radial-gradient(circle at '+ (l / w * 100) +'% '+ (t / h * 100) +'%, transparent 80px, rgba(0, 0, 0, 0.8) 120px)');
}); </script>
<div class="spotlight">
</div>
</div>
<style>.spotlight-wrap {
background: url(адрес на изображението) no-repeat center center;
background-size: cover;
height: 500px;
cursor: none;
position: relative;
}
.spotlight-wrap a {
position: absolute;
z-index: 1;
bottom: 30px;
right: 40px;
font-family: "Roboto", Arial, sans-serif;
font-size: 26px;
line-height: 34px;
color: #AAA;
transition: color 0.5s;
text-shadow: 0 0 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5);
}
.spotlight-wrap a:hover {
color: #FFF;
}
.spotlight-wrap .spotlight {
position: absolute;
height: 500px;
width: 100%;
background-image: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
}</style>
<script>
$(window).mousemove(function(e){
let w = $('.spotlight').innerWidth(),
h = $('.spotlight').innerHeight(),
t = e.pageY - $('.spotlight').offset().top,
l = e.pageX - $('.spotlight').offset().left;
$('.spotlight').css('background-image', 'radial-gradient(circle at '+ (l / w * 100) +'% '+ (t / h * 100) +'%, transparent 80px, rgba(0, 0, 0, 0.8) 120px)');
}); </script>
Това, което трябва да се редактира, е маркирано в синьо – адресът на вашето изображение. Ето и няколко адреса на изображения, за да не губите време да търсите подходящи.
https://secure.meetupstatic.com/photos/event/8/e/5/7/highres_469476439.jpeg
https://fast.gameguru.ru/f/screens/3/12/10/53/medium.jpg
https://www.wallpaperup.com/uploads/wallpapers/2012/12/07/23803/3bfdc8270b1739ff0f01ae7e59377897-1000.jpg
https://c.wallhere.com/photos/c7/f7/2000x1294_px_action_adventure_dragon_Dragons_dungeons_fantasy_Forgotten-1569879.jpg!d
Източник - atuin.ru
За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!