var gitLogo = document.getElementById('github');
var linkLogo = document.getElementById('linkedin');
var codeLogo = document.getElementById('codepen');
var twLogo = document.getElementById('twitter');
const logoClick =
logo.addEventListener('click', () => {
var tl =
anime.timeline({
targets: '.logo-default',
width: '5rem',
height: '5rem',
duration: 300
});
tl
.add({
targets: gitLogo,
height: 40,
translateX: -85
})
.add({
targets: linkLogo,
height: 30,
translateX: -80,
translateY: 50
})
.add({
targets: codeLogo,
height: 25,
translateX: -50,
translateY: 70
})
.add({
targets: twLogo,
height: 23,
translateX: -12,
translateY: 75
});
});
const logoClickMediaQ =
logo.addEventListener('click', () => {
var tl =
anime.timeline({
targets: '.logo-default',
width: '5rem',
height: '5rem',
duration: 300
});
tl
.add({
targets: gitLogo,
height: 40,
translateX: -85
})
.add({
targets: linkLogo,
height: 30,
translateX: -80,
translateY: 50
})
.add({
targets: codeLogo,
height: 25,
translateX: -50,
translateY: 70
})
.add({
targets: twLogo,
height: 23,
translateX: -12,
translateY: 75
});
});
//logo click for small screen
const mediaQ = window.matchMedia("(min-width: 600px)");
if (mediaQ.matches) {
logoClickMediaQ;
} else {
logoClick;
};
body {
display:flex;
flex-direction: column;
}
.logo-default{
height: 100px;
width: auto;
padding-top: 20px;
}
#info-corner {
margin-left: auto;
}
.icon {
height: 10px;
width: auto;
position: absolute;
top: 40px;
right: -4px;
}
@media only screen and (max-width: 600px) {
#info-corner {
margin-top: 70rem;
width: 100%;
padding-left: 35rem;
padding-bottom: 10rem;
}
#logo {
width: 30rem;
height: auto;
position: relative;
}
#contact-tab {
position: absolute;
width: 20rem;
height: 10rem;
}
.icon {
width: 8rem;
height: auto;
position: absolute;
}
}
<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
<body>
<div id="info-corner">
<img id="logo" class="logo-default logo-small-screen" src="https://i.pinimg.com/originals/c6/52/32/c65232d66c23b9a1924665956ede7347.jpg">
<div id="contact-tab">
<a href="#"><img id="github" class="icon" src="https://www.flaticon.com/svg/static/icons/svg/733/733609.svg" alt="github"></a>
<a href="#"><img img id="linkedin" class="icon" src="https://www.flaticon.com/svg/static/icons/svg/49/49408.svg" alt="linkedin icon"></a>
<a href="#"><img img id="codepen" class="icon" src="https://www.flaticon.com/svg/static/icons/svg/2111/2111341.svg" alt="codepen icon"></a>
<a href="#"><img img id="twitter" class="icon" src="https://www.flaticon.com/svg/static/icons/svg/733/733635.svg" alt="twitter icon"></a>
</div>
</div>
</body>
