Tech
Forums
Jobs
Books
Events
Live
Interviews Prep
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
1
Reply
How to create a slidershow with parallax style
Jim Tat
Mar 14 2017 1:10 PM
254
Reply
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.
<!doctype html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
>
<title>Pure CSS3 crossfade image animation</title>
<meta name=
"description"
content=
"An image crossfade animation done with CSS3"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<link rel=
"stylesheet"
href=
"css/main.css"
>
</head>
<body>
<div
class
=
"crossfade"
>
<img>
<img>
<img>
<img>
<img>
</div>
</body>
</html>
<style>
* {
padding: 0;
margin: 0
}
body {
background-color: #000000;
}
.crossfade > img {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 230px;
left: 0px;
opacity: 0;
position:fixed;
top: 0px;
width: 100%;
z-index: 0;
background-attachment: fixed;
overflow:scroll;
}
.crossfade > img:nth-child(1) {
background-image: url(
'../img/001.jpg'
);
}
.crossfade > img:nth-child(2) {
animation-delay: 6s;
background-image: url(
'../img/002.jpg'
);
}
.crossfade > img:nth-child(3) {
animation-delay: 12s;
background-image: url(
'../img/003.jpg'
);
}
.crossfade > img:nth-child(4) {
animation-delay: 18s;
background-image: url(
'../img/004.jpg'
);
}
.crossfade > img:nth-child(5) {
animation-delay: 24s;
background-image: url(
'../img/005.jpg'
);
}
@keyframes imageAnimation {
0% {
animation-timing-
function
: ease-in;
opacity: 0;
}
8% {
animation-timing-
function
: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
</style>
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
1
)
Next Recommended Forum
WHICH JQUERY LIBRARY CAN I USE
What is Bootstrap