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);
Related
I position a container absolute to the page. In this container there is a span that I need to position absolute to the page as well, because I want to hide it if it overflows the parent container after it's moved.
It should look like this.
I can only hide the span, if it is a child and the parent has its overflow hidden. But then I can't position both absolute.
My current code looks like this:
.container {
overflow: hidden;
position: absolute;
width: 150px;
height: 50px;
background-color: black;
animation: move 2s ease-in-out alternate infinite;
}
.container span {
position: absolute;
left: 20px;
top: 20px;
color: white;
font-size: 16px;
}
#keyframes move {
0% {
top: 0;
}
100% {
top: 200px;
}
}
<div class="container">
<span>Text</span>
</div>
.container {
overflow: hidden;
position: absolute;
width: 150px;
height: 50px;
background-color: black;
animation: move 2s ease-in-out alternate infinite;
}
.container span {
position: absolute;
left: 20px;
top: 20px;
color: white;
font-size: 16px;
animation: move2 2s ease-in-out alternate infinite;
}
#keyframes move {
0% {
top: 0;
}
100% {
top: 200px;
}
}
#keyframes move2 {
0% {
top: 0;
}
100% {
top: -200px;
}
}
<div class="container">
<span>Text</span>
</div>
Use position:fixed with the child and consider clip-path instead of overflow to hide the overflow:
.container {
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
position: absolute;
width: 150px;
height: 50px;
background-color: black;
animation: move 2s ease-in-out alternate infinite;
}
.container span {
position: fixed;
left: 20px;
top: 20px;
color: white;
font-size: 16px;
}
#keyframes move {
0% {
top: 0;
}
100% {
top: 200px;
}
}
body {
background:blue;
}
<div class="container">
<span>Text</span>
</div>
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.
I work with animation in CSS, and I have animated clock, which are working using HTML and CSS.
But I want to control animation time using jQuery.
My code:
.face {
position: absolute;
top: 10%;
left: 69%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<div class="face">
<div class="hand"></div>
</div>
As u can see at this line:
animation: hourHand 3s linear infinite;
I have time animation 3s, but this values i wanna control by jQuery code.
For example, this 3s i want to change to 14s, or 5s, or 22s.
To amend the speed with jQuery you can create some logic which controls the animation-duration property. In the example below it adds some classes to change the setting:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.removeClass('slow').addClass('fast');
});
$('#slower').click(function() {
$hand.removeClass('fast').addClass('slow');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>
I want to define the time. For example now I have 3s, but from JS script I want to change this value
In this case you can use css() to set the value in JS directly:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.css('animation-duration', '1s');
});
$('#slower').click(function() {
$hand.css('animation-duration', '5s');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>
I'm trying to create a sidebar menu with animations and trying to do as much as possible with css only. If it's not possible, JS / JQuery is ok as well.
My problem is, I've got a <span></span> element with two background images and I wanna have different animation behaviours for them. The first one should rotate and increase it's size according to the span's size, the second one should NOT rotate and stay with the same size as before, but should only appear after the animation has finished.
Is it possible to have kompletely different animations on one element for each background image? If yes, how?
Here's my code so far:
The list is done with an unordered list, each <li></li> should contain one menu-item
<ul>
<li>
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</li>
<li><li>
</ul>
Some CSS for it with animation keyframes
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("hexagon.svg"), url("mars.png");
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
#keyframes menuAnimation {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
And a Fiddle
And that's how it should look like after the animation has finished (the planet image and link text should only be visible after the animation has finished)
Do you mean something like this?
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
position: relative;
}
.menu-item::before {
content: "";
background-color: green;
background-image: url("hexagon.svg"); /*added bg color because of the missing image*/
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left:0;
width: 30px;
height: 30px;
transition: all 0.5s ease;
}
.menu-item::after {
content: "";
background-color: red;
background-image: url("mars.png");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left:0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0s 0.5s ease;
}
.menu-item:hover::before {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
width: 50px;
height: 50px;
transform: rotate(210deg);
}
.menu-item:hover::after {
opacity: 1;
}
https://codepen.io/zothynine/pen/GQQdLp
And idea is to split the element into two element using a pseudo element and then you can animate both of them separately and simultaneously:
body {
background: black;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("https://openclipart.org/image/2400px/svg_to_png/247374/Mars.png");
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
.menu-item:before {
content:"";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index:1;
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ4NS42ODggNDg1LjY4OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg1LjY4OCA0ODUuNjg4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTM2NC4yNjksNDUzLjE1NUgxMjEuNDE2TDAsMjQyLjg0NEwxMjEuNDE2LDMyLjUzM2gyNDIuODUzbDEyMS40MTksMjEwLjMxMkwzNjQuMjY5LDQ1My4xNTV6IE0xMzEuOTA1LDQzNC45OTdoMjIxLjg3OCAgICBsMTEwLjkzOS0xOTIuMTUyTDM1My43ODMsNTAuNjkxSDEzMS45MDVMMjAuOTY2LDI0Mi44NDRMMTMxLjkwNSw0MzQuOTk3eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: anime1;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
.menu-item:hover::before {
animation-name: anime2;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#keyframes anime1 {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
#keyframes anime2 {
from {
transform: rotate(0deg);
opacity:0;
}
to {
transform: rotate(-210deg);
opacity:1;
}
}
<div class="menu-item-wrapper">
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</div>
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/