Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
「reflections」
<!-- #CodePenChallenge: Reflections -->
<div class="scene">
<div id="plant" class="item"></div>
<div id="mirror">
<div id="mirror-content"></div>
</div>
<div id="plant-2" class="item"></div>
<div id="books" class="item">
<div id="apple" class="item"></div>
</div>
<div id="plant-3" class="item"></div>
<div id="clock" class="item"></div>
</div>
const images = [
"https://data.whicdn.com/images/251238216/original.gif",
"https://i.pinimg.com/originals/3d/22/45/3d224511a5e13317e46e37bee1d249dd.gif",
"https://i.pinimg.com/originals/b0/10/e9/b010e954f94acbd034917b2d6931bd79.gif",
"https://64.media.tumblr.com/5f4c0252b15dda55028536c5a8923c7d/b691a90722d7bbb5-c8/s500x750/34aac55dfd7302e41fec400ba9636edeadb1890a.gif",
"https://64.media.tumblr.com/746e848c8b0cf90bc7938599421e6b4e/tumblr_pbhfk0rEth1txe8seo1_500.gif",
"https://media2.giphy.com/media/Wm9XlKG2xIMiVcH4CP/giphy.gif"
];
$(document).ready(function () {
let current = 0;
$("#mirror-content").on("click", function () {
$(this).css({
"background-image": `url(${images[++current % images.length]})`
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background: #bd979f;
}
.scene {
width: 100%;
position: relative;
height: 86%;
background: #daacae;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
perspective: 500px;
}
.item {
position: absolute;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
pointer-events: none;
}
#plant {
background-image: url(https://ouch-cdn2.icons8.com/CZaKIJ63jjlgvDcdjcjUnlfpffRScIiXzi4HMrpLAsM/rs:fit:728:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNjM2/L2RkMzRmMzVhLWVk/YmMtNDRlZi1hOGNm/LTZlZjJlMTBlMzU2/My5wbmc.png);
width: 500px;
height: 620px;
bottom: -26px;
margin-right: 400px;
}
#plant-2 {
background-image: url(https://ouch-cdn2.icons8.com/E47kcuNp_3-4IrDybcMwr6zMELcbhBQLKzImj-ot8E4/rs:fit:855:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvMzE5/LzljNjEwNjJhLTk4/YmMtNDViMS1iZGVm/LTMwNzVjMTMxYjQ1/OC5wbmc.png);
width: 300px;
height: 320px;
bottom: -50px;
margin-right: 300px;
}
#plant-3 {
background-image: url(https://ouch-cdn2.icons8.com/oo4nsgAN74wL_FDHCUIwOdB3rPN6SGavRjxiz-1ds4s/rs:fit:1201:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvMTk0/LzVlMGQ1NjhlLWNh/NTEtNGJlNC1iNWEz/LTQyYTcwNDlmZGMy/My5wbmc.png);
width: 160px;
height: 125px;
bottom: -50px;
margin-left: 380px;
}
#books {
background-image: url(https://ouch-cdn2.icons8.com/AUAdQ5eK8APXniP0hwVusHWtZRMk9FA2Jm9FSza1StY/rs:fit:850:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNy9j/NTcxMWIzNC1mMTYy/LTQ3MTAtOGExYi1l/YzY1M2FlN2IwYWYu/cG5n.png);
width: 200px;
height: 220px;
bottom: -40px;
margin-left: 620px;
}
#apple {
background-image: url(https://ouch-cdn2.icons8.com/-O2SifADepTOg7bXJ5whR6wB0iMfq5y7vrIaJdmKp20/rs:fit:851:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvODYy/L2M3MjBkM2Q3LWMw/NTgtNDJkOC04ZGEw/LTc2MTM1N2YwMmNh/OC5wbmc.png);
width: 64px;
height: 70px;
top: -64px;
left: 30px;
}
#clock {
background-image: url(https://ouch-cdn2.icons8.com/ggxsAQVGAa4GMIlNl6vMuk0ANcEK07E5woeRpplKofI/rs:fit:945:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvMzI0/L2RmMDQzMzc4LTcy/NTUtNDA5My04ZDQy/LTgxOTJjNmE2ZmQx/ZC5wbmc.png);
width: 170px;
height: 170px;
background-size: 100% auto;
background-position: left top;
bottom: 520px;
margin-left: 440px;
}
#mirror {
width: 280px;
height: 580px;
position: relative;
box-shadow: 16px 2px 10px rgba(0, 0, 0, 0.4);
perspective: 500px;
border-top-left-radius: 300px;
border-top-right-radius: 300px;
transform-origin: top center;
transform: rotateX(3deg);
cursor: pointer;
}
#mirror-content {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-image: url(https://data.whicdn.com/images/251238216/original.gif);
background-position: center center;
background-size: auto 100%;
background-repeat: no-repeat;
box-shadow: inset 6px 3px 10px rgba(0, 0, 0, 0.4);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border: 6px solid #e7e4df;
z-index: 0;
display: flex;
justify-content: center;
}
#mirror-content:before {
position: absolute;
content: "「 click me 」";
font-family: sans-serif;
text-transform: uppercase;
color: #e7e4df;
font-weight: bold;
letter-spacing: 4px;
font-size: 10px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
text-align: center;
bottom: 0;
z-index: 100;
opacity: 0.6;
transition: all 0.5s ease;
padding: 18px 0;
}
#mirror:hover #mirror-content:before {
opacity: 0.4;
transform: translateY(4px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment