Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
CSS
body { -webkit-font-smoothing: antialiased; padding: 0; margin: 0; } .container { position: relative; height: 768px; width: 1024px; } .planet-bg { position: absolute; z-index: 2; height: 768px; width: 100%; background: url(https://www.danyuschick.com/codepen/earth/BG.png) no-repeat center center; } .planet-land { width: 100%; height: 768px; background: url(https://www.danyuschick.com/codepen/earth/landMass.png) no-repeat center center; } .planet-shadow { position: absolute; top: 0; z-index: 2; width: 100%; height: 768px; background: url(https://www.danyuschick.com/codepen/earth/shadow.png) no-repeat center center; }
HTML
<div id="container" class="container"> <div class="planet-bg"> <div class="planet-land"></div> <div class="planet-shadow"></div> </div> <div id="output" class="container"> </div> <div id="controls" style="display: none;"> </div> <script src="https://www.danyuschick.com/codepen/earth/js/prefixfree.min.js"></script> <script src="https://www.danyuschick.com/codepen/earth/js/dat.gui.min.js"></script> <script src="https://www.danyuschick.com/codepen/earth/js/fss.js"></script> <script src="https://www.danyuschick.com/codepen/earth/js/example.js"></script>
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email
