-3

I am an ophthalmologist and I am created my personal website using GoDaddy, I used to fiddle around with html, css, js back in the day but it has been about 5 years since then.

Big Picture: When users visit my page, I want it to be blurry (like you needed glasses), then I want two arms to appear from the sides of the display and "put on" a pair of glasses. I want it to look as close as possible to if you were actually putting on a pair of glasses.

Then when the "glasses" are on, the blurriness fades and becomes crystal clear.

I have the html and css files made, but without any of the above animations.

Do you know if anything like this that has been done before? Could you give me a head start or point me towards some resources to help? Thank you so much!

user3481670
  • 1
  • check this out http://stackoverflow.com/questions/371209/full-page-blur-in-css – Jah Nov 13 '15 at 22:45
  • 1
    I kinda wanna see this when it's done.. – Mike Christensen Nov 13 '15 at 22:47
  • You can use CSS-animations for the animations http://www.w3schools.com/css/css3_animations.asp and https://developer.mozilla.org/de/docs/Web/CSS/filter for the blur effect, or you add a full screen video to your page ;) – jan Nov 13 '15 at 22:54
  • I like the idea of the full screen video, Is there a way I could have it take up the entire webpage and then seamlessly transition to the site when the video is done? – user3481670 Nov 13 '15 at 23:03
  • `html.locked #page { opacity: 0.5; -webkit-filter: blur(10px);}` adjust and animate as needed. – dandavis Nov 13 '15 at 23:05

1 Answers1

0

Here is how you do the blur/unblur. Keep in mind this will overload a mobile CPU, it is not fit for mobile use.

@keyframes filter-animation {
0% {
-webkit-filter: blur(10px);filter: blur(10px);
}

33% {
-webkit-filter: blur(550px);filter: blur(550px);
}

55% {
-webkit-filter: blur(10px);filter: blur(10px);
}
}

http://codepen.io/damianocel/pen/MaZPBz

Animation is set to 15 seconds, give it time, I did that to make the effect look smoother. Now for the Glasses and hands, I could do that with Css as well, depends how trivial its allowed to look:-)

damiano celent
  • 721
  • 6
  • 12