Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have an image that I want to replace with another (same image, but brighter color) to grab the attention of the user to it when he clicks on a certain button, just so he knows that it's there. So I want to replace the original pic with the other twice, for 1 second each, seperated by 1 second as well.
In other words, the user is on the page, he clicks on the button, the original dark image changes to the bright image for 1 second, then back to the dark image for 1 second, then the bright image for one second, and last comes back to the original dark one.
so: original--> replace it (1 sec) --> original(1 sec) --> replace it (1 sec)--> original
I know I have to use javascript for it, but I am very weak in javascript. can someone give me the code for it? Thanks
The below is a rough idea of one possible implementation, easily improved...the benefit being you only need one image.
Demo Fiddle
HTML
<img src='http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg' />
<button id='button'>Start 1 second!</button>
CSS
img {
height:100px;
width:100px;
}
jQuery
var interval;
function isEven(n) {
return isNumber(n) && (n % 2 == 0);
}
function isNumber(n) {
return n === parseFloat(n);
}
$('#button').on('click', function () {
var src = $('img').attr('src');
var alt = 'http://www.online-image-editor.com/styles/2013/images/example_image.png';
$('img').attr('src', alt);
var count = 0;
interval = setInterval(function () {
count++;
if (count == 4) {
clearInterval(interval);
return false;
}
isEven(count) ? $('img').attr('src', alt) : $('img').attr('src', src);
}, 1000);
});
Dryden is correct but we can at least point you in the right direction.
See http://www.w3schools.com/jsref/met_win_settimeout.asp
Combine that with a onclick function and document.getElementById("imageid").src="../img/imgname.png";
Magic.
If you can't get it working with that, post the code you are using.
In CSS you can use animation and specifities of box-model while you alternate padding and height/width to show background or not of img tag .
DEMO
basic coding :
<img src="http://lorempixel.com/300/200/nature/9" />
img { background:url(http://lorempixel.com/300/200/nature/6);
animation : 2s infinite blink;
}
#keyframes blink {
0%, 24.9%,75.1% ,100% {
heigh:0;
width:0;
padding:100px 150px
}
25%, 75% {
height:200px;
width:300px;
padding:0 0;
}
}
Related
I know this is fairly easy in jQuery, but I want to do this in plain 'ol "will be around forever" javascript.
I have a dropdown select on my page. I choose one of 8 options. There is a default image showing on the page. When I select an option, the image changes to that pic. It all works fine.
But I want to make the image change a fade out, fade in switch over because I, like most of you, can't leave well alone. We have to keep fiddling.
The javascript that I have, which is triggered by an onchange="setPicture()" on the select dropdown is:
function setPicture(){
var img = document.getElementById("mySelectTag");
var value = img.options[img.selectedIndex].value;
document.getElementById("myImageDiv").src = value;
}
This works fine. The value of the selected index is a string with the path for each image. I just want a fade out then fade in stuck in there somewhere. I have fiddled about a bit, calling another function before changing the src but no luck.
Can someone point me in the right direction?
The easier way would be to use css keyframes alone.
But from javascript there is the web animation api made for that.
Here is a quick modif from the example, to match your case.
function setPicture(){
alice.animate(
[
{ opacity: 1 },
{ opacity: .1},
{ opacity: 1 }
], {
duration: 3000,
iterations: Infinity
}
)
}
<button onclick="setPicture()">
OPACITY ANIMATION
</button>
<img id="alice"
src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif"
>
</img>
How about setting the image default CSS with the opacity of 0 and with transition time
then in JavaScript just add a class that will make the opacity set to 1
HTML:
<img class="img1" src="sampleimg.jpg">
CSS:
.img1 {
opacity: 0;
transition: all .3s;
}
.img1.show {
opacity: 1;
}
JS:
function setPicture() {
var img = document.querySelector('.img1');
img.src = 'urlofnewimage';
img.classList.add('show');
}
Hope this helps.
Juste one function for all :
function fadeOutEffect(target) {
var fadeTarget = document.getElementById(target);
fadeTarget.style.opacity = 1;
fadeTarget.style.transition = "opacity 2s";
fadeTarget.style.opacity = 0;
setTimeout(function(){
fadeTarget.style.display = "none";
}, 2000);;
}
I have a image that is created to have 4 images in one See this image
Now, what I am trying to do is get the css to load just the first square at the top. Then when a user hovers over that image it will switch between all four images.
So it will display black on load, then when a user hovers over it, the image changes to red, then blue, then green, then back to black. It then repeats over and over until the mouse is moved off the image area.
I know that I can do this by converting the png to a gif but the image is generated outside of my control so this method is needed.
If anyone can help I will be forever grateful.
Cheers.
You should use CSS sprites and to make the change happend when over use setInterval function to change position ( here the height of each block of your image mesures 300px , so we incerement by +300 ) every defined interval time ,
Below snippet I've used .hover() jquery function to set and clear annimation .
var interval;
$(function(){
$("#image").hover(
function() {
var bottom = 0;
$this = $(this);
interval = setInterval(function() {
bottom >= 900 ? bottom = 0 : bottom+=300;
$this.css({'background-position' : '0px -'+bottom+'px'});
} , 1000)
},
function(){
$this.css({'background-position' : '0 0'})
clearInterval(interval);
}
);
});
#image {
width:150px;
height:150px;
background: url('https://i.stack.imgur.com/h8h14.png') 0 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image" ><div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Trying to replicate this awesome "Mouse over Escape" effect from the link below using simple jQuery: http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445
Any pointers or tips? See "Mouse over Escape" section in link above.
Here's a simple jQuery code I wrote:
// jQuery explode text by Aziz Natour
// CC BY 4.0 License
// http://creativecommons.org/licenses/by/4.0/
$('.explodeMe').each(function() {
var text = $(this).text();
$(this).html(text.replace(/./g, "<span>$&</span>"));
});
$('.explodeMe span').each(function() {
var min = -10, max = 10,
min2 = -30, max2 = 30,
random = Math.floor(Math.random() * (max - min + 1)) + min,
random2 = Math.floor(Math.random() * (max2 - min2 + 1)) + min2,
css = "top:"+random+"px; left:"+random2+"px",
el = $(this);
el.on({
mouseenter: function () {
el.attr("style", css);
},
mouseleave: function () {
setTimeout(function() {
el.removeAttr("style");
}, 300);
}
});
});
.explodeMe span {
position: relative;
transition: 0.3s .1s;
top:0;left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="explodeMe">I get nervous around cursors.</span>
Codepen demo: http://codepen.io/azizn/full/redbRa
The logic:
Wrap each textual character inside a <span> tag
Make the new span tags relatively positioned to manipulate their location without affecting layout flow.
Apply randomized CSS style to each span separately (for dynamic movement) on hover
Remove the style after a delay
The position change is animated using the CSS transition property.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have been searching how to accomplish the animation on this website using html/css/js/jquery: https://www.nobledesktop.com/certificates/web-design. In particular, I want to know how to achieve the highlighting then deleting effect of the animation, but I also want to know how to insert the next word one character at a time with a delay. This question has been asked before but did not achieve the last specification that I have mentioned above.
This is the thread I am referring to: Web animation css highlight
This is an image of the animation I'm talking about on http://www.nobledesktop.com/certificates/web-design.
http://pasteboard.co/2ywHhxGE.png
I have looked at the source code related to that span but I have no clue where to start past highlighting the text as answered in the aforementioned thread. Any help would be appreciated. Thanks!
I know it's a bit late and the jquery.typer.js library will probably be the best solution as explained by Marcos, but I have time on my hands right now and I tried to clone the behaviour from the link you are referring to with jQuery and CSS.
Here is my working demo.
I created recursive functions for the typing animation and word traversal, in tandem with CSS transitions for the highlight animation:
JS
function typify($elem, wordSec, charSec, highlightSec) {
var texts = $elem.data('type').split(',');
$elem.css({
transition: 'background-size ' + (highlightSec / 1000) + 's'
});
addByWord($elem, texts, 0, wordSec, charSec, highlightSec);
}
function addByWord($elem, texts, i, wordSec, charSec, highlightSec) {
if (i < texts.length) {
var text = texts[i],
duration = (text.length * charSec);
$elem.text('')
.addClass('reset')
.removeClass('highlight');
addByLetter($elem, texts[i], 0, charSec);
setTimeout(function () {
$elem.removeClass('reset')
.addClass('highlight');
}, duration + wordSec);
setTimeout(function () {
addByWord($elem, texts, ++i, wordSec, charSec, highlightSec);
}, duration + highlightSec + 300 + wordSec);
} else {
addByWord($elem, texts, 0, wordSec, charSec, highlightSec);
}
}
function addByLetter($elem, txt, i, sec) {
if (i < txt.length) {
var ch = txt.split('')[i];
$elem.text($elem.text() + ch);
setTimeout(function () {
addByLetter($elem, txt, ++i, sec);
}, sec);
}
}
typify($('.animation'), 1500, 105, 300);
CSS
.animation {
padding-bottom: 5px;
border-bottom: 5px solid #00a8e6;
box-sizing: content-box;
display: inline-block;
background: linear-gradient(to left, rgba(0, 20, 255, 0.5) 0%, rgba(0, 20, 255, 0.5) 100%) no-repeat top right;
background-size: 0% 100%;
}
.animation.highlight {
background-size: 100% 100%;
}
.animation.reset {
background: transparent;
background-size: 0% 100%;
}
The definition of parameters of the function, typify($elem, wordSec, charSec, highlightSec) below:
$elem - jQuery element you want to target (should have data-type with
values separated by strings.
wordSec - duration of each word to be shown on screen in milliseconds,
after being typed and before being highlighted
charSec - speed of typing animation per letter milliseconds
highlightSec - speed of CSS highlight animation in milliseconds
They accomplished it by using the jquery.typer.js library. You can take a look at that source and see how it's done.
But in the website you pointed, they have modified the plugin slightly. For instance, they added an option called highlightEverything, to avoid the default behavior of selecting only the text that changes between transitions.
I have a testimonials area on my website that fades from one testimonial to another. I'm having an issue where it will fade out too slowly before the next item fades in causing both to come up making a large div making it look ugly.
I want it to fade from one testimonial to another without jumping and flashing with both.
You can see an example here: http://ledragonvert.com/index_test.php
Here is my Javascript code:
function rotate_p() {
if (p_current == p_count) {
p_current = 1;
} else {
p_current++;
}
var $container = $('#container');
$container.find('p').fadeOut();
$container.find('p:nth-child(' + p_current + ')').fadeIn();
}
var p_count;
var p_current = 0;
var p_interval;
$(document).ready(function () {
rotate_p();
p_count = $('#container').find('p').length;
p_interval = setInterval(function () {rotate_p();}, 7000);
});
Thanks you very much for taking your time out to help me.
the solution is CSS based. since the position of the "p" element is static and you call both fadeOut and fadeIn, there is an overlap, as two p elements are inevitably shown together. To get them one on top of the other you need to use absolute positioning on the p element, like so:
#container {
position:relative;
}
#container>p {
position:absolute;
//use any values you wish, to set the testimonial relative to #container:
top:10px;
left:50px;
}