below you have the code I'm using to try and achieve a 3D animation:
Here is the fiddle and the code:
http://jsfiddle.net/82C2N/
<html>
<head>
<title>3D CSS Animation</title>
<style>
#movieposters li {
display:inline; float:left;
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective;
-webkit-transition-duration: 0.5s;
transition-duration: 1s;
-moz-perspective: 500;
-moz-transform-style: preserve-3d;
-moz-transition-property: perspective;
width: 200px;
}
#movieposters li:hover {
-webkit-perspective: 5000;
-moz-perspective: 5000;
transition-duration: 1s;
transition-timing-function: linear;
width: 200px;
}
#movieposters li img {
-webkit-transform: rotateY(30deg);
-webkit-transition-property: transform;
transition-duration: 0.5s;
-moz-transition-duration: 1s;
-moz-transform: rotateY(30deg);
-moz-transition-property: transform;
width: 200px;
}
#movieposters li:hover img {
width: 200px;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
</style>
</head>
<body style="height: 100%" class="bluegradient">
<ul id="movieposters">
<li>
<img src="http://fc02.deviantart.net/fs36/i/2008/252/6/1/House_MD_DVD_covers_by_kdaver.jpg"/>
</li>
</ul>
</body>
To see the desired effect open that in Chrome. In Firefox, the -moz-transition-duration seems to have no effect. The perspective and rotation value change on hover but withou any animation.
Any idea why? I'm using the latest version of Firefox (10.0.2).
It is a problem with the value transform, in Mozilla it is prefixed with -moz-transform.
#movieposters li img {
-moz-transition-property: -moz-transform
}
Here is the fiddle:
http://jsfiddle.net/cadence96/82C2N/1/
Related
How can I get this animation effect? I mean exacly this one:
I have to animate the image (I have every part of it in layers). What I should use? which way is the best?
i hope this can help,i use animation on load event using jQuery.
$( window ).on( "load", function() {
$('.main-section').toggleClass('animation-effect');
});
body {
margin: 0;
}
.main-section {
padding: 25px 0px 0 20px;
background-color: #d7f0f7;
}
.main-section .content {
max-width: 450px;
background-color: #d7f0f7;
transform: translateX(-500px);
transition: 0.8s;
}
.main-section .content .box {
height: 150px;
background-color: #e91e63;
margin-top: -15px;
transition: 0.5s;
width: 0;
}
.main-section .content .leaf {
padding-left: 100px;
}
.main-section .content .half-circle {
padding-left: 100px;
margin-top: -20px;
}
.main-section .content .half-circle-2 {
padding-left: 100px;
margin-top: -25px;
transform: rotate(-14deg);
}
.main-section .content .leaf img {
padding-left: 115px;
}
.main-section.animation-effect .content{
transform: translateX(0px);
transition: 1s;
}
.main-section.animation-effect .box {
width: 100%;
transition: 1s;
}
.main-section .content .half-circle img {
animation: rotate 3.5s infinite;
}
.main-section .content .leaf img {
animation: leaf-animation 3s infinite;
}
#keyframes rotate {
0% {
transform: rotate(-14deg);
}
50% {
transform: rotate(10deg);
}
100%
{
transform: rotate(-14deg);
}
}
#keyframes leaf-animation {
0% {
transform: rotate(0);
}
50% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="main-section">
<div class="content">
<div class="leaf">
<img src="https://i.ibb.co/fSQXHD5/leaf.png" alt="leaf" border="0">
</div>
<div class="half-circle">
<img src="https://i.ibb.co/xfmy6zS/half-1.png" alt="half-1" border="0">
</div>
<div class="half-circle-2">
<img src="https://i.ibb.co/CBdVwNC/half-2.png" alt="half-2" border="0">
</div>
<div class="box">
</div>
</div>
</div>
Hi guys I have a problem. I want show just normal my text on the image. When I do mouseover should be change image opacity except my text and png icon, it's should be seen normal (without opacity ).Like that.Thanks http://demo.digipieces.com/gusteau-html/menu-1.html
.foodMenu {
text-align: center;
height: 210px;
width: 280px;
position: relative;
}
.foodMenu:after {
content:'\A';
position:absolute;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
top:0;
left:0;
width:100%; height:100%;
}
.foodMenu:hover:after {
opacity: 1;
}
.foodMenu .menuTitle {
font-weight: 300;
font-size: 32px;
text-align: center;
text-transform: none;
position: absolute;
bottom:30px;
left:0;
right:0;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s cubic-bezier(x1,y1,x2,y2);
text-rendering: optimizelegibility;
opacity: 0;
}
.foodMenu:hover .menuTitle {
opacity: 1;
bottom: 70px;
}
.foodMenu .curve {
text-align: center;
text-transform: none;
position:absolute;
bottom:70px;
left:120px;
right:0;
opacity:0;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s;
}
.foodMenu:hover .curve {
opacity: 1;
}
<div class="col span-1-of-4 step_box">
<div class="foodMenu js-wp-2">
<img src="http://lorempixel.com/output/food-q-c-280-210-1.jpg" alt="our menu meal">
<h3 style="color:#ffffff;" class="menuTitle">Meals</h3>
<img src="img/curve.png" alt="curve" class="curve">
</div>
</div>
Inspired by native Android zoomOut for form transitions and iOS app launching zoom effect, which are both really cool...
How do I go about implementing zoom In or Out transition for Forms, Dialogs and Containers in Codenameone?
I want the transition to have zooming animation like below:
#charset "UTF-8";
*,
:before,
:after {
margin: 0;
padding: 0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input,
select,
button,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font: inherit;
color: inherit;
}
.butt,
.input {
padding: .75rem;
margin: .375rem;
background-color: transparent;
border-radius: 4px;
}
.butt:focus,
.input:focus {
outline: none;
}
.butt {
border: 2px solid #f35626;
line-height: 1.375;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 700;
color: #f35626;
cursor: pointer;
-webkit-animation: hue 60s infinite linear;
}
.butt--primary {
background-color: #f35626;
color: #fff;
}
.input {
border: 1px solid #c0c8c9;
border-radius: 4px;
}
.input--dropdown {
background-image: url("images/ddown.png");
background-image: url("images/ddown.svg?3"), none;
background-repeat: no-repeat;
background-size: 1.5rem 1rem;
background-position: right center;
}
h1,
.alpha {
margin-bottom: 1.5rem;
font-size: 3rem;
font-weight: 100;
line-height: 1;
letter-spacing: -.05em;
}
h2,
.beta {
margin-bottom: .75rem;
font-weight: 400;
font-size: 1.5rem;
line-height: 1;
}
#media (min-width: 650px) {
.mega {
font-size: 6rem;
line-height: 1;
}
}
.subhead,
.meta {
color: #7b8993;
}
.promo {
text-align: center;
}
p,
hr,
form {
margin-bottom: 1.5rem;
}
hr {
border: none;
margin-top: -1px;
height: 1px;
background-color: #c0c8c9;
background-image: -webkit-linear-gradient(0deg, #fff, #c0c8c9, #fff);
}
a {
color: inherit;
text-decoration: underline;
-webkit-animation: hue 60s infinite linear;
}
a:hover {
color: #f35626;
}
.wrap {
max-width: 38rem;
margin: 0 auto;
}
.island {
padding: 1.5rem;
}
.isle {
padding: .75rem;
}
.spit {
padding: .375rem;
}
html {
font: 100%/1.5"Roboto", Verdana, sans-serif;
color: #3d464d;
background-color: #fff;
-webkit-font-smoothing: antialiased;
width: 100%;
overflow: hidden-x;
text-align: center;
}
#media (min-width: 650px) {
html {
height: 100%;
}
html:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
body {
display: inline-block;
vertical-align: middle;
max-width: 38rem;
}
}
.site__header {
-webkit-animation: bounceInUp 1s;
}
.site__title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
.site__content {
-webkit-animation: bounceInUp 1s;
-webkit-animation-delay: .1s;
}
.site__content form {
-webkit-animation: bounceInUp 1s;
-webkit-animation-delay: .1s;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
#-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
#keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, minimal-ui" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//code.jquery.com" />
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="site__header island">
<div class="wrap">
<span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Zoom me in and out</h1></span>
</div>
</header>
<!-- /.site__header -->
<main class="site__content island" role="content">
<div class="wrap">
<form>
<select class="input input--dropdown js--animations">
<optgroup label="Zoom Entrances">
<option value="zoomIn">zoomIn</option>
</optgroup>
<optgroup label="Zoom Exits">
<option value="zoomOut">zoomOut</option>
</optgroup>
</select>
<button class="butt js--triggerAnimation">Animate it</button>
</form>
<hr />
</div>
</main>
<!-- /.site__content -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function testAnim(x) {
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass();
});
};
$(document).ready(function() {
$('.js--triggerAnimation').click(function(e) {
e.preventDefault();
var anim = $('.js--animations').val();
testAnim(anim);
});
$('.js--animations').change(function() {
var anim = $(this).val();
testAnim(anim);
});
});
</script>
</body>
</html>
Probably the closest thing to some of the Android effects is the Morph transition between forms that allows a component to grow into the next form http://www.codenameone.com/blog/mighty-morphing-components.html
If you want something closer to the above code you can just position the component in the right location and make it smaller then use animateLayout() to make it grow into place.
In the old days we had a FlyIn transition which mapped to this exactly but it used old 3D code. I think it should be trivial to implement though with the affine transform and scale similarly to the FlipTransition.
I want a Kendo List View for showing images, so
Here is my KendoUI list view, but the values which I am fetching from controller is not binding in template.please help..
<div id="example">
<div class="demo-section">
<div id="listView"></div>
<div id="pager" class="k-pager-wrap"></div>
</div>
#section scripts{
<script src="~/scripts/kendo/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="#= Title #" alt="#: Title # image" />
<h3>#:Title#</h3>
</div>
</script>
<script>
$(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/my/thumbnail",
dataType: "json"
}
},
pageSize: 15,
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html())
});
});
</script>
}
<style scoped>
.demo-section {
margin: 20px auto;
border: 0;
background: none;
width: 577px;
}
#listView {
padding: 10px;
margin-bottom: -1px;
min-width: 555px;
min-height: 510px;
}
.product {
float: left;
position: relative;
width: 111px;
height: 170px;
margin: 0;
padding: 0;
}
.product img {
width: 110px;
height: 110px;
}
.product h3 {
margin: 0;
padding: 3px 5px 0 0;
max-width: 96px;
overflow: hidden;
line-height: 1.1em;
font-size: .9em;
font-weight: normal;
text-transform: uppercase;
color: #999;
}
.product p {
visibility: hidden;
}
.product:hover p {
visibility: visible;
position: absolute;
width: 110px;
height: 110px;
top: 0;
margin: 0;
padding: 0;
line-height: 110px;
vertical-align: middle;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.75);
transition: background .2s linear, color .2s linear;
-moz-transition: background .2s linear, color .2s linear;
-webkit-transition: background .2s linear, color .2s linear;
-o-transition: background .2s linear, color .2s linear;
}
.k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</div>
and here is my data ,
Items: [,…]
0: {ID:148, Name:Thumbnail, Profiles:null, ContentID:0, Title:http://img.youtube.com/vi/wLbA9Dsnyik/0.jpg,…}
1: {ID:149, Name:Thumbnail, Profiles:null, ContentID:0, Title:http://img.youtube.com/vi/wLbA9Dsnyik/0.jpg,…}
2: {ID:150, Name:Thumbnail, Profiles:null, ContentID:0, Title:http://img.youtube.com/vi/wLbA9Dsnyik/2.jpg,…}
3: {ID:151, Name:Thumbnail, Profiles:null, ContentID:0, Title:http://img.youtube.com/vi/FjBwQtSEGEw/0.jpg,…}
Now these data is not getting bind in template.
Please update the = sign to : sign in the template. Please see below:
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="#: Title #" alt="#: Title # image" />
<h3>#:Title#</h3>
</div>
</script>
http://dev.viral-minds.com/miller/abc/abc.html
two questions about this
How do I keep the green block from "blinking" at the beginning when the page loads?
The animation only works on chrome at the moment...how to get it to work in FF and IE?
thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main</title>
<style type="text/css">
body
{
background-color:#FFFFF0; /*ivory*/
overflow: hidden;
}
#box
{
position: absolute;
width:495px;
height:263px;
background:#32331d;
top: 20px;
left: 20px;
}
#nav
{
position: absolute;
margin-left:30px;
width:100%;
height:100px;
top: 425px;
z-index: 100;
background-image:url('colors.png');
background-repeat:no-repeat;
}
#stars,
#stars-2,
#small-stars,
#small-stars-2 {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
margin: -300px 0 0 -300px;
background: url(stars-large.png) no-repeat center center;
-webkit-animation-name: starsLarge;
-webkit-animation-duration: 240s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes starsLarge {
from {
-webkit-transform: rotate(0deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
#stars-2 {
-webkit-animation-name: starsLargeAlt;
-webkit-animation-duration: 180s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes starsLargeAlt {
from {
-webkit-transform: rotate(180deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
#small-stars,
#small-stars-2 {
background: url(stars-small.png) no-repeat center center;
-webkit-animation-duration: 60s;
-webkit-animation-name: starsSmall;
}
#small-stars-2 {
-webkit-animation-name: starsSmallAlt;
-webkit-animation-duration: 120s;
}
#-webkit-keyframes starsSmall {
from {
-webkit-transform: rotate(360deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(0deg) scale(.5);
opacity: .5;
}
}
#-webkit-keyframes starsSmallAlt {
from {
-webkit-transform: rotate(0deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
</style>
</head>
<body>
<div id="box"><img src="actual.png"></img></div>
<div id="nav"></div>
<div id="stars"></div>
<div id="stars-2"></div>
<div id="small-stars"></div>
<div id="small-stars-2"></div>
</body>
Item 1: The green block flickers because the overlayed image is not retrieved from the server yet. You could add display: none; to the CSS for #box, then programmatically display it after the page has been fully loaded. For example:
// jQuery:
$(document).ready(function(){
$('#box').show();
});
Item 2: The animation only works in Chrome because you are using -webkit specific style definitions. You will need to research alternatives, such as -moz and -ms in order to see if it can work in those browsers. You could also try omitting the prefix altogether.
I. You can change the background color of that div to match the page background. And later, when the image has been loaded, you change it to dark green via jQuery:
$(function() {
$('#box img').load(function() {
$(this).parent().css('background-color', '#32331D');
});
});
II. You have to add browser specific prefixes other than -webkit.
For FF - -moz
For IE - -ms
For Opera - -o
Just keep in mind that those animations won't work in older versions of IE (8 and under) despite the prefixes. Those suckers don't support CSS animations.