I have found a neat animated css progress bar but am struggling extending what what it can do. I have it so that I have an animated progress bar but I want to be able to show the actual percentage once the animated bar has completed - to the right of the bar.
Be grateful for any help
CSS
.progress_bar
{
height: 15px;
background: orange;
width: 0%;
-moz-transition: all 4s ease;
-moz-transition-delay: 1s;
-webkit-transition: all 4s ease;
-webkit-transition-delay: 1s;
transition: all 4s ease;
transition-delay: 1s;
}
HTML
<div id="progressBar" class="progress_bar"></div>
JavaScript
// Assign your element ID to a variable.
var progress = document.getElementById("progressBar");
// Pause the animation for 100 so we can animate from 0 to x%
setTimeout(
function(){
progress.style.width = "100%";
// PHP Version:
// progress.style.width = <?php echo round($percentage150,2); ?>+"%";
progress.style.backgroundColor = "green";
}
,100);
I suggest you to insert a hidden element with the percent and show it once the transition is done.
What do you think of this solution ?
// Assign your element ID to a variable.
var progress = document.getElementById("progressBar");
var percent = progress.getElementsByClassName("percent")[0];
// Pause the animation for 100 so we can animate from 0 to x%
setTimeout(
function() {
progress.style.width = "100%";
// PHP Version:
// progress.style.width = <?php echo round($percentage150,2); ?>+"%";
progress.style.backgroundColor = "green";
setTimeout(function() {
percent.style.display = "block";
}, 4100);
}, 100);
.progress_bar {
height: 15px;
background: orange;
width: 0%;
-moz-transition: all 4s ease;
-moz-transition-delay: 1s;
-webkit-transition: all 4s ease;
-webkit-transition-delay: 1s;
transition: all 4s ease;
transition-delay: 1s;
text-align: center;
}
.progress_bar .percent {
display: none;
}
<div id="progressBar" class="progress_bar"><span class="percent">100%</span></div>
You could give a delay on color from transparent to black via rgba()
here a codepen to play with : http://codepen.io/anon/pen/QwRRGG
// Assign your element ID to a variable.
var progress = document.getElementById("progressBar");
// Pause the animation for 100 so we can animate from 0 to x%
setTimeout(
function() {
progress.style.width = "100%";
// PHP Version:
// progress.style.width = <?php echo round($percentage150,2); ?>+"%";
progress.style.backgroundColor = "green";
progress.style.color = "rgba(0,0,0,1)";
}, 100);
.progress_bar {
height: 15px;
background: orange;
width: 0%;
-moz-transition: background-color 4s ease, width 4s ease , color 0s 4s;
-webkit-transition: background-color 4s ease, width 4s ease , color 0s 4s;
transition: background-color 4s ease, width 4s ease , color 0s 4s;
color:rgba(0,0,0,0);
text-align:right
}
<div id="progressBar" class="progress_bar">100%</div>
Related
I've made a dice roller, implementing the code I wrote here.
I added it to a shortcut function in wordpress functions.php , and was all working fine. Just checked it again, and it works perfectly on one page (scroll to the bottom), but doesn't on another, and I've got no idea why!
Any thoughts?
HTML:
<div class="dicerollingwrapper">
<div class="dicebox dicetransform">
<svg id="dicesvg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style> .dicetextsecond {font: 70px serif; fill: white; fill-opacity:0;}
.dicetextfirst {font: 70px serif; fill: white;}
</style>
<path class="dicetospin" d="M38.8,-69C44.4,-64,38.9,-41.6,40.7,-27.2C42.6,-12.8,51.8,-6.4,52.6,0.5C53.4,7.3,45.7,14.6,39,20.7C32.3,26.7,26.6,31.5,20.3,38.2C14,45,7,53.6,0.2,53.2C-6.5,52.9,-13.1,43.4,-21.5,37.9C-30,32.4,-40.4,30.9,-45.6,25.2C-50.8,19.6,-50.9,9.8,-48.4,1.4C-45.8,-6.9,-40.8,-13.8,-37.7,-23C-34.5,-32.2,-33.2,-43.8,-27.3,-48.5C-21.3,-53.3,-10.7,-51.2,3,-56.4C16.6,-61.6,33.2,-73.9,38.8,-69Z" transform="translate(100,100)" />
<text x="50%" y ="60%" text-anchor="middle" class="dicetextsecond">13</text>
<text x="50%" y ="60%" text-anchor="middle" class="dicetextfirst">?</text>
</svg>
</div>
CSS:
.dicebox {
/* background-color: #ff8D9B; */
height: 300px;
width: 300px;
}
.dicetransform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.dicetransform-active {
animation-name: rotate;
animation-duration: 4s;
animation-fill-mode: forwards;
}
#keyframes rotate {
100% {transform:rotate(4320deg); }
}
.dicetexttransform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.dicetexttransform1-active {
animation: hidecolor 4s forwards;
}
#keyframes hidecolor {
0% { fill: white; }
100% {fill-opacity:0;}
}
.dicetexttransform2-active {
animation: showcolor 4s forwards;
}
#keyframes showcolor {
0% {fill-opacity:0;}
100% {fill-opacity:1;fill: white;}
}
#dicebutton {width:300px; height:50px; background-color:#ff8888; font-size: 24px; border:none; border-radius: 15px;transition-duration: 0.4s; font-weight:bold;}
#dicebutton:hover {background-color:#000; color:#ff8888}
JS:
$("#dicebutton").click(function() {
$('.dicetransform').toggleClass('dicetransform-active');
// generate random
let x = Math.floor((Math.random() * 13) + 1);
//find SVG elements
var numberdiceSVG = document.querySelector('#dicesvg .dicetextsecond');
var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
//set number
numberdiceSVG.textContent = x;
// reset if animated already done
if(numberdiceSVG.getAttribute('class') === "dicetextsecond dicetexttransform dicetexttransform2-active") {
numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform');
hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform');
}
else {
hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform dicetexttransform1-active');
numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform dicetexttransform2-active');
}
var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
});
On your second page you have the same element with the same id twice on the page:
<input type="button" id="dicebutton" value="Roll a d13!"></input>
Both have the same id: dicebutton.
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
If you want the input multiple times on the page use different id's for each one: eg: dicebutton1 and dicebutton2 and then add the event handler:
$("#dicebutton1, #dicebutton2").click(function()
Of assign the input a class "dicebutton" instead. And add the event handler like this:
$(".dicebutton1").click(function()
I am trying with jQuery or js to get an image rotate left to right constantly after upload (no button).
Try this hope it will be helpful.
const img = document.getElementsByTagName("img")[0]
img.addEventListener("load", function(){
img.classList.remove('rotateRight');
img.classList.add('rotateLeft');
});
img{
heigth :200px;
width : 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ;
}
.rotateRight{
transform: rotate(-40deg);
}
.rotateLeft{
transform: rotate(40deg);
}
<div>
<img class ="rotateRight" src='https://www.w3schools.com/w3css/img_fjords.jpg'/>
</div>
I have an animation using JQuery and CSS for sliding divs into view.
This is my javascript code:
(function($) {
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
$(window).scroll(function(event) {
$(".slide-up").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-up");
}
});
});
$(document).ready(function() {
$(".heading-slide-down").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-down");
}
});
});
$(window).scroll(function(event) {
$(".slide-left").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-left");
}
});
});
$(window).scroll(function(event) {
$(".slide-right").each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-right");
}
});
});
And this is my CSS
/** FADE IN SLIDING FROM BOTTOM TO TOP **/
.come-up {
transform: translateY(150px);
animation: comeup 0.8s ease forwards;
}
.come-up:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeup {
to { transform: translateY(0); }
}
/** FADE IN SLIDING FROM TOP TO BOTTOM **/
.come-down {
transform: translateY(-100px);
animation: comedown 0.8s ease forwards;
}
.come-down:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comedown {
to { transform: translateY(0); }
}
/** FADE IN SLIDING FROM RIGHT TO LEFT **/
.come-left {
transform: translateX(100px);
animation: comeleft 0.8s ease forwards;
}
.come-left:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeleft {
to { transform: translateX(0); }
}
/** FADE IN SLIDING FROM LEFT TO RIGHT **/
.come-right {
transform: translateX(-100px);
animation: comeright 0.8s ease forwards;
}
.come-right:nth-child(odd) {
animation-duration: 0.6s;
}
#keyframes comeright {
to { transform: translateX(0); }
}
With my divs that need sliding I just apply the classes slide-up or slide-left etc.
Live demo: http://www.shivampaw.com
On my laptop it works fine, however on my phone (iPhone) the divs are already in the correct position and as I scroll towards them I see them transform away and then animate to where they should be.
I'm not sure how else I can explain this, if possible try and take a look for yourself and just scroll down the site slowly and you will see it.
How come this is happening and is there a fix?
Thanks!
Update:
The problem is that on mobile safari on an iPhone SE latest iOS the divs that should be starting positioned downwards so they can slide up into place are starting in the right place and then moving down and sliding backup when they are in view.
I'm experiencing the exact same issue.
The problem seems to be that on mobile devices, .visible() only becomes true some time AFTER the element has entered the screen (rather than EXACTLY when it enters the screen), making the element visible to you already before the animation is played.
I quick-fixed this by giving the elements an opacity of 0 and changing this only when the animation plays.
You would have to add this to your CSS:
.slide-up, .heading-slide-down, .slide-left, .slide-right {
opacity:0;
}
.come-up, .come-down, .come-left, .come-right {
opacity:1;
-webkit-transition: opacity 0.8s ease-in;
-moz-transition: opacity 0.8s ease-in;
-o-transition: opacity 0.8s ease-in;
-ms-transition: opacity 0.8s ease-in;
transition: opacity 0.8s ease-in;
}
.come-up:nth-child(odd), .come-down:nth-child(odd), .come-left:nth-child(odd), .come-right:nth-child(odd) {
opacity:1;
-webkit-transition: opacity 0.6s ease-in;
-moz-transition: opacity 0.6s ease-in;
-o-transition: opacity 0.6s ease-in;
-ms-transition: opacity 0.6s ease-in;
transition: opacity 0.6s ease-in;
}
To make sure these animations aren't played on items that are already in view when the page loads, you could add this to your jQuery:
$(".slide-up, .slide-left, .slide-right").each(function() {
if ($(this).visible(true)) {
$(this).addClass("already-visible");
}
});
And at the bottom of your CSS:
.already-visible {
opacity:1;
transform: translateY(0);
transform: translateX(0);
animation: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
I need to add some nice transition fade effect to the change of the following simple sideshow:
var images = [
"http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
"http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
"https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg",
"http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
"http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
"http://magic-spells-and-potions.com/images/flower-language-vertical.png",
];
var i = 0;
var div;
$(function() {
div = $('.header_summer');
console.log("loaded");
setTimeout(changeBack, 1000);
});
function changeBack() {
i = ++i % images.length;
if (i > images.length) {
i = 0;
}
console.log('url("' + images[i] + '");');
// div.css('background-image', "url('" + images[i] + "')");
// preload image check
//
$('<img/>').attr('src', images[i]).load(function()
{
$(this).remove();
$('.header_summer').css('background', 'url("' + images[i] +'") no-repeat 0px 0px');
});
//
setTimeout(changeBack, 5000);
}
.header_summer {
background: url('../tpl/mblmhv1/images/summer_cover1.jpg') no-repeat 0px 0px;
background-size: cover;
min-height:920px; /* 800px; */
/* TRANSISITION - not qorking here
transition(background-image 0.5s ease-in-out);
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
*/
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class='header_summer'></div>
I have tried appending .fadeIn() to the jquery line that changes the image, and transition effects in the CSS - what am I missing?
Try this:
.header_summer {
background: url('../tpl/mblmhv1/images/summer_cover1.jpg') no-repeat 0px 0px;
background-size: cover;
min-height:920px; /* 800px; */
transition: background-image 0.2s ease-in-out;
}
It should work with just the transition property defined on your CSS class as any changes to the element should trigger the transition (i.e. when you update the background, you should see the transition):
.header_summer {
background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px;
background-size: cover;
min-height: 920px;
/* Transitions and their cross-browser friends */
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
The syntax generally uses the form <property> <duration> <timing-function> <delay>, so your current transition would be looking for the opacity property to change, which it doesn't seem to be.
You should consider using background instead :
transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
Example
.header_summer {
background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px;
background-size: cover;
min-height: 920px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flowers and stuff...</title>
</head>
<body>
<!-- Your element to switch through -->
<div class='header_summer'></div>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
// Define your images
var images = [
"http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
"http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
"https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg",
"http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
"http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
"http://magic-spells-and-potions.com/images/flower-language-vertical.png",
];
// Define your variables
var i = 0;
var div;
$(function() {
// Set up your div
div = $('.header_summer');
console.log("loaded");
setTimeout(changeBack, 1000);
});
function changeBack() {
i = ++i % images.length;
if (i > images.length) {
i = 0;
}
console.log('url("' + images[i] + '");');
div.css('background-image', "url('" + images[i] + "')");
setTimeout(changeBack, 5000);
}
</script>
</body>
</html>
I have a working background slideshow, but the images immidiately begin to fadeout after the fadein effect is complete. I want there to be a gap inbetween pictures where they are not fading in or out. Here's my code:
The html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="slideshow">
<div id="slideshow"></div>
</div>
The css:
.slideshow {
background: #000;
display:block;
width:inherit;
height:inherit;
}
#slideshow {
width: 100%;
height: 100%;
display: block;
opacity: 0.0;
background-color: #000;
background-image: url("http://lorempixel.com/400/400/cats/?1"),
url("http://lorempixel.com/400/400/animals/?2"),
url("http://lorempixel.com/400/400/nature/?3"),
url("http://lorempixel.com/400/400/technics/?4"),
url("http://lorempixel.com/400/400/city/?5");
background-size: cover, 0px, 0px, 0px;
-webkit-transition: background-image 3000ms linear;
-moz-transition: background-image 3000ms linear;
-ms-transition: background-image 3000ms linear;
-o-transition: background-image 3000ms linear;
transition: background-image 3000ms linear;
}
Here's my js:
$(function() {
$.fx.interval = -6000;
(function cycleBgImage(elem, bgimg) {
elem.css("backgroundImage", bgimg).delay(1000, "fx")
.fadeTo(3000, 1, "linear", function() {
$(this).fadeTo(3000, 0, "linear", function() {
var img = $(this).css("backgroundImage").split(","),
bgimg = img.concat(img[0]).splice(1).join(",");
cycleBgImage(elem, bgimg);
});
});
}($("#slideshow")));
});
Any help with making a stoptime between images would be appreciated. Thanks
Change your delay : elem.css("backgroundImage", bgimg).delay(1000, "fx")
Example; change 1000 in 3000 then the image will stay for 3 seconds