Post
Ask Question
Jim Tat

Jim Tat

  • NA
  • 52
  • 47.1k

How to create a slidershow with parallax style

Mar 14 2017 1:10 PM
Hello, I want to create a slidershow and this slidershow must be like this if you see the first picture we can scroll it and I want to put a slidershow and have the same properties !
Thank you.
this code is for the slidershow.
 
  1. <!doctype html>  
  2. <html>  
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  6.     <title>Pure CSS3 crossfade image animation</title>  
  7.     <meta name="description" content="An image crossfade animation done with CSS3">  
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.     <link rel="stylesheet" href="css/main.css">  
  10.   </head>  
  11.   <body>  
  12.     <div class="crossfade">  
  13.       <img>  
  14.       <img>  
  15.       <img>  
  16.       <img>  
  17.       <img>  
  18.     </div>  
  19.   </body>  
  20. </html>  
  21. <style>  
  22. * {  
  23.   padding: 0;  
  24.   margin: 0  
  25. }  
  26.   
  27. body {  
  28.   background-color: #000000;  
  29. }  
  30.   
  31. .crossfade > img {  
  32.   animation: imageAnimation 30s linear infinite 0s;  
  33.   backface-visibility: hidden;  
  34.   background-size: cover;  
  35.   background-position: center center;  
  36.   color: transparent;  
  37.   height: 230px;  
  38.   left: 0px;  
  39.   opacity: 0;  
  40.   position:fixed;  
  41.   top: 0px;  
  42.   width: 100%;  
  43.   z-index: 0;  
  44.   background-attachment: fixed;  
  45.   overflow:scroll;  
  46.   
  47. }  
  48.   
  49. .crossfade > img:nth-child(1) {  
  50.   background-image: url('../img/001.jpg');  
  51. }  
  52. .crossfade > img:nth-child(2) {  
  53.   animation-delay: 6s;  
  54.   background-image: url('../img/002.jpg');  
  55. }  
  56. .crossfade > img:nth-child(3) {  
  57.   animation-delay: 12s;  
  58.   background-image: url('../img/003.jpg');  
  59. }  
  60. .crossfade > img:nth-child(4) {  
  61.   animation-delay: 18s;  
  62.   background-image: url('../img/004.jpg');  
  63. }  
  64. .crossfade > img:nth-child(5) {  
  65.   animation-delay: 24s;  
  66.   background-image: url('../img/005.jpg');  
  67. }  
  68.   
  69. @keyframes imageAnimation {  
  70.   0% {  
  71.     animation-timing-function: ease-in;  
  72.     opacity: 0;  
  73.   }  
  74.   8% {  
  75.     animation-timing-function: ease-out;  
  76.     opacity: 1;  
  77.   }  
  78.   17% {  
  79.     opacity: 1  
  80.   }  
  81.   25% {  
  82.     opacity: 0  
  83.   }  
  84.   100% {  
  85.     opacity: 0  
  86.   }  
  87. }  
  88.   
  89. </style>  

Answers (1)