bendtherules/slide_in_demo
1
0
Fork 0
mirror of https://github.com/bendtherules/slide_in_demo.git synced 2026-08-18 13:52:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit - slide_in working

Browse Source
This commit is contained in:
bendtherules
2017-02-17 01:33:51 +05:30
committed by GitHub
parent f87837a563
commit 7c5d96d3fa
2 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.css
+162
View File
@@ -0,0 +1,162 @@
*,*::before,*::after
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
** All animation keyframes definitions here
*/
@-webkit-keyframes slide-in-from-right {
from {
-webkit-transform: translateX(120%);
-ms-transform: translateX(120%);
-o-transform: translateX(120%);
transform: translateX(120%);
}
to {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@-o-keyframes slide-in-from-right {
from {
-webkit-transform: translateX(120%);
-ms-transform: translateX(120%);
-o-transform: translateX(120%);
transform: translateX(120%);
}
to {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@-moz-keyframes slide-in-from-right {
from {
-webkit-transform: translateX(120%);
-ms-transform: translateX(120%);
-o-transform: translateX(120%);
transform: translateX(120%);
}
to {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slide-in-from-right {
from {
-webkit-transform: translateX(120%);
-ms-transform: translateX(120%);
-o-transform: translateX(120%);
transform: translateX(120%);
}
to {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
/*
** Keyframe definition ends here
*/
body
{
overflow-x: hidden;
}
.slide-container
{
position: absolute;
bottom: 2em;
right: 2em;
width: 20em;
height: 15em;
}
.slide
{
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 0 3px rgba(0,0,0,.6);
padding: 1em;
-webkit-animation: slide-in-from-right 1.5s;
-o-animation: slide-in-from-right 1.5s;
animation: slide-in-from-right 1.5s;
}
.slide-text
{
font-family: sans-serif;
font-size: 1em;
color: rgb(50,50,50);
width: 100%;
height: 3em;
padding: 0.25em .25em;
}
.highlight
{
font-size: 1.2em;
}
.quote::before,.quote::after
{
content: "'";
width: 1em;
height: 1em;
}
.slide-img {
width: 100%;
height: 10em;
position: relative;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.slide-close-btn
{
position: absolute;
top: 0;
right: 0;
padding: .375em .5em;
background-color: rgba(255,255,255,0.5);
font-family: sans-serif;
font-size: .85em;
}
index.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fly-in Demo</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="slide-container">
<div class="slide">
<div class="slide-text">
Are you looking for <span class="highlight quote">White dresses</span>?
</div>
<div class="slide-img">
<img src="images/n1.jpg">
</div>
<div class="slide-close-btn">X</div>
</div>
</div>
</body>
</html>