Подсветка мерцающей панели с текстом при помощи курсора на CSS3, HTML5 и jQuery
Безумно интересный эксперимент на CSS3 и jQuery - на этот раз подсветка текста и его блестящего фона
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
:root { --glitter: url("/img/silver-glitter-background.png"); --ratio-x: .5; --ratio-y: .75; --from-center: 2; } main { --bgoffsetx: calc( 2.9px * var(--ratio-x)); --bgoffsety: calc( 4.3px * var(--ratio-y)); --pointerx: calc( 100% * var(--ratio-x)); --pointery: calc( 100% * var(--ratio-y)); --h: calc( 360deg * var( --from-center ) ); --s: calc( 90% * var( --from-center ) ); background: linear-gradient(135deg, hsl(28deg, var(--s), 15%), hsl(198deg, var(--s), 15%)), var(--glitter), var(--glitter), radial-gradient(farthest-corner circle at var(--pointerx) var(--pointery), white 20px, rgba(237, 222, 222, 0.38) 150px, black 65%); background-position: calc( 70% + var(--bgoffsetx) ) calc( 70% + var(--bgoffsety) ), calc( 30% - var(--bgoffsetx) ) calc( 30% - var(--bgoffsety) ); background-size: cover, 560px auto, 400px auto, cover; background-blend-mode: overlay, multiply, color, overlay; transition: opacity 4s ease-out; } main.loading { opacity: 0; } main { image-rendering: optimizeQuality; transform: translate3d(0, 0, 0.01px); } main * { pointer-events: none; text-anchor: middle; alignment-baseline: middle; } main svg { mix-blend-mode: overlay; fill: #d7b4a7; opacity: calc( 1.3 * var(--from-center) ); filter: drop-shadow(0 0 30px black) drop-shadow(0 0 10px black) brightness(1.3); } body { color: black; background: black; font-family: "Cinzel", sans-serif; } html, body, main { box-sizing: border-box; margin: 0; padding: 0; height: 100%; width: 100%; display: grid; place-items: center; grid-row: 1; } img { position: absolute; width: 1px; height: 1px; opacity: 0; } .social-icon { stroke-width: 1.25; stroke: cyan; fill: none; stroke-linecap: round; stroke-linejoin: round; position: absolute; bottom: 10px; right: 10px; width: 24px; height: 24px; z-index: 10; -webkit-animation: iconsLoad 10s ease both 1s; animation: iconsLoad 10s ease both 1s; } .social-icon.twitter { right: 40px; -webkit-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes iconsLoad { from { opacity: 0; } to { opacity: 1; } } @keyframes iconsLoad { from { opacity: 0; } to { opacity: 1; } } |
2#: Следующий код поместите после открывающего тега <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<main id=app class=loading> <svg viewBox="-50 0 100 20"> <text x="0" y="15">Illuminate</text> </svg> </main> <img src="/img/silver-glitter-background.png" loading=lazy> <script type="text/javascript"> // 👆 mouse-move following code $("main").on("pointermove", (e) => { interacted = true; const { x, y } = e.originalEvent; const BOX = e.target.getBoundingClientRect(); const POINT = { x: x - BOX.x, y: y - BOX.y }; const RATIO = { x: POINT.x / BOX.width, y: POINT.y / BOX.height }; const CENTER = fromCenter( RATIO ); // set some css variables referenced in css e.target.style.setProperty( "--ratio-x", RATIO.x ); e.target.style.setProperty( "--ratio-y", RATIO.y ); e.target.style.setProperty( "--from-center", CENTER ); }); // maths 🤷♀️ function fromCenter({ x, y }) { return Math.min(Math.max( 0, Math.sqrt( (y - .5) * (y - .5) + (x - .5) * (x - .5) ) / .5 ), 1 ); } let interacted = false; $("img").on("load", () => { // ⏰ lazy load triggers opacity $("main").removeClass("loading"); // ✨ little intro demo animation $({foo:0}).animate({foo:(Math.PI*3)}, { duration: 8000, easing: "swing", step: function(val) { if ( !interacted ) { document.querySelector("#app").style.setProperty( "--ratio-x", (Math.cos(val) + 1.5) / 3 ); document.querySelector("#app").style.setProperty( "--ratio-y", (Math.sin(val) + 2) / 4 ); } } }); }); </script> |
Осталось лишь залить картинку из прикреплённого архива в папку img и скрипт в папку img
