- Details
- Written by: Stanko Milosev
- Category: CSS3
- Hits: 4436
One quick example without too much explanation.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/index.css">
<title></title>
</head>
<body>
<div id="parent">
<div id="container">
test
</div>
</div>
</body>
</html>
CSS:
#parent {
margin: 0px auto 0px auto;
width: 250px;
overflow: hidden;
}
#container {
position: relative;
-webkit-animation-name: container;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes container {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(800px);
}
}
Live example (Chrome only):
test
- Details
- Written by: Stanko Milosev
- Category: CSS3
- Hits: 4824
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>
<button id="clickMe">Click Me</button>
</body>
</html>
CSS:
@-webkit-keyframes fadeIn {
from {
opacity:0;
} to {
opacity:1;
}
}
#clickMe {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-webkit-animation-duration:1s;
-webkit-animation-delay: 0.7s;
}
Example:
- Details
- Written by: Stanko Milosev
- Category: CSS3
- Hits: 4559
In my case I want to have image, and some text (in future that will be menu) which will swipe inside the image.
HTML:
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="/index.css"> </head> <body> <div id="images"> <img id="myImage" src="/lopata.jpg"></img> <div id="myCssSwipe" class="myTranslateY"> I will swipe </div> </div> <script type="text/javascript" src="/index.js"></script> </body> </html>
JS:
document.getElementById("myImage").addEventListener("click", function() {
if (document.getElementById("myCssSwipe").className !== "myTranslateY-clicked") {
document.getElementById("myCssSwipe").className = "myTranslateY-clicked";
} else {
document.getElementById("myCssSwipe").className = "myTranslateY";
}
})
CSS:
#images {
position:relative;
overflow: hidden;
margin-top:100px
}
.myTranslateY {
color: red;
position:absolute;
top:15%;
-webkit-transition: all 5000ms ease;
-webkit-transform: translateY(0px);
}
.myTranslateY-clicked {
color: red;
position:absolute;
top:15%;
-webkit-transform: translateY(-200px);
-webkit-transition: all 5000ms ease;
}
Here notice line:margin-top:100px
which has no practical puropse, I just wanted to separate image from rest of HTML
Then notice:
overflow: hidden; Which I need for text to "disappear" when it comes to the end of the image.
Example (only in Chrome):
I will swipe
- Details
- Written by: Stanko Milosev
- Category: CSS3
- Hits: 4852
Full explanation you can see here, as much as I understand, for Chrome, Safari, Opera and FireFox syntax is:
-webkit-transition
for Internet Explorer syntax is:
transition
I will show example just for Chrome.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>
<div id="parentDiv">
I belong to the parent
</div>
</body>
</html>
CSS:
#parentDiv {
border-style: solid;
border-width: 5px;
height: 100px;
width: 100px;
-webkit-transition: height 15s;
}
#parentDiv:hover {
height: 8000px;
}
Notice line:
-webkit-transition: height 15s;
here we said that we want to see transition for height, and line:
#parentDiv:hover
Here we are changing height when we come with mouse over.
Example:
I belong to the parent
---
Event which we can use is "webkitTransitionEnd".For example, HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="jquery-2.1.3.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body> <div id="main"> <div id="maxHeightDiv"> Main div with max height <div id="nestedDiv"> Div which is going to move </div> </div> </div> </body> </html>CSS:
div {
overflow-y: auto;
}
#maxHeightDiv {
min-height: 100px;
max-height: 100px;
width: 100px;
overflow-y: auto;
padding: 60px 0 0 0;
}
#nestedDiv {
overflow-y: auto;
border: 2px solid #a1a1a1;
height: 40px;
-webkit-transition: height 2s;
}
#nestedDiv:hover{
height: 100px;
-webkit-transition: height 2s;
}
#maxHeightDiv::-webkit-scrollbar {
display: none;
}
JS:
function myScroll() {
$('#maxHeightDiv').scrollTop(10000);
}
window.onload = function () {
$("#nestedDiv").on("webkitTransitionEnd", function () {
myScroll();
});
}
Hover with mouse over "Div which is going to move", and wait a little bit. Real life example:
Main div with max height
Div which is going to move
As you can see scroll will happen only when transition is over.