I have created shaking animation using wow.js. I want to pause that shake animation for sometime like 6s and restart the shake animation.How to achieve it? .I have provided snippet of shaking image
// Initialize wow
new WOW().init();
.course-img2 img{
width:30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div data-wow-delay="300ms" data-wow-iteration="infinite" data-wow-iteration="1s" data-wow-duration="0.60s" class="wow shake course-img2"> <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Logo"> </div>
Something like this? https://jsfiddle.net/wgdLxqrp/
Added an event listener on animation finish which, on finish, changes the value of data-wow-delay
Related
I'm just building a locally hosted website. I will have a number of pages, 1,2,3 etc. And I wanted to create a kind of a slideshow effect by cycling slowly through each page. Using http-equiv="refresh" on each page I can link from page 1 to 2, page 2 to 3, page 3 to 1 etc. Going full screen on the browser creates a lovely slideshow effect of the website.
I'm a low enough level, but I would like to be transition from one page to the other smoothly, either fade in fade out or whatever. Right now it's quite jumpy.
Anyway, is this something I can do using the current meta tag or should I use an alternative method?
I would prefer C# over Java if required.
<head>
<META HTTP-EQUIV="refresh" CONTENT="8;URL=/page1">
</head>enter code here
Should be possible like that's:
<html>
<head>
<style>
.container {
opacity: 0;
transition: opacity 1s;
}
.container-loaded {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<!-- All the content you want to fade-in here. -->
</div>
<script>
$(document).ready(function() {
$('.container').addClass('container-loaded');
});
</script>
</body>
</html>
Thanks to #d4rk_Devs answer for giving me inspiration. I went on a rambling foray through google and stackoverflow and came up with the following code which worked perfectly.
<iframe src="..."
onload="this.style.opacity = '1';"
style=" opacity: 0;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in-out;"
></iframe>
can be seen here Original Code
CSS
.body {
background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff);
background-size: 400% 400%;
background-repeat:no-repeat;
animation: gradient 35s ease infinite;
height: 100vh;
}
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="./listener.js" type="text/javascript"></script>
<body class="body">
<div id="container">
<title>Police 10 Codes</title>
<h1>LSPD Ten Codes</h1>
<img src="https://i.ibb.co/2vNZgd9/lspd-removebg-preview.png" alt="LSPD Image"style="width:150px;height:150px;">
<div class="dropdown">
<button class="dropbtn">Non-Serious</button>
<div class="dropdown-content">
10-1 Unable to Copy / Weak Signal
10-3 Stop Transmitting
10-4 Affirmative / Understood
10-7 Out of Service
10-8 In Service
10-12 Stand by
10-17 En-route to Scene
10-19 Return to Station/Location
10-20 Location
10-22 Disregard
10-23 Arrived at Scene
10-24 Assignment Complete
10-30 Traffic Stop
10-36 Correct Time
10-37 Suspicious Vehicle
10-40 Run Silent No Lights/Siren
10-53 Road Blocked
10-56 Intoxicated Pedestrian
10-58 Direct Traffic
10-59 Convoy / Escort
10-60 In the Area
10-61 Clear for Radio Traffic
10-74 Negative
10-77 ETA
10-68 Dispatch Information
10-92 Improper parking
</div>
</div>
<div class="dropdown2">
<button class="dropbtn2">Medium</button>
<div class="dropdown2-content">
10-0 Use Caution
10-10 Fight in Progress
10-25 Report in person
10-26 Detaining/Arresting Subject
10-29 Warrant Check
10-31 Crime in progress
10-50 Traffic Crash
10-55 DUI
10-57 Hit & Run
10-78 Requesting backup
10-80 Fire Alarm
10-94 Street Racing
10-96 Mental Patient
</div>
</div>
<div class="dropdown3">
<button class="dropbtn3">Serious</button>
<div class="dropdown3-content">
10-18 Urgent
10-32 Person with Gun
10-39 Run with Lights/Siren
10-67 Report of Death
10-80 Pursuit in Progress
10-82 Fire in Progress
10-89 Bomb Threat
10-90 Bank Alarm
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When I view this, the size of the .body class crops and adjusts. I have a #container id class added where I'm trying to have the full UI open/close. Currently the UI does it's job, only issue I'm having is the size of the .body class keeps adjusting. Would like the size to stay at what its currently set at, 400% 400% or just fit for full screen view. Any help is appreciated, thank you.
<div> cannot be outside of <body>. Body tag needs to come first, then the Div, All HTML elements should be inside <body>. Try setting body height like -
HTML,
body {
height: 100%;
}
OR -
html {
height: 100%;
}
body {
min-height: 100%;
}
Orignal answer at stackoverflow - Make body have 100% of the browser height
It's because your html is invalid. All HTML elements must be children of the body but you have <div id="container"> as the body's parent. Kindly move it inside the body.
Try this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LSPD Ten Codes</title>
<link rel="stylesheet" href="style.css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="./listener.js" type="text/javascript"></script>
<style type="text/css">
.body {
background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff);
background-size: 400% 400%;
background-repeat:no-repeat;
animation: gradient 35s ease infinite;
height: 100vh;
}
</style>
</head>
<body class="body">
<div id="container">
<title>Police 10 Codes</title>
<h1>LSPD Ten Codes</h1>
<img src="https://i.ibb.co/2vNZgd9/lspd-removebg-preview.png" alt="LSPD Image"style="width:150px;height:150px;">
<div class="dropdown">
<button class="dropbtn">Non-Serious</button>
<div class="dropdown-content">
10-1 Unable to Copy / Weak Signal
10-3 Stop Transmitting
10-4 Affirmative / Understood
10-7 Out of Service
10-8 In Service
10-12 Stand by
10-17 En-route to Scene
10-19 Return to Station/Location
10-20 Location
10-22 Disregard
10-23 Arrived at Scene
10-24 Assignment Complete
10-30 Traffic Stop
10-36 Correct Time
10-37 Suspicious Vehicle
10-40 Run Silent No Lights/Siren
10-53 Road Blocked
10-56 Intoxicated Pedestrian
10-58 Direct Traffic
10-59 Convoy / Escort
10-60 In the Area
10-61 Clear for Radio Traffic
10-74 Negative
10-77 ETA
10-68 Dispatch Information
10-92 Improper parking
</div>
</div>
<div class="dropdown2">
<button class="dropbtn2">Medium</button>
<div class="dropdown2-content">
10-0 Use Caution
10-10 Fight in Progress
10-25 Report in person
10-26 Detaining/Arresting Subject
10-29 Warrant Check
10-31 Crime in progress
10-50 Traffic Crash
10-55 DUI
10-57 Hit & Run
10-78 Requesting backup
10-80 Fire Alarm
10-94 Street Racing
10-96 Mental Patient
</div>
</div>
<div class="dropdown3">
<button class="dropbtn3">Serious</button>
<div class="dropdown3-content">
10-18 Urgent
10-32 Person with Gun
10-39 Run with Lights/Siren
10-67 Report of Death
10-80 Pursuit in Progress
10-82 Fire in Progress
10-89 Bomb Threat
10-90 Bank Alarm
</div>
</div>
</div>
</body>
</html>
I'm trying to do my own notification compoment in my sample Angular application.
I have the following template:
<aside *ngFor="let message of messages ">
<div class="notification" style="position:fixed">
{{message.content}}
</div>
</aside>
I push new messages through service to the component, so when new message comes it is immidiately showed in above loop.
I would like to make every message visible for 3 seconds.
I need to add a class with fade out transition which is set to 3 seconds.
Use a keyframes structure.
#keyframes fadeout {
from {opacity:1;}
to {opacity:0;}
}
.notification {
animation: fadeout 3s
}
I am trying to use the tada animation from font awesome with a custom font I generated from fontastic. I have added the font-awesome-animation.min.css to the header of my WordPress theme file. I have also added this html code to my site (see the membership icon).
<a class="faa-parent animated-hover" href="#">
<div class="service-icon-container">
<div class="fa icon icon-membership faa-tada"></div>
</div>
<h3>Membership</h3>
<p>Membership info text</p>
</a>
Any suggestions on making it work?
You forgot to change the reference of hover class in css.
for your membership icon try adding following code:
a.faa-parent:hover .service-icon-container > .fa.icon {
-webkit-animation: tada 2s linear infinite;
animation: tada 2s linear infinite;}
for all other icons, add anchor tag as you added for membership.
I need to have scrolling images controlled by two arrows (scroll up and scroll down). I have a CSS "scrollUp" animation written as well as a "scrollDown" animation. How can I have these animations occur to the images when the arrows are clicked?
I think I need to have a "scrollUp" class and a "scrollDown" class applied to the images. but I am not sure how to make one arrow activate the "scrollUp" class animation and another activate the "scrollDown" animation.
I've seen people use links with href="#something" to activate an ID animation, but my images can't have multiple ID's so that will not work.
Any help would be greatly appreciated! If you know of any video tutorials that would be great too! I'm not opposed to using JavaScript but I'd prefer to use CSS.
EDIT: I basically need the following code to activate one image at a time, whenever a button is clicked:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web browsers</title>
<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
}
#header {
height: 256px;
width: 256px;
overflow: hidden;
border:1px solid gray;
}
.slider {
animation: myanimation 8s ease-in-out infinite alternate;
}
#keyframes myanimation
{
0% {transform:translateY(0px); }
25% {transform:translateY(-256px); }
50% {transform:translateY(-512px);}
75% {transform:translateY(-768px);}
100% {transform:translateY(-1024px);}
}
</style>
</head>
<body>
<div id="header">
<img class="slider" src="img1.png" width="256" height="256">
<img class="slider" src="img2.png" width="256" height="256">
<img class="slider" src="img3.png" width="256" height="256">
<img class="slider" src="img4.png" width="256" height="256" >
<img class="slider" src="img5.png" width="256" height="256">
</div>
</body>
</html>
It wouldn't be the best solution syntactically, but you could wrap the image scroller inside of an <input type="checkbox" id="scroll-up-control"> tag, then select against #scroll-up-control:checked to apply styles for scrolling up, with the default listed above for scrolling down.
I would use some simple javascript to just apply a class to the container with whether to scroll up or down though.
I was able to resolve this issue by changing the method I used to actually scroll the images. I decided to instead use an iFrame with a hidden scrollbar. Javascript allowed buttons to control the iFrame's scrolling. Thanks to all that helped out!