Ночь в музее
При движении курсора разгорается фонарь и освещает картины в музее. При клике происходит приближение изображения.HTML
Разметка состоящая из изображений:<div class="clip">
<div class="wrap">
<img src='https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1518717758536-85ae29035b6d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1535930891776-0c2dfb7fda1a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
<img src='https://images.unsplash.com/photo-1504595403659-9088ce801e29?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
</div>SCSS
body{
display:grid;
place-items:center;
height:100vh;
width:100vw;
perspective:100vw;
position:relative;
overflow:hidden;
cursor: none;
background:linear-gradient(to bottom, #666 50%, transparent 50%);
&.ready:hover{
&:after{
animation:flicker 0.1s ease-in-out 4 alternate forwards, flicker2 0.65s ease-in-out 1 forwards;
animation-delay:0.3s, 1s;
transition:0.2s ease-in-out;
color:transparent;
@keyframes flicker{
from{
opacity:1;
}
to{
opacity:0.05;
}
}
@keyframes flicker2{
from{
opacity:1;
}
to{
opacity:0;
}
}
}
}
&:before, &:after{
content:'';
position:absolute;
pointer-events:none;
z-index:999;
width:100%;
height:100%;
top:0;
left:0;
background:linear-gradient(to right, #000, transparent 10%, transparent 90%, #000);
transform-style:preserve-3d;
transform: translateZ(5vw);
}
&:after{
content:'hover me';
font-family:"Playfair Display";
color:#666;
font-size:2.5vw;
display:grid;
place-items:center;
background:#000;
transition:1s ease-in-out;
transition-delay:0.4s;
opacity:1;
}
&.zoom{
.clip{
transform:translateZ(50vw);
transition:transform 1s ease-in-out;
.wrap{
.pic{
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
transform:rotate(calc(#{((4 - $i) * 36)}deg - var(--zoom)));
}
}
}
}
}
}
&.active{
animation:cursor 0s linear 1 forwards;
animation-delay:1s;
@keyframes cursor{
to{
cursor:pointer;
}
}
.clip{
&:before{
transform:translateZ(60vw) rotate(0) skewY(var(--rotate2)) translateY(1vh) translateX(-1.25vw);
transition:transform 0.2s ease-in-out;
}
}
&.zoom{
.clip{
&:before{
opacity:0;
transition:opacity 0.5s ease-in-out;
}
}
}
}
*{
box-sizing:border-box;
transform-style:preserve-3d;
backface-visibility:hidden;
&:before, &:after{
transform-style:preserve-3d;
}
}
.clip, .wrap{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
.clip{
transform-style:preserve-3d;
pointer-events:none;
transition:0.1s ease-in-out;
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
background:#000;
z-index:9;
top:0;
left:0;
mask:var(--clip);
transform:translateZ(40vw) rotate(calc(var(--rotate2)/4)) skewY(var(--rotate2)) translateX(var(--x)) translateY(var(--y));
pointer-events:none;
transform-origin:50% 100%;
transition:transform 0.1s linear;
}
*{
transform-style:preserve-3d;
}
.wrap{
display:grid;
place-items:center;
will-change:transform;
transform: translateZ(70vw) rotateX(var(--rotateY)) rotate(var(--rotateWrap));
transition:transform linear;
backface-visibility:visible;
.pic{
display:grid;
place-items:center;
position:absolute;
width:50vw;
left:calc(50% + 50vw);
transform-origin:-50vw 50%;
pointer-events:all;
backface-visibility:visible;
.panel{
display:inline-block;
position:absolute;
width:50%;
height:auto;
left:25%;
top:auto;
transform:rotate(90deg) rotateX(90deg);
pointer-events:all;
backface-visibility:visible;
&:before, &:after{
content:'';
position:absolute;
width:200%;
height:100vh;
top:50%;
left:50%;
transform:translate(-50%, -50%) rotateX(90deg);
transform-origin:50% 95%;
background:url('https://puu.sh/F2bms/5e65955562.jpg');
box-shadow:inset 0 -10vw 20vw -5vw rgba(0,0,0,0.75);
}
&:after{
background:url('dаta:image/png;base64,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') 50% 50% / 15px 15px, linear-gradient(to bottom, darken(#b0926d, 35%) 10%, transparent 45%), linear-gradient(to right, darken(#b0926d, 15%),
#b0926d, darken(#b0926d, 15%));
transform-origin:50% 5%;
transform:translate(-50%, -50%) rotateX(-90deg);
box-shadow:inset 0 -10vw 20vw -5vw rgba(0,0,0,0.25);
}
div{
content:'';
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
pointer-events:all;
backface-visibility:visible;
span {
position: absolute;
text-align:center;
font-size: 1.15vmin;
transform: translateZ(-5vmin) translateX(-50%) scaleX(-1) scale(0.75);
left: 50%;
top: calc(100% + 0.5vmin);
color: rgba(0,0,0,0.5);
text-shadow:0.075vmin -0.075vmin 0 rgba(0,0,0,0.5);
margin: 0;
padding: 1.15vmin;
filter:saturate(0.5);
background: linear-gradient(75deg, transparent 35%, rgba(255,255,255, 0.2) 47%, rgba(255,255,255,0.2) 53%, transparent 65%), linear-gradient(to bottom, rgba(148,112,0,0.5), rgba(148,112,0,0.25), rgba(148,112,0,0.5)), lighten(rgb(148,112,0), 10%);
background-size:75% 100%, 100% 100%, 100% 100%;
background-position:var(--bg) 50%, 50% 50%, 50% 50%;
font-family: 'Playfair Display';
box-shadow:inset 0 0 0 0.35vmin darken(rgb(185,164,19), 20%), inset 0 0 0 0.36vmin darken(rgb(185,164,19), 40%);
mask:radial-gradient(circle at top right, transparent 5%, #fff 5%, #fff 55%, transparent 55%) 50% 0% / 100% 55% no-repeat, radial-gradient(circle at top left, transparent 5%, #fff 5%, #fff 55%, transparent 55%) 50% 0% / 100% 55% no-repeat, radial-gradient(circle at bottom left, transparent 5%, #fff 5%, #fff 55%, transparent 55%) 50% 100% / 100% 55% no-repeat, radial-gradient(circle at bottom right, transparent 5%, #fff 5%, #fff 55%, transparent 55%) 50% 100% / 100% 55% no-repeat;
backface-visibility:visible;
}
&:before, &:after{
content:'';
pointer-events:all;
transform-style:preserve-3d;
position:absolute;
}
&:after{
width:105%;
height:110%;
left:-2.5%;
top:-5%;
transform:translateZ(-1vw);
z-index:9;
background:url('https://puu.sh/F2co3/701a762f29.png') 50% 50% / 100% 100%;
}
&:before{
width:200%;
height:100vh;
background:url('dаta:image/png;base64,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') 50% 50% / 15px 15px, linear-gradient(to bottom, rgba(77,77,0,0.75), rgba(77,77,0,0.75)), url('https://puu.sh/F2aVy/2392491d18.jpg');
box-shadow: inset 0 0 40vw 10vw rgba(0,0,0,0.75), inset 0 15.01vh 0 #fff, inset 0 -5vh 0 0 #fff;
filter:brightness(0.75);
top:50%;
left:50%;
transform:translateZ(1px) translate(-50%, -50%);
z-index:-1;
transform-style:preserve-3d;
pointer-events:none;
}
}
}
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
transform:rotate(#{(4 - $i) * 36}deg);
transition:transform 1s ease-in-out;
&:nth-of-type(odd){
div{
div{
top:5vh;
&:before{
box-shadow:inset 0 0 40vw 10vw rgba(0,0,0,0.75), inset 0 -15vh 0 0 #fff, inset 0 5vh 0 #fff;
}
&:after{
height:calc(110% + 5vh);
top:calc(-5% - 7.5vh);
background:url('https://puu.sh/F2g8b/b6b70ca540.png') 50% 50% / 100% 100%;
}
}
}
}
&:nth-of-type(3n){
div{
div{
&:after{
height:calc(110% + 2.5vh);
top:calc(-5% - 5vh);
filter:brightness(0.65);
width:100%;
left:0%;
background:url('https://puu.sh/F2geb/e4224d1fa1.png') 50% 50% / 100% 100%;
}
}
}
}
&:nth-of-type(even){
div{
div{
top:-5vh;
span{
top: calc(100% + 0.5vmin + 10vh);
}
&:after{
height:calc(110% + 5vh);
top:calc(-5% + 2.5vh);
}
}
}
}
}
}
img{
width:70%;
height:auto;
display:block;
margin:0px auto;
z-index:2;
position:relative;
max-height:60vh;
filter:sepia(0.5);
pointer-events:all;
backface-visibility:visible;
}
}
}
}
}JS
Библиотека jQuery<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>$(document).ready(function(){
$('img').wrap('<div class="pic"><div class="panel">');
$('.panel').append('<div></div>');
leftClip = 0;
topClip = 0;
topPos = 0;
leftPos = 0;
rotate = 0;
width = $('body').width();
height = $('body').height();
pics = $('body').find('.panel div');
names = ["Bark Twain", "Chewbarka", "Doc McDoggins", "Droolius Caesar", "Franz Fur-dinand", "Fyodor Dogstoevsky & <br>Leo Chew-toy", "Hairy Paw-ter", "Sarah Jessica Barker", "Kareem Abdul Ja-Bark", "Rick & Gary"];
for (let j = 0; j < 11; j++) {
$(pics[j]).attr('data-num', (j + 1)).append('<span>' + names[j] + '</span>');
}
$('.panel div').hover(function() {
$('body').toggleClass('active');
var picNum = $(this).attr('data-num');
if (picNum > 6){
var num = (rotate - (picNum * 30)) + 6;
}else{
var num = (rotate - (picNum * 30)) + 18;
}
$(".clip").get(0).style.setProperty( "--zoom", num + "deg");
});
$('.panel').mouseleave(function() {
$('body').removeClass('zoom').removeClass('active');
});
$('body').click(function(){
if ($('body').hasClass('active')){
$(this).toggleClass('zoom');
}
});
$(document).on('mousemove', function(e){
leftPos = e.pageX;
topPos = e.pageY;
leftRot = leftPos/(width/100);
leftClip = (leftPos/(width/30) + 37.5);
topRot = topPos/(width/50);
topShift = ((height/2) - topPos) * -0.0125;
topClip = (topPos/(height/80) + 12.5);
rotate = (leftRot * 3);
rotate2 = ((leftRot/6) * 1.8) - 15;
rotateY = ((topRot * -3.6)/5) - 80;
$(".wrap").get(0).style.setProperty( "--bg", (leftRot * 6) + "px");
$(".wrap").get(0).style.setProperty( "--rotateY", rotateY + "deg");
$(".wrap").get(0).style.setProperty( "--rotateWrap", rotate + "deg");
$(".clip").get(0).style.setProperty(
"--clip", "radial-gradient(circle at bottom, transparent, transparent 5vw, rgba(255,255,255,0.5) 5.5vw, rgba(255,255,255,0.5)) calc(" + leftClip + "vw - 100vw) calc(" + (topClip - 100) + "vh + 0.015px) / 200% 100% no-repeat, radial-gradient(circle at " + leftClip + "% " + topClip + "%, transparent, transparent 5vw, rgba(255,255,255,0.5) 5.5vw, rgba(255,255,255,0.5)), linear-gradient(85deg, rgba(255,255,255,0.5) calc(100% - 5.5vw), transparent calc(100% - 5vw)) calc(" + (leftClip - 0) + "vw - 200vw) " + topClip + "vh / 200% 200% no-repeat, linear-gradient(-85deg, rgba(255,255,255,0.5) calc(100% - 5.5vw), transparent calc(100% - 5vw)) calc(" + (leftClip + 0) + "vw + 0vw) " + topClip + "vh / 200% 200% no-repeat");
$(".clip").get(0).style.setProperty( "--rotate2", rotate2 + "deg");
$(".clip").get(0).style.setProperty( "--x", rotate2 + "vw");
$(".clip").get(0).style.setProperty( "--y", topShift + "vh");
});
setTimeout(function(){
$('body').addClass('ready')
}, 2000);
});
