Пример на JS:
HTML:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="poster-container"> <div class="poster"> <img class="scene-logo" src="scene-logo.webp" alt="logo"> <img class="scene-cloud-1a" src="scene-cloud-1.webp" alt="cloud"> <img class="scene-cloud-1b" src="scene-cloud-1.webp" alt="cloud"> <img class="scene-cloud-2" src="scene-cloud-2.webp" alt="cloud"> <img class="scene-main" src="scene-main.webp" alt="main"> <img class="scene-autor" src="scene-autor.webp" alt="autor"> </div> </div> |
Изображения:
scene-logo.webp,
scene-cloud-1.webp,
scene-cloud-2.webp,
scene-main.webp,
scene-autor.webp
Картинки из открытых источников
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 |
.poster-container { display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 1500px; margin: 20px 0; } .poster { aspect-ratio: 16 / 9; background: center / cover no-repeat url('scene-bg.webp'); width: 90%; position: relative; transform-style: preserve-3d; border-radius: 40px; transition: 0.3s ease-out; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.1); } .scene-logo { position: absolute; top: 0; left: 32%; width: 36%; height: auto; transform: translateZ(6vw); filter: drop-shadow(0 0 40px rgba(0,0,0,0.4)); } .scene-cloud-1a { position: absolute; top: 5%; left: 5%; width: 10%; transform: translateZ(2vw); filter: drop-shadow(0 0 20px rgba(0,0,0,0.3)); } .scene-cloud-1b { position: absolute; top: 8%; right: 6%; width: 18%; transform: translateZ(2vw); filter: drop-shadow(0 0 20px rgba(0,0,0,0.3)); } .scene-cloud-2 { position: absolute; top: 10%; left: 10%; width: 16%; transform: translateZ(4vw); filter: drop-shadow(0 0 20px rgba(0,0,0,0.3)); } .scene-main { position: absolute; bottom: 0; left: 15%; width: 70%; height: auto; transform: translateZ(8vw); filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3)) brightness(110%); } .scene-autor { position: absolute; bottom: 5%; left: 5%; width: 20%; height: auto; transform: translateZ(2vw); filter: drop-shadow(0 0 40px rgba(0,0,0,0.6)); } @keyframes move { 0% { transform: rotateY(-10deg) rotateX(-5deg); } 25% { transform: rotateY(10deg) rotateX(-5deg); } 50% { transform: rotateY(10deg) rotateX(5deg); } 75% { transform: rotateY(-10deg) rotateX(5deg); } 100% { transform: rotateY(-10deg) rotateX(-5deg); } } |
Фон: scene-bg.webp
JS:
|
1 2 3 4 5 6 7 8 |
let poster = document.querySelectorAll('.poster'); for (let i = 0; i < poster.length; i++){ window.addEventListener('mousemove', function(e) { let x = e.clientX / window.innerWidth - 0.5; let y = e.clientY / window.innerHeight - 0.5; poster[i].style.transform = 'rotateX(' + y * 20 + 'deg) rotateY(' + x * 10 + 'deg)'; }); } |
Пример на CSS:
HTML точно такой же, JS соотв. не нужен, а в CSS добавляем анимацию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@keyframes move { 0% { transform: rotateY(-10deg) rotateX(-5deg); } 25% { transform: rotateY(10deg) rotateX(-5deg); } 50% { transform: rotateY(10deg) rotateX(5deg); } 75% { transform: rotateY(-10deg) rotateX(5deg); } 100% { transform: rotateY(-10deg) rotateX(-5deg); } } |
И добавляем стиль animation: move 10s 0s infinite; для класса .poster
Добавить комментарий: