Coding for preloader icon is using HTML, CSS, and Javascript, but it's not hidden when I disabled the javascript from the browser console, because google will disable the javascript and CSS when it crawls to indexing the page. is there any other solution to use the preloader without javascript and CSS? Please help me.
my Html:
<div id="loader-wrapper">
<div id="loader">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS:
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: #fff;
overflow: hidden;
}
#loader {
width: 90px;
height: 65px;
position: relative;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
#loader ul {
margin: 0;
list-style: none;
width: 90px;
width: 90px;
position: relative;
padding: 0;
height: 10px;
}
#loader ul li {
position: absolute;
width: 2px;
height: 0;
background-color: #f1582a;
bottom: 0;
}
#keyframes sequence1 {
0% {
height: 10px;
}
50% {
height: 50px;
}
100% {
height: 10px;
}
}
#keyframes sequence2 {
0% {
height: 20px;
}
50% {
height: 65px;
}
100% {
height: 20px;
}
}
#loader li:nth-child(1) {
left: 0;
animation: sequence1 1s ease infinite 0;
}
#loader li:nth-child(2) {
left: 15px;
animation: sequence2 1s ease infinite 0.1s;
}
#loader li:nth-child(3) {
left: 30px;
animation: sequence1 1s ease-in-out infinite 0.2s;
}
#loader li:nth-child(4) {
left: 45px;
animation: sequence2 1s ease-in infinite 0.3s;
}
#loader li:nth-child(5) {
left: 60px;
animation: sequence1 1s ease-in-out infinite 0.4s;
}
#loader li:nth-child(6) {
left: 75px;
animation: sequence2 1s ease infinite 0.5s;
}
JS:
function prealoader () {
if ($('#loader').length) {
$('#loader').fadeOut(); // will first fade out the loading animation
$('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
};
}
You could use an animated SVG icon that animates.
Related
I want to create a full screen overlay menu. I am not able to close the menu on anchor click eg. if we click on Home. It scrolls down to the section but does not close the overlay.
I have tried adding some jquery but I am not able to do it. I have tried to toggle the menus as done on clicking the cross but no success.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: 0.35s ease;
}
.container a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Vollkorn', sans-serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight 0.5s ease forwards;
animation: fadeInRight 0.5s ease forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: 0.35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body translate='no' >
<div class='container'>
<h1>Top right corner, click it!</h1>
</div>
<div class='button_container' id='toggle'>
<span class='top'></span>
<span class='middle'></span>
<span class='bottom'></span>
</div>
<div class='overlay' id='overlay'>
<nav class='overlay-menu' id="fulloverlay">
<ul>
<li><a href='#about2' >Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Work</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
<section class="about" id="about" style="background-color: white; height: 100vh;"></section>
<section class="about2" id="about2" style="background-color:aqua; height: 100vh;"></section>
I tried this code on my side and noticed one small change would work in this case.
You are selecting anchors(a) using wrong selector. As 'fulloverlay' is the Id of the parent nav element so instead of selecting it like:
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
You can write like this:
$("#fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
then it works.
Hi i Have a custom made banner with following code
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, serif;
color: #003C78;
}
a {
color: #003C78;
}
.banner-wrap {
display: flex;
width: 728px;
height: 90px;
}
.page-container {
position: relative;
overflow: hidden;
width: 100%;
}
.page-container img {
width: 100%
}
.image-wrapper,
.text-wrapper {
position: absolute;
height: auto;
width: 411px;
}
.image-wrapper {
top: 0;
right: -155px;
z-index: 2;
animation: slideLeft 14.5s infinite ease 0s normal forwards;
}
.image-wrapper img {
position: absolute;
left: 0px;
top: -100px;
width: 150%
}
.text-wrapper h1,
.text-wrapper h2 {
position: absolute;
left: 90px;
padding: 0;
opacity: 0;
z-index: 3;
font-size: 1.3em;
}
.text-wrapper h1 {
animation: fade infinite 14.5s linear 0s normal forwards;
animation-delay: 4s;
top: 15px;
}
.text-wrapper h2 {
animation: fadeNew infinite 14.5s linear 0s normal forwards;
animation-delay: 7.8s;
}
.text-wrapper img {
position: absolute;
left: 50px;
bottom: 30px;
width: 468px;
height: 180px
}
.red-wrapper {
position: absolute;
bottom: 0px;
z-index: 9;
right: -600px;
color: #fff;
animation: slideLeftNew 14.5s infinite ease 0s normal forwards;
animation-delay: 7s;
padding-left: 15px;
border-bottom: 100px solid #E6000A;
border-right: 50px solid transparent;
height: 0;
width: 120px;
}
.red-wrapper h3 {
font-size: 1.1em;
font-weight: 300;
margin-top: 26px;
}
.logo img {
width: 80px;
height: auto;
margin: 17px;
}
img.kitchen {
transform: translateY(-40%);
-webkit-transform: translateY(-40%);
-ms-transform: translateY(-40%);
width: 63%;
position: absolute;
left: -18px;
animation: moveUp 14.5s infinite ease 0s normal forwards;
}
img.wall {
width: 11%;
position: absolute;
left: 0;
z-index: 9;
}
#keyframes slideLeft {
20.95% {
right: -155px
}
85%,
27.19% {
right: 135px;
}
}
#keyframes slideLeftNew {
15.95% {
right: -220px
}
20.19%,
37% {
right: 0
}
42% {
right: -220px;
}
}
#keyframes fade {
0% {
opacity: 0
}
23%,
14.38% {
opacity: 1
}
26% {
opacity: 0
}
}
#keyframes fadeNew {
0% {
opacity: 0
}
30%,
14.38% {
opacity: 1
}
33% {
opacity: 0
}
}
#keyframes moveUp {
0% {
transform: translateY(-40%);
}
50% {
transform: translateY(-45%);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Hawa Sliding Solutions</title>
<meta content="text/html;charset=UTF-8" http-equiv="content-type">
</head>
<body>
<a href="http://hawa-suono.com/" target="_blank">
<div class="banner-wrap">
<div class="logo"><img src="logo.png"></div>
<div class="page-container">
<div class="text-wrapper">
<h1>Den Alltag auf stumm schalten.</h1>
<h2>Hawa Suono – die schalldichte Lösung.</h2>
</div>
<img class="wall" src="wall.png" />
<img class="kitchen" src="kitchen3.jpg" />
<div class="image-wrapper"><img src="tuer2.jpg" /></div>
<div class="red-wrapper">
<h3>Jetzt die Weltneuheit entdecken.</h3>
</div>
</div>
</div>
</a>
</body>
</html>
Now I need to check if the banner is loaded and work, and if it is not, then I need to put another image instead of the banner. I tried a lot of things, to check if image is there, to check if css is loaded, to check is the document loaded, but that solution can not work, because I must only check if the banner is loaded, not the whole document. So now, I am stacked and do not know what to do next.Also, I can not use jquery, only pure javascript.
Any help?
Thanks
If using JS,
function imgError(image) {
image.onerror = "";
image.src = "/images/wall.gif";
return true;
}
<img src="wall.png" onerror="imgError(this);"/>
Without JS,
<img src="wall.png" onError="this.onerror=null;this.src='/images/wall.gif';" />
you can do it with jquery
//check all images on the page
$('img').each(function(){
var img = new Image();
img.onload = function() {
console.log($(this).attr('src') + ' - done!');
}
img.src = $(this).attr('src');
});
working fiddle : http://jsfiddle.net/kalmarsh80/nrAPk/
So for the following code, I have a circular notification that animates, opening up left and displaying information and a profile image. I would like to be able to reverse the animation back by having the circle go forward covering up the info and fading out (which I already have inputed). However, I'm not sure how to implement this. I've tried a couple of ways like switching the animation around but it doesn't seem to work. Any suggestions?
You can click the "CLOSE ME" button to close the notification and the "OPEN ME" to open it as well.
$(document).ready(function() {
$(".open").click(function(e) {
$(".pgn-wrapper").fadeIn(250);
});
$(".close").click(function(e) {
$(".pgn-wrapper").fadeOut(500);
});
});
/* Circle Animation
------------------------------------
*/
.pgn-circle .alert {
border-radius: 300px;
animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
-webkit-animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
height: 50px;
overflow: hidden;
padding: 6px 55px 6px 6px;
-webkit-transform: translateZ(0);
position: relative;
}
.pgn-wrapper[data-position$='-right'] .pgn-circle .alert {
float: right;
}
.pgn-wrapper[data-position$='-left'] .pgn-circle .alert {
float: left;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div {
border-radius: 50%;
overflow: hidden;
width: 48px;
height: 48px;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div > img {
width: 100%;
height: 100%;
}
.pgn-circle .alert > div > div.pgn-message > div {
opacity: 0;
height: 47px;
padding-left: 9px;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}
.pgn-circle .alert > div > div.pgn-message > div p:only-child {
padding: 12px 0;
}
.pgn-circle .alert .close {
margin-top: -12px;
position: absolute;
right: 18px;
top: 50%;
opacity: 0;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
}
.pgn-circle .alert p {
margin-bottom: 0;
}
.pgn-circle .alert > div {
display: table;
height: 100%;
}
.pgn-circle .alert > div > div {
display: table-cell;
vertical-align: middle;
}
#keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#-webkit-keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.close:target {
animation: resizeCircle2 1s all;
animation-direction: alternate;
}
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
/* Headings
------------------------------------
*/
p {
display: block;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.01em;
line-height: 22px;
margin: 0px 0px 10px 0px;
font-style: normal;
white-space: normal;
}
.bold {
font-weight: bold !important;
}
/* Alert
------------------------------------
*/
.alert {
background-image: none;
box-shadow: none;
text-shadow: none;
padding: 9px 19px 9px 15px;
border-radius: 3px;
font-size: 13px;
border-width: 0;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.alert-danger, .alert-error {
background-color: #c42827;
color: white;
border-color: #933432;
}
.alert-danger .close, .alert-error .close {
background-position: -95px -10px !important;
}
/*------------------------------------------------------------------
Notifications
--------------------------------------------------
*/
.pgn-wrapper[data-position='top'] {
top: 0;
left: 0;
right: 0;
}
.pgn {
position: relative;
margin: 10px;
}
.pgn .alert {
margin: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="pgn-wrapper" data-position="top-right">
<div class="pgn push-on-sidebar-open pgn-circle">
<div class="alert alert-danger">
<div>
<div class="pgn-thumbnail">
<div>
<img width="40" height="40" style="display: inline-block;" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
</div>
<div class="pgn-message">
<div>
<p class="bold" style="color:white">John Doe</p>
<p>Logging out in <b>60</b> second(s).</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="open" href="#">OPEN ME</a>
<a class="close" href="#">CLOSE ME</a>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Well, you've got a ton of code and I didn't parse through all of it, but I can say that when you have an animation like this:
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
You are indicating where the width should start and end so to reverse that, you'd want to either ensure that this animation is tied to a temporary state, like a hover with a selector like this:
element:hover {
animation:resizeCircle 1s all;
}
Then, the animation would only apply when the element is being hovered and when it isn't the element will animate back to its original state.
Or, you could set up a separate animation that specifies the reverse property values:
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
and apply that to a "trigger" selector, such as:
element:target {
animation:resizeCircle2 1s all;
}
Which would (in this case) apply the reverse animation when the element is the target of a click.
Here's an example:
<div class="expandable"></div>
div.expandable {
background-color: green;
width: 30px;
height: 25px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
div.expandable:hover {
width: 300px;
}
You can give that a run here: https://plnkr.co/edit/wa5Ny6vmluJv6xeDs7qt?p=preview
So I got a little circle shape with an icon that when I click, it will make the icon disappear and show a few elements in another div. The circle shape transforms into a 260x260 px square with CSS animation.
Until that I was fine, but I can't make the fadeIn/fadeOut work. Is there a way to handle this by toggling a CSS class over the parent element?
I can't just use opacity 0 to opacity 1 because I need the icon to really disappear with display none. Same for the other when going back to circle+icon state. But I just can't even make the opacity animation work. I also tried with those keyframes of fadeIn and fadeOut but didn't work either.
I found this fiddle but it looks so ugly having to use a setTimeout.
Is there a way to solve this with only CSS?
$('.toggle-btn').click(function() {
$('.parent').toggleClass('expanded');
});
.parent {
width: 40px;
height: 40px;
background-color: lightgray;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
left: 11px;
bottom: 18px;
text-align: center;
transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
}
.parent.expanded {
width: 200px;
height: 200px;
border-radius: 0 14px 0 0;
left: 0;
bottom: 0;
}
.children-1 {
display: block;
animation: opacity-up 500ms linear 700ms 1;
animation-fill-mode: forwards;
}
.help {
width: 21px;
height: 21px;
position: relative;
top: 9px;
}
.children-2 {
display: none;
animation: opacity-down 500ms linear 700ms 1;
animation-fill-mode: forwards;
}
.parent.expanded .children-1 {
animation: opacity-down 500ms linear 700ms 1;
animation-fill-mode: forwards;
display: none;
}
.parent.expanded .children-2 {
animation: opacity-up 500ms linear 700ms 1;
animation-fill-mode: forwards;
display: block;
}
#keyframes opacity-down {
0% {
visibility: visible;
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes opacity-up {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
/*
#-webkit-keyframes fadeIn {
0% { opacity: 0;
visibility: hidden;
display: none; }
100% { opacity: 1;
visibility: visible;
display: block; }
}
#keyframes fadeIn {
0% { opacity: 0;
visibility: hidden;
display: none; }
100% { opacity: 1;
visibility: visible;
display: block; }
}
#-webkit-keyframes fadeOut {
0% { opacity: 1;
visibility: visible;
display: block; }
100% { opacity: 0;
visibility: hidden;
display: none; }
}
#keyframes fadeOut {
0% { opacity: 1;
visibility: visible;
display: block; }
100% { opacity: 0;
visibility: hidden;
display: none; }
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="children-1">
<img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png"/>
</div>
<div class="children-2">
<p class="paragraph">
Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
</p>
</div>
</div>
<button class="toggle-btn">TOGGLE!</button>
Until that I was fine, but I can't make the fadeIn/fadeOut work. Is
there a way to handle this by toggling a CSS class over the parent
element?
You can do this without animation with toggle classes
$('.toggle-btn').click(function() {
$('.parent').toggleClass('expanded');
$('.children-2').toggleClass('show1');
$('.children-1').toggleClass('show2');
});
.parent {
width: 40px;
height: 40px;
background-color: lightgray;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
left: 11px;
bottom: 18px;
text-align: center;
transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
}
.parent.expanded {
width: 200px;
height: 200px;
border-radius: 0 14px 0 0;
left: 0;
bottom: 0;
}
.children-1 {
display: block;
animation: opacity-up 500ms lineal 0s 1;
animation-fill-mode: forwards;
}
.help {
width: 21px;
height: 21px;
position: relative;
top: 9px;
}
.children-2 {
opacity: 0;
transition: opacity 1s;
}
.children-1 {
opacity: 1;
transition: opacity 1s;
}
.show1 {
opacity: 1;
}
.show2 {
opacity: 1;
}
.parent.expanded .children-1 {
animation: opacity-down 500ms lineal 0s 1;
animation-fill-mode: forwards;
display: none;
}
.parent.expanded .children-2 {
animation: opacity-up 500ms lineal 0s 1;
animation-fill-mode: forwards;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="children-1">
<img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png" />
</div>
<div class="children-2">
<p class="paragraph">
Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
</p>
</div>
</div>
<button class="toggle-btn">TOGGLE!</button>
Just need a scrolling set of divs, almost like a slide show! yet to find a solution, need a way to make the commented-out div be scroll-able by clicking somewhere on the page or and arrow image? is this possible without a page reload every "slide"? want it to slide into transition on click and able to go back "home"
HTML:
<div id="wrapper_home">
<div id="tey_home">
<div id="tey_button">
<img src="images/tey_logo-01.png" width="239" height="239" alt="tey_logo" />
</div>
</div>
<!--
<div id="afiw_home">
<div id="home_button"> <img src="images/home.png" width="52" height="52" alt="home" class="withfadeout"/> </div>
<div id="afiw_button">
<img src="images/afiw_logo-01.png" width="460" height="142" class="withfadein2"/>
</div>-->
</div>
</div>
CSS:
.withfadein{
opacity: 0;
-webkit-animation: load 20s linear forwards;
}
#-webkit-keyframes load{
from{opacity: 0;}
to{opacity: 1;}
}
.withfadein2{
opacity: 0;
-webkit-animation: load 10s linear forwards;
}
#-webkit-keyframes load{
from{opacity: 0;}
to{opacity: 1;}
}
.withfadeout {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.withfadeout:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
#wrapper_index {
height: 686px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
background-image: url(images/entry_image-01.png);
background-repeat: no-repeat;
position: relative;
}
#enter_button {
width: 140px;
position: absolute;
left: 434px;
top: 501px;
}
#wrapper_home {
height: 686px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
position: relative;
}
#afiw_home {
background-image: url(images/afiw.png);
background-repeat: no-repeat;
height: 686px;
width: 1024px;
position: relative;
}
#afiw_button {
height: 142px;
width: 460px;
position: absolute;
left: 276px;
top: 275px;
}
#home_button {
height: 52px;
width: 52px;
padding-top: 50px;
padding-left: 50px;
}
#tey_home {
background-image: url(images/tey-01.png);
background-repeat: no-repeat;
height: 686px;
width: 1024px;
position: relative;
}
#tey_home #tey_button {
position: absolute;
height: 239px;
width: 239px;
left: 399px;
top: 222px;
}
thank you so much for any help
You should use jquery:
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
This catch a 'click' event, but you can change it as you wish
use the .animate in jquery
var target = $("Target Div")
$("Div to fly").animate({'top': target.offset().top,
'left':target.offset().left}, 1000);