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.
Related
When the screen width is less than 640px, the background is covered, why is the height not covered? And, It's work in Chrome and Edge.
.change{
background: #f00;
height: 100px;
animation: test1 1s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 400px;
}
}
#media only screen and (max-width: 640px) {
.change{
background: #0f0;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 200px;
}
}
}
jsfiddle
Looking at how the site behaves on Chrome, Firefox, and Safari, it seems that Chrome might be the only browser who deviate by attempting to reanimate the <div> after #media conditions are changed. Firefox and Safari thought that the animation is finished and no longer needed to reanimated.
As a workaround, you can force all web browsers to reanimate this by re-setting the .change animation properties under the #media scope and changing their values by a bit, such as by animating for 1.000001 seconds instead of 1.
.change{
background: #f00;
align-items: center;
font-family: sans-serif;
color: #fff;
height: 100px;
display: flex;
justify-content: center;
animation: test1 1s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 400px;
}
}
#media only screen and (max-width: 640px) {
.change{
background: #0f0;
color: #00f;
animation: test1 1.000001s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 200px;
}
}
}
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' />
<body>
<div class="change">Some content</div>
</body>
</html>
https://www.toriiteppanyaki.com/vertical-fixed-navigation/
this is the page i am testing. whenever i click on the dot navigation to scroll to particular section, it stuck for a second before it can move again. anyone face this before? I am using this code from codyhouse and applying it in my Divi WordPress theme.
< script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" > < /script> <
script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" > < /script> <
script >
jQuery(document).ready(function($) {
var section_items = $('.sectionnav'),
navigation_items = $('#navigation a');
updateNavigation();
$(window).on('scroll', function() {
updateNavigation();
});
navigation_items.on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
$('.scroll_down').on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
function updateNavigation() {
section_items.each(function() {
$this = $(this);
var activeSection = $('#navigation a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if ($this.offset().top - $(window).height() / 2 < $(window).scrollTop() && $this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop()) {
navigation_items.eq(activeSection).addClass('is-selected');
} else {
navigation_items.eq(activeSection).removeClass('is-selected');
}
});
}
function smoothScroll(target) {
$('body,html').animate({
'scrollTop': target.offset().top
},
600);
}
}); <
/script>
<style>ol,
ul {
list-style: none;
}
</style><style>#navigation {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
#navigation li {
text-align: right;
}
#navigation a {
display: inline-block;
}
#navigation a:after {
content="";
display: table;
clear: both;
}
#navigation a span {
float: right;
display: inline-block;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#navigation a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#navigation a:hover .label {
opacity: 1;
}
#navigation a.is-selected .dot {
background-color: white;
}
#navigation a.is-selected .label {
opacity: 1;
}
#navigation .dot {
position: relative;
/* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #000000;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#navigation .label {
position: relative;
margin-right: 10px;
padding: .1em .1em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav_trig {
display: none;
}
</style>
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 have a problem with a image I added to the header It doesn't seem to display in Chrome but is does display on Safari and Firefox. I have 3 black banners/flags on the top left of the screen. The middle doesnt display on chrome. Does anyone have a suggestion or an idea why it doesn't display?
header.php:
<div class="header_inner clearfix">
<div class="marketing-top">
<img src="/wp-content/uploads/2015/04/Banner-header-marketing.png" alt="marketing">
<img class="space" src="/wp-content/uploads/2015/04/Banner-header-design.png" alt="design">
<div class="header-img animated swing">
<img src="/wp-content/uploads/2015/05/banner-header-web-design.jpg" alt="webdesign">
</div>
</div>
css:
.marketing-top {
padding-left: 180px;
position: absolute;
float: left;
left: 100px;
}
.marketing-top .space{
position: absolute;
float:left;
left:280px;
bottom:57px;
}
.header-img {
position: absolute;
float:left;
left:230px;
bottom:0px;
}
#media screen and (max-width: 1250px) {
.marketing-top{
display: none;
}
}
.swing {
animation-name: swing;
transform-origin: center top 0;
}
.animated {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes swing {
0% {
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
20% {
transform: rotate(1deg);
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(-1deg);
animation-timing-function: ease-in-out;
}
60% {
transform: rotate(0.5deg);
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(-0.5deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
}
Thanks in advance!
Vonwelzen
Related URL: http://www.elephantdesign.nl
6 hours ago
Its because width of .header-img is 0 in your case. Explicitly assign a width greater than image width
.header-img{
width:50px;
}
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/