vertigo
--set number of circles for the effect
A Pen by Dimitra Vasilopoulou on CodePen.
<div class="profile_container scream"> | |
<div class="background"></div> | |
<div class="foreground"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/261873/surprised_mimi_500x500_saturated.png" alt="" class="profile"> | |
</div> | |
</div> | |
<div class="profile_container la"> | |
<div class="background"></div> | |
<div class="foreground"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/261873/serious_mimi_500x500.png" alt="" class="profile"> | |
</div> | |
</div> |
vertigo
--set number of circles for the effect
A Pen by Dimitra Vasilopoulou on CodePen.
function ProfileVertigo(container, bgSteps){ | |
var bg = container.querySelector(".background"); | |
var bgWidth = bg.offsetWidth; | |
for (var c=0; c < bgSteps; c++) | |
{ | |
var bgcircle = document.createElement('div'); | |
bgcircle.className = "bgCircle"; | |
var percent = ((bgSteps-c) * (1/bgSteps)); | |
bgcircle.style.width = bgcircle.style.height = (bgWidth * percent) + "px"; | |
bgcircle.style.backgroundSize = bgWidth + "px " + bgWidth + "px"; | |
bg.appendChild(bgcircle); | |
} | |
container.addEventListener("mouseover", function(e){ | |
var circlesAll = e.currentTarget.querySelectorAll(".bgCircle"); | |
var bgWidth = e.currentTarget.offsetWidth; | |
var percent; | |
for (var bgC = 0, leng= circlesAll.length; bgC < leng; bgC++){ | |
percent = ((bgSteps-bgC) * (1/bgSteps)); | |
TweenMax.to(circlesAll[bgC], .3, { backgroundSize:""+ (bgWidth * (percent)) +"px "+(bgWidth * (percent))+"px", ease:Power3.easeOut, rotation:0*bgC+"deg"}); | |
} | |
var img = e.currentTarget.querySelector(".profile"); | |
TweenMax.to(img, 0.3, {width:"93%", ease:Power3.easeOut}); | |
}) | |
container.addEventListener("mouseleave", function(e){ | |
var circlesAll = e.currentTarget.querySelectorAll(".bgCircle"); | |
var bgWidth = e.currentTarget.offsetWidth; | |
for (var bgC = circlesAll.length-1; bgC >= 0; bgC--){ | |
TweenMax.to(circlesAll[bgC], .3, {backgroundSize:bgWidth + "px " + bgWidth + "px", ease:Power3.easeIn, rotation:"0deg"}); | |
} | |
var img = e.currentTarget.querySelector(".profile"); | |
TweenMax.to(img, 0.3, {width:"85%" , ease:Power3.easeIn}); | |
}) | |
} | |
ProfileVertigo(document.querySelector(".scream"), 8); | |
ProfileVertigo(document.querySelector(".la"), 6); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> |
body{background-color:#1d2023;text-align:center;} | |
.profile_container{ | |
margin:50px; | |
display: inline-block; | |
border-radius:50%; | |
width:500px; | |
height:500px; | |
position:relative; | |
overflow:hidden; | |
} | |
.bgCircle{ | |
background: url("https://unsplash.it/500/500?image=545") no-repeat; | |
position: absolute; | |
border-radius:50%; | |
transform:translate(-50%, -50%); | |
top:50%; | |
left:50%; | |
background-position:center; | |
} | |
.la .bgCircle{ | |
background-image: url("https://unsplash.it/500/500?image=645"); | |
} | |
.foreground{ | |
position:absolute; | |
width:100%; | |
height:100%; | |
} | |
.foreground img{ | |
position:absolute; | |
width:85%; | |
height:auto; | |
bottom:0px; | |
left:50%; | |
transform:translateX(-50%); | |
} |