By: Prem Tiwari | Last Updated: | In: Freebies, Web Technologies
CSS was developed around 1995, but after 2010 CSS2 was fully supported by major web browsers and after several time CSS3 developed. Now using CSS3 you can create awesome web desgin. Today i am going to share the How to create Parallax Scrolling design using CSS. Now days parallax design is treds in website design and development. Mostly clients are asking for parallax design based website. so bello is the excellent example to design parallax design without using jquery and javascripts.
Create style.css page and copy paste bellow CSS code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | @import url(https://fonts.googleapis.com/css?family=Nunito); html { height: 100%; overflow: hidden; } body { margin:0; padding:0; perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; font-family: Nunito; } h1 { font-size: 250% } p { font-size: 140%; line-height: 150%; color: #333; } .slide { position: relative; padding: 25vh 10%; min-height: 100vh; width: 100vw; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit; } img { position: absolute; top: 50%; left: 35%; width: 320px; height: 240px; transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg); padding: 10px; border-radius: 5px; background: rgba(240,230,220, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7); } img:last-of-type { transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg); } .slide:before { content: ""; position: absolute; top: 0; bottom: 0; left:0; right:0; } .title { width: 50%; padding: 5%; border-radius: 5px; background: rgba(240,230,220, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7); } .slide:nth-child(2n) .title { margin-left: 0; margin-right: auto; } .slide:nth-child(2n+1) .title { margin-left: auto; margin-right: 0; } .slide, .slide:before { background: 50% 50% / cover; } .header { text-align: center; font-size: 175%; color: #fff; text-shadow: 0 2px 2px #000; } #title { background-image: url("http://lorempixel.com/640/480/abstract/6/"); background-attachment: fixed; } #slide1:before { background-image: url("http://lorempixel.com/640/480/abstract/4/"); transform: translateZ(-1px) scale(2); z-index:-1; } #slide2 { background-image: url("http://lorempixel.com/640/480/abstract/3/"); background-attachment: fixed; } #slide3:before { background-image: url("http://lorempixel.com/640/480/abstract/5/"); transform: translateZ(-1px) scale(2); z-index:-1; } #slide4 { background: #222; } |
After creating the style.css page, include that css page index.html page above head closed.
1 | <link rel="stylesheet" type="text/css" media="all" href="style.css" /> |
Create a index.html page and copy paste bellow code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div id="title" class="slide header"> <h1>Pure CSS Parallax</h1> </div> <div id="slide1" class="slide"> <div class="title"> <h1>Slide 1</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide2" class="slide"> <div class="title"> <h1>Slide 2</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> <img src="http://lorempixel.com/640/480/abstract/6/"> <img src="http://lorempixel.com/640/480/abstract/4/"> </div> <div id="slide3" class="slide"> <div class="title"> <h1>Slide 3</h1> <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p> </div> </div> <div id="slide4" class="slide header"> <h1>The End</h1> </div> |
Now open the index.html page in your default web browser and checked the parallax design you have designed. Do like and share with your friends if you like.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
