Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aliquid sint provident rem distinctio quasi ipsa dicta aliquam modi, ipsam odio quod placeat dolores. Doloribus odit totam obcaecati eos adipisci. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id enim reprehenderit ipsa rerum in, distinctio nihil similique obcaecati quae quo quos mollitia saepe iusto repudiandae nesciunt sit expedita odit sint! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis, corrupti sed sunt assumenda fugiat officia libero repellat debitis eos quam minus, delectus commodi laudantium neque harum sit impedit nemo autem?
This is file HTML :
<div id="parallax"> <div class="layer" data-depth="0.6"> <div class="some-space"> <h1>PARALLAX</h1> </div> </div> <div class="layer" data-depth="0.4"> <div id="particles-js"></div> </div> <div class="layer" data-depth="0.3"> <div class="some-more-space"> <a href="#">Hit me.</a> </div> </div> </div>
You need to conect with cdn library :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js'></script> <script src='https://matthew.wagerfield.com/parallax/deploy/jquery.parallax.js'></script>
This is file CSS :
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100); body { font-family: "Lato"; background: #252729; overflow: hidden; height: 100%; width: 100%; -webkit-font-smoothing: antialiased; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #particles-js, #parallax, .layer, .some-space, .some-more-space { height: 100%; position: absolute; width: 100%; } #particles-js { opacity: 0.6; } h1 { color: white; font-size: 5em; font-weight: 100; letter-spacing: 0.2em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } a { color: white; border: 1px solid white; display: table; position: absolute; top: 60%; left: 50%; letter-spacing: 0.05em; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); text-decoration: none; -webkit-transition: all 200ms ease; transition: all 200ms ease; padding: 10px 15px; } a:hover { background: white; color: black; } .some-space { animation: rotate 18s 0.5s infinite linear reverse; } .some-more-space { -webkit-animation: rotate 15s 0.1s infinite linear; animation: rotate 15s 0.1s infinite linear; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg); } } @keyframes rotate { 0% { -webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg); transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg); transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg); } }
This is preview :
See the Pen Particle Parallax Mousemove by Adnan Soebronto Leo (@adnan-soebronto-leo) on CodePen.
" The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. "
- Thomas Anderson