Currently I have different audio files displayed using tables in html5 and css. In each cell with the audio file is text which has artist information etc. What I want to happen is the text to scroll within the cell only when that particular audio file is playing. Right now I can make the text scroll using the marquee feature but I can't figure out how to make it only scroll when only that audio file is playing.
Note: That marquee is deprecated...
But to solve this specific problem if it's going to be executed in a supported browsers
See snippet
marq = document.getElementById("marq");;
marq.style.opacity = "0";
aud = document.getElementById("aud");;
aud.onplay = function() {
marq.style.display = "auto";
marq.start();
marq.style.opacity = "1";
}
aud.onpause = function() {
marq.stop();
}
<td>
<center>
<img src="images/artists/Becca.png" width="110" heigth="110">
<marquee id="marq" behavior="" direction="left">Becca - Trap (J Paul Mix)</marquee>
<audio controls id="aud">
<source src="http://mp3-pesni.org/music/3dc9ed0908d29016e2d41e8abb0a31fd.mp3" type="audio/mp3">
<p>Your browser doesn't support HTML5 audio. Here is alink to the audioinstead.</p>
</audio>
</center>
</td>
Nevertheless, I advise that you use css3 animation to mimic that marquee tag
See snippet below
var title = document.getElementById("title");
aud = document.getElementById("aud");;
aud.onplay = function() {
title.classList.remove('stop');
title.classList.add('running');
}
aud.onpause = function() {
title.classList.remove('running');
title.classList.add('stop');
}
#-webkit-keyframes anime {
0% {
right: 0%;
}
100% {
right: -100%;
}
}
#-moz-keyframes anime {
0% {
right: 0%;
}
100% {
right: -100%;
}
}
#-o-keyframes anime {
0% {
right: 0%;
}
100% {
right: -100%;
}
}
#keyframes anime {
0% {
right: 0%;
}
100% {
right: -100%;
}
}
#marq {
border: solid black 1px;
;
overflow: hidden;
text-align: left;
}
#title {
position: relative;
animation-name: anime;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
display: inline-block;
right: 0%;
opacity: 0;
color: green;
}
.stop {
animation-play-state: paused;
opacity: 1 !important;
}
.running {
animation-play-state: running;
opacity: 1 !important;
}
<td>
<center>
<img src="images/artists/Becca.png" width="110" heigth="110">
<div id="marq">
<div id="title">
Song 1
</div>
</div>
<audio controls id="aud">
<source src="http://mp3-pesni.org/music/3dc9ed0908d29016e2d41e8abb0a31fd.mp3" type="audio/mp3">
<p>Your browser doesn't support HTML5 audio. Here is alink to the audioinstead.</p>
</audio>
</center>
</td>
Related
I have created an animation for an element on my page and it always runs when the page is refreshed but i would like the animation to play when an element is clicked. How would i go about doing this?
CSS:
#login-or-signup-selection {
display: flex;
animation-name: test;
animation-duration: 5s;
position: relative;
height: 70%;
}
#keyframes test {
0% {top: 0px;}
50% {top:300px}
100% {top: 0;}
}
HTML:
<p id="clickMe">Element to click</p>
$('#clickMe').click(function () {
$(this).addClass('login-or-signup-selection');
$(this).on("animationend", function(event) {
$(this).removeClass('login-or-signup-selection')
});
});
.login-or-signup-selection {
display: flex;
animation-name: test;
animation-duration: 5s;
position: relative;
height: 70%;
}
#keyframes test {
0% {top: 0px;}
50% {top:300px}
100% {top: 0;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="clickMe">Element to click</p>
If you want only css and don't even care about js onclick events for now,
use the :active pseudo selector.
The only downside is that it only plays while (=during) e.g. the mouse button is down.
You would need some JavaScript for this.
First off, separate the CSS animation properties, and anything else related to your animation, and add them to their own class.
Next up, the JavaScript. You'll want to add an event listener to your element to add the animation class when clicked, and a timeout to remove the class afterwards so it will animate when clicked again.
const yourElement = document.getElementById('clickMe');
yourElement.addEventListener('click', _=> {
yourElement.classList.add('animation-class');
setTimeout(
_=> yourElement.classList.remove('animation-class'),
5000
)
});
#clickMe {
display: flex;
position: relative;
height: 70%;
}
.animation-class {
animation-name: test;
animation-duration: 5s;
}
#keyframes test {
0% { top: 0px; }
50% { top: 300px; }
100% { top: 0; }
}
<p id="clickMe">Element to click</p>
You need JavaScript for this.
If you add an event listener on the p element to listen for a click, this can then add the animation name to the selection div.
But you need to also listen for the end of the animation, otherwise subsequent clicks will have no effect. On animation end this snippet removes the animation name.
Note also that in order to be absolutely sure that the first (onload) animation end is trapped, the first animation name is not set until the event listeners have been set up.
function init() {
const clickMe = document.querySelector('#clickMe');
const selection = document.querySelector('#login-or-signup-selection');
clickMe.addEventListener('click', function() {
selection.style.animationName = 'test';
});
selection.addEventListener('animationend', function() {
selection.style.animationName = '';
});
selection.style.animationName = 'test';
}
window.onload = init;
#login-or-signup-selection {
display: flex;
animation-duration: 5s;
animation-iteration-count: 1;
position: relative;
height: 70%;
}
#keyframes test {
0% {
top: 0px;
}
50% {
top: 300px
}
100% {
top: 0;
}
}
<p id="clickMe">Element to click</p>
<div id="login-or-signup-selection">Login or signup selection</div>
I've been trying to find a solution for a while now but none seem to work.
The issue I am having happens when navigating to any and all the pages on the site- it's very annoying.
While I would expect that site images take time to load, this loading affects my navigation bar and the loading of my site's logo. For the time that it takes each page to load, my site's logo is completely absent- this causes my navigation bar to be shifted all the way up until the logo appears. This usually takes about a split second but it's also completely dependent on the user's internet connection).
How do I prevent this from happening? This causes my entire site to "bounce" when navigating, with all the content being shifted up for a brief moment while the logo is absent.
Give your image tag an absolute height attribute. This will make the browser keep the img tag the height it should be and allow the elements to load in the proper place.
You can also try tweaking a loader to have the page load only when all of the elements in the page have loaded. Something as simple as this:
<!DOCTYPE html>
<html>
<head>
<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>
With some modification, can help the UI experience!
Source: W3 Schools
Hope it helps!
I have an animation where a div slides out the view, however when the animation is completed, the div just returns to its origin position in the view. How do I totally remove the div or hide it after the animation ends using just CSS?
Here is the markup:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
and the css:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-image: url(../pics/red.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: slide 5s linear 1;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
overflow: hidden;
visibility: hidden;
}
}
I don't want it to fade out over the duration of the animation, i just want it to disappear once it hits 100% in the keyframe. Thanks ahead of time!
Use the animation-fill-mode option. Set it to forwards and the animation ends at it's final state and stay like that.
Altered based upon comments Set opacity fade to just last 1% of animation... simplified keyframes. Added a jquery option to literally remove the div from the DOM. CSS alone won't alter the markup, where jQuery will.
Although you can't animate the display property. If you want the div totally gone, after the opacity fades to zero, you can then add the display property to remove the div. If you don't wait for opacity to end, the div will just vanish without any transition.
/*
This jquery is added to really remove
the div. But it'll essentially be
VISUALLY gone at the end of the
animation. You can not use, or
delete the jquery, and you really
won't see any difference unless
you inspect the DOM after the animation.
This function is bound to animation
and will fire when animation ends.
No need to "guess" at timeout settings.
This REMOVES the div opposed to merely
setting it's style to display: none;
*/
$('.slide-box').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e) { $(this).remove(); });
.slide-box {
display: block;
position: relative;
left: 0%;
opacity: 1;
width: 100px;
height: 100px;
background: #a00;
animation: slide 1s 1 linear forwards;
/*
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
*/
}
#keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
#-webkit-keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slide-box" id="slide-box"></div>
</div>
animation: slide 5s linear forwards;
at 100%
opacity: 0;
display: none;
Try this.
Working fiddle: https://jsfiddle.net/jbtfdjyy/1/
UPDATE: JS mani
var slideBox = document.getElementById('slide-box');
setTimeout(function(){
slideBox.style.display = 'none';
}, 5000);
Try this. https://jsfiddle.net/jbtfdjyy/2/
Add something at 99% or so to your keyframes, and set opacity to 1 in that. If you have opacity: 1 at the start, then it will stay that way until 99%. Only at 100% will it change.
It's not technically fired at 100%. If you want that, I'd recommend using some JavaScript here, but this will at least give the illusion you want.
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
99% {
opacity: 1;
}
100% {
left: 100%;
overflow: hidden;
opacity: 0;
display: none;
visibility: hidden;
}
}
UPDATE:
As per your request, here is a JavaScript version. Keep in mind, there are endless ways to accomplish such a task. I am using vanilla JS (no jQuery, etc.), and using ES6 syntax.
What we do here is set a timeout, and at the end of that timeout I broadcast an event animation_end. That event listener will handle the end of the animation (in this case, it adds a class which will handle the fading out). This is much more granular than you need it to be, you could simply do the adding of the class within the setTimeout, but I think it is slightly better this way as you can abstract you can do other things with events such as animation start, etc.
Here is the fiddle: https://jsfiddle.net/vmyzyd6p/
HTML:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
CSS:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
animation: slide 3s linear 1;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.animationEnd {
opacity: 0;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
}
}
JavaScript:
// Create a function that handles the `animation_end` event
const animationEnd = () => {
// Grab the slidebox element
let slideBox = document.getElementById('slide-box');
// Get the class of the slidebox element
let slideClass = slideBox.getAttribute('class');
// Add the animation end class appended to the previous class
slideBox.setAttribute('class', slideClass + ' animationEnd');
};
// Create the animation end event
let animationEndEvent = new Event('animation_end');
// Cross browser implementation of adding the event listener
if (document.addEventListener) {
document.addEventListener('animation_end', animationEnd, false);
} else {
document.attachEvent('animation_end', animationEnd);
}
// Set the timeout with the same duration as the animation.
setTimeout(() => {
// Broadcast the animation end event
document.dispatchEvent(animationEndEvent);
}, 3000);
I'm building a small website and would like to get the text (and an image when I add one) to fade in when someone accesses the website?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: lightgrey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<style>
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Our Routes</li>
<li>Contact</li>
<li>About</li>
</ul>
<img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
<h1 align="center"> HOME </h1>
<p class="one" , align="center"> Text Goes here
</p>
</body>
</html>
http://codepen.io/JTBennett/pen/GorVRL [your site w/ fade and motion]
http://codepen.io/JTBennett/pen/BjpXRo [example of the following instructions]
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
The effect can be achieved with jQuery much quicker, as you can see in one of the other answers here.
After you've learned to do it by hand, I suggest playing around with this CSS3 animation generator if you want to save a bit of time:
http://cssanimate.com/
Just make sure you understand it first though.
Lastly, this is an example of jQuery performing similar functions (though using SVGs instead of divs this time, same process though):
http://codepen.io/JTBennett/pen/YwpBaQ
I don't know what element you have but you can do a few things.
If you are using javascript, or jquery you can make an element fade in easily.
Jquery:
$(document).ready(function(){
$('.myItemClass').fadeIn();
});
You can also do it with just CSS
CSS:
/* The animation code */
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.myClass {
animation-name: example;
animation-duration: 1s;
}
You can fade in elements when the document loads by loading the page with the elements hidden (opacity : 0;) in CSS. Then on document ready you can remove the class, so long as it has a transition for that css property—you'll have an effect.
CSS
div {
transition: opacity 2s;
opacity: 1;
}
.hidden {
opacity: 0;
}
JS
$(document).ready(function(){
$('.hidden').removeClass('hidden');
});
It is very simple don't need even jqyery, pure CSS and pure Javascript.
CSS
body {
opacity:0;
transition: 300ms opacity;
}
Javascript
function pageLoaded() {
document.querySelector("body").style.opacity = 1;
}
window.onload = pageLoaded;
I set marquee tag with an image. But after marquee tag image disappeared. Its not moving. When i remove marquee, image appears.
<div style="margin-top:300px; z-index:100; position:absolute;">
<marquee direction="top" style="margin-top:300px; z-index:1000;
position:absolute;">
<img src="images/cw.jpg" alt=""></marquee>
</div>
I want to marquee image. Please help
you can try this one:
<div style="margin-top:0px; z-index:100; ">
<marquee direction="top" style="margin-top:300px; z-index:1000;
position:absolute;">
<img src="images/cw.jpg" alt="" width="120" height="80" alt="Natural"></marquee>
</div>
Remove position:absolute;
DEMO HERE
OR
DEMO
give styling to div or img and not marquee... and if you want to change image automatically ... You need to change the src content of image tag.. after a specific time interval.
like :
$(function() {
$('#myImage').attr('src', 'image2.gif');
});
if you want to stop the marquee ,.,.,. Run a function after a given interval of time ... in which write:
document.getElementById('Your_marquee_id').stop();
Here is a year 2015 version of the old marquee.
To control of long time the image should "scroll", you alter the animation: marquee 5s linear 3; property.
Now the image scroll time is set to 5 seconds, 3 times, equals 15 seconds and then it stops.
(text scroll time is set to 3 seconds, 5 times, equals 15 seconds)
.marquee {
background-color: #ddd;
width: 500px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
animation: marquee 3s linear 5;
}
.marqueeimg {
width: 500px;
margin: 0 auto;
overflow: hidden;
text-indent: 100%;
animation: marqueeimg 5s linear 3;
}
.marqueeimg:hover,
.marquee:hover {
animation-play-state: paused
}
#keyframes marquee {
0% { text-indent: 80%; }
100% { text-indent: -60%; }
}
#keyframes marqueeimg {
0% { text-indent: 100%; }
100% { text-indent: -70%; }
}
<p class="marquee">this is a simple marquee using css only tech</p>
<br />
<p class="marqueeimg"><img src="http://lorempixel.com/250/150/nature/" alt="image"/></p>