This time we share a very cool CSS3 animation. It is a 3D portrait of a parallax character, and the character's head and eyes can follow the mouse to move. If you are on a mobile device, you can also move the screen with your fingers to achieve this effect. What's more powerful is that this portrait of the character is a sketch when it is loaded, but it will gradually become an oil painting effect. You can study how this is achieved.
Advertisement
<main> <section> <div class="instructions"> <div class="move-mouse"> <img src="mouse-icon.svg" class="mouse-icon" alt="Mouse Icon" /> <span>Move Mouse</span> </div> <div class="move-device"> <img src="mobile-icon.svg" class="mobile-icon" alt="Mobile Icon" /> <span>Tilt Device</span> </div> </div> <div class="container"> <div class="build-layers"> <div class="build-1"></div> <div class="build-2"></div> <div class="build-3"></div> <div class="build-4"></div> <div class="build-5"></div> </div> <div class="parallax-layers"> <div class="face-1"></div> <div class="face-2"></div> <div class="face-3"> <div></div> </div> <div class="face-4"></div> <div class="face-5"></div> <div class="face-6"></div> </div> <div class="splatter"></div> </div> </section> </main>
main { position: relative; overflow: hidden; height: 100%; width: 100%; min-width: 320px; min-height: 568px; } section { position: absolute; width: 100%; height: 100%; } .preloader-overlay { width: 100%; height: 100%; opacity: 0; background: #181818; position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity .25s ease-in-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } html.loading .preloader-overlay { opacity: 1; } svg.preloader-icon { width: 9vh; height: 9vh; }
var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); } },
Advertisement