Guest User

Untitled

a guest
Feb 21st, 2018
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.14 KB | None | 0 0
  1. <!-- Page Wrap -->
  2. <div class="page" id="top">
  3.  
  4. <!-- Home Section -->
  5. <section class="home-section" id="home">
  6. <div class="js-height-full">
  7. <div class="plax">
  8. <div class="parallax__layer parallax__layer__0">
  9. <img src="images/parallax/parallax0.png" />
  10. </div>
  11. <div class="parallax__layer parallax__layer__1">
  12. <img src="images/parallax/parallax1.png" />
  13. </div>
  14. <div class="parallax__layer parallax__layer__2">
  15. <img src="images/parallax/parallax2.png" />
  16. </div>
  17. <div class="parallax__layer parallax__layer__3">
  18. <img src="images/parallax/parallax3.png" />
  19. </div>
  20. <div class="parallax__cover">
  21. </div>
  22. </div>
  23. </div>
  24. </section>
  25. <!-- End Home Section -->
  26.  
  27. <!-- About Section -->
  28. <section class="page-section" id="about">
  29. <div class="container relative">
  30. <h2 class="section-title font-alt align-left mb-70 mb-sm-40">
  31. About Studio
  32. </h2>
  33. </div>
  34. </section>
  35. <!-- End About Section -->
  36.  
  37. .plax {
  38. -webkit-perspective: 100px;
  39. perspective: 100px;
  40. height: 100vh;
  41. overflow-x: hidden;
  42. overflow-y: auto;
  43. position: absolute;
  44. top: 0;
  45. left: 50%;
  46. right: 0;
  47. bottom: 0;
  48. margin-left: -1500px;
  49. }
  50.  
  51. .parallax__layer {
  52. position: absolute;
  53. top: 0;
  54. right: 0;
  55. bottom: 0;
  56. left: 0;
  57. }
  58. .parallax__layer img {
  59. display: block;
  60. position: absolute;
  61. bottom: 0;
  62. width: 132%;
  63. }
  64.  
  65. .parallax__cover {
  66. background: #fff;
  67. display: block;
  68. position: absolute;
  69. top: 100%;
  70. left: 0;
  71. right: 0;
  72. height: 300px;
  73. z-index: 2;
  74. }
  75.  
  76. .parallax__layer__0 {
  77. -webkit-transform: translateZ(-300px) scale(4);
  78. transform: translateZ(-300px) scale(4);
  79. }
  80.  
  81. .parallax__layer__1 {
  82. -webkit-transform: translateZ(-250px) scale(3.5);
  83. transform: translateZ(-250px) scale(3.5);
  84. }
  85.  
  86. .parallax__layer__2 {
  87. -webkit-transform: translateZ(-200px) scale(3);
  88. transform: translateZ(-200px) scale(3);
  89. }
  90.  
  91. .parallax__layer__3 {
  92. -webkit-transform: translateZ(-150px) scale(2.5);
  93. transform: translateZ(-150px) scale(2.5);
  94. }
Add Comment
Please, Sign In to add comment