Пример на JS:
HTML:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="poster-container"> <div class="poster"> <img class="sm-logo" src="sm-logo.png" alt="logo"> <img class="sm-cloud-1a" src="sm-cloud-1.png" alt="cloud"> <img class="sm-cloud-1b" src="sm-cloud-1.png" alt="cloud"> <img class="sm-cloud-2" src="sm-cloud-2.png" alt="cloud"> <img class="sm-sm" src="sm-sm.png" alt="smeshariki"> <img class="sm-autor" src="sm-autor.png" alt="autor"> </div> </div> |
Изображения:
sm-logo.png,
sm-cloud-1.png,
sm-cloud-2.png,
sm-sm.png,
sm-autor.png
Картинки из открытых источников
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 |
.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('sm-bg.png'); 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); } .sm-logo { position: absolute; top: 10%; left: 32%; width: 36%; height: auto; transform: translateZ(8vw); filter: drop-shadow(0 0 40px rgba(0,0,0,0.4)); } .sm-cloud-1a { position: absolute; top: 10%; left: 5%; width: 10%; transform: translateZ(2vw); filter: drop-shadow(0 0 20px rgba(0,0,0,0.3)); } .sm-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)); } .sm-cloud-2 { position: absolute; top: 15%; left: 10%; width: 16%; transform: translateZ(4vw); filter: drop-shadow(0 0 20px rgba(0,0,0,0.3)); } .sm-sm { position: absolute; bottom: 3%; left: 15%; width: 70%; height: auto; transform: translateZ(6vw); filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3)) brightness(110%); } .sm-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)); } |
Фон:
sm-bg.png
Картинка из открытых источников
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
Добавить комментарий: