I'm trying to implement letter by letter animation on section with two slides. Currently I'm using jQuery code for that, but I'm afraid it's far from the ideal option.
Here's my code example: codepen
$.fn.animation = function () {
//get the welcome msg element
var $message = $(this);
//get a list of letters from the welcome text
var $getList = $(this).text().split("");
//clear the welcome text msg
$(this).text("");
//loop through the letters in the list array
$.each($getList, function(idx, element) {
//create a span for the letter and set opacity to 0
var newElement = $("<span/>").text(element).css({
opacity: 0
});
//append it to the welcome message
newElement.appendTo($message);
//set the delay on the animation for this element
newElement.delay(idx * 90);
//animate the opacity back to full 1
newElement.animate({
opacity: 1
}, 1100);
});
};
$('.introduction').animation();
$('.secondary').animation();
First problem is that I can't do, so the second sentence with class "secondary" runs only after first one is finished. I've tried to use .delay and setTimeout, but that doesn't help.
Also I'm not sure, how to start animation on second slide, when it's loaded.
I know there's plugins for that stuff, but I'd like to do that in vanilla JavaScript, or jQuery, css3.
Would be glad for any help.
And yeah, here's an example how I would like it to look - http://bootstrapart.net/influence/v1.5.3/
Is it possible to make, so the animation starts every time, when slide is changed?
Thanks.
Edited
Click here to see the whole code working.
Changes I made in css: I set the opacity of html text tags (<h1>,<h3> and <h4>) to 0, so they are hidden. Then in the animation function they are made visible again.
Changes I made in script: To start the second text animation with delay I used setTimeout() function:
setTimeout(function(){
$('.secondary').animation();
},2000);
To detect the slide event of carousel, according to Bootstrap Documentation you can use this method:
$('.carousel').on('slid.bs.carousel', function () {
// here is where you start the animation for the second slide
})
Re-Edit
To track on which slide we are I introduced a variable caled: var $wichSlide. Here is the working method to start the animation when slide is changed:
$('.carousel').bind('slid.bs.carousel', function (e) {
if($whichSlide == 1){
//set $whichSlide position for the next slide event
$whichSlide = 2
//start to animate the text
$('.introduction').animation();
setTimeout(function(){
$('.secondary').animation();
},2000);
/*set the text on the second slide to be invisible
* because we don't want it to appear before animation starts
*/
$('.slide2').css("opacity",0);
}else if($whichSlide == 2){
$whichSlide = 1;
$(".carousel").carousel("pause");
$(".slide2").animation();
setTimeout(function(){
$(".carousel").carousel();
},3000);
$('.introduction').css("opacity",0);
$('.secondary').css("opacity",0);
}
});
See the working code
Related
I'm trying to create a slider preview (3 pages). Each page is 80vw large and the box has overflow-x: hidden.
I'm able to slide each page by clicking on a bullet whit this code
function slideIntro (){
var slideLeft = $(this).data('slide'),
slidePerc = '-' + slideLeft + '%';
$('.pallino').removeClass('pallino-attivo');
$(this).toggleClass('pallino-attivo');
$('.page-slide-wrap').css('margin-left', slidePerc);
}
The problem is that I'd love to make it scroll on .mouseout() every 4 seconds what I tried to do is calculate each case and write the code but I'm sure that there is a shorter solution than this
function slideShow1 (){
$('.pallino').removeClass('pallino-attivo');
$('.page-slide-wrap').css('margin-left', '-100%');
$('.pallino').slice(1,2).addClass('pallino-attivo');
}
function slideShow2 (){
$('.pallino').removeClass('pallino-attivo');
$('.page-slide-wrap').css('margin-left', '-200%');
$('.pallino').last().addClass('pallino-attivo');
}
function slideShow3 (){
$('.pallino').removeClass('pallino-attivo');
$('.page-slide-wrap').css('margin-left', '0%');
$('.pallino').first().addClass('pallino-attivo');
}
function slideShow (){
setTimeout(slideShow1, 4000);
setTimeout(slideShow2, 8000);
setTimeout(slideShow3, 12000);
}
What I would like to do is add a rule able to stops the function when the mouse is over the gallery box .page-slide-wrap and cycle the whole function.
I forgot to say that the slides now move using margin-left as you can see in bot codes
PLEASE FEEL FREE TO TELL ME IF I AM NOT CLEAR ENOUGH
I'm trying to make a jQuery function that spells my name out letter by letter. My name is Jake, so I want it to start out with nothing, then it'll display a J, then Ja, then Jak, then Jake. Let's just say that I'm modifying a paragraph element with class name:
<p class=Name> *name gets 'typed' here* </p>
I've tried using the .delay() function and the setTimeout() function, but I'm new to jQuery so I'm probably using them wrong.
$(document).ready(function()
{
setTimeout(function(){$(".name").text('J');}, 500);
setTimeout(function(){$(".name").text('Ja');}, 500);
setTimeout(function(){$(".name").text('Jak');}, 500);
setTimeout(function(){$(".name").text('Jake');}, 500);
});
Here is a jfiddle of my most recent attempt:
http://jsfiddle.net/pg7Cu/
This just delays for 500 milliseconds then types my name all at once. I'm trying to get it to type one letter every 500 milliseconds. Can someone help me figure out how to do this?
Simply use a recursive function:
var name = "Jake";
function typeName(name, iteration) {
// Prevent our code executing if there are no letters left
if (iteration === name.length)
return;
setTimeout(function() {
// Set the name to the current text + the next character
// whilst incrementing the iteration variable
$('.name').text( $('.name').text() + name[iteration++] );
// Re-trigger our function
typeName(name, iteration);
}, 500);
}
// Call the function to begin the typing process
typeName(name, 0);
JSFiddle demo.
We can extend this slightly to remove the need for initially passing in the iteration variable by adding this as the first line in our typeName function:
var iteration = iteration || 0;
Now you can simply call:
typeName("My name here");
JSFiddle demo.
Actually You can do it also with css only, No need of javascript/jQuery.
HTML
<p class="text">Jack.</p>
CSS
.text
{
width: 30em;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}
#keyframes type{
from { width: 0; }
}
#-webkit-keyframes type{
from { width: 0; }
}
Demo
Here is a simple one:
http://jsfiddle.net/pg7Cu/7/
var text = "Hello what's up?";
function letter() {
var oldt = $(".name").text(); // grab old text
var t = text.charAt(0); // grab first text's letter
text = text.substr(1); // shorten the text
$(".name").text(oldt + t); // show old text + the one letter
// if there's anything left to type, continue.
if(text.length > 0) setTimeout(letter, 100);
}
$(document).ready(function()
{
setTimeout(letter, 100);
});
It sets a timeout for a letter, and when the letter is shown, if there is more, it sets the timeout again. Sort of recursion.
You're close. Start by incrementing the timeouts; as the timer starts running immediately:
setTimeout(function(){$(".name").text('J');}, 500);
setTimeout(function(){$(".name").text('Ja');}, 1000);
// etc
And don't set the differences in time exactly the same (as people don't hit a key every x ms constantly)
Check out a revised version: http://jsfiddle.net/pg7Cu/1/
And you could create more beautiful code etc. etc. but this works.
EDIT
Ok I took the challenge ;) Check out this Fiddle. You can call the function simulateTyping() with your own string, and at random intervals it will append the next character, until the whole string is on the screen. You could even create a plugin from it (by NOT hard-coding the element the text should be appended to).
function simulateTyping(myString, currentChar) {
var delay = Math.floor(Math.random()*(250-50+1)+50); // random between 50 and 250 milliseconds
currentChar = currentChar || 0;
setTimeout(function() {
$('.name').append(myString.charAt(currentChar))
if(++currentChar < myString.length) {
simulateTyping(myString, currentChar);
}
}, delay);
}
You can try with different timeouts:
setTimeout(function(){$(".name").text('J');}, 500);
setTimeout(function(){$(".name").text('Ja');}, 1000);
setTimeout(function(){$(".name").text('Jak');}, 1500);
setTimeout(function(){$(".name").text('Jake');}, 2000);
I have a piece of javascript code which listens for mouse over's and makes a div fade out and back in.
The problem i have is if the user mouse overs multiple times thus causing the logic of the function to do this:
mouse over¬
fade out
fade in [mouse over again] ¬
fade out
At which point i have both a fade out and a fade in occurring at the same time causing a weird flickering on the div. And I am not sure how to prevent it.
Working fiddle: http://jsfiddle.net/WgNuX/4/ move the mouse in an out of the div very quickly and it will flicker.
My code is as follows:
function check(){
var div_id = document.getElementById('my_div');
var opacity = window.getComputedStyle(div_id).opacity;
function fade_in(){
var opacity = window.getComputedStyle(div_id).opacity;
var direction =1 ; //fade in
transition_opacity(div_id,opacity,direction,0)
}
var direction = 0; //fade out first
transition_opacity(div_id,opacity,direction,fade_in)
}
var div_id = document.getElementById('my_div');
div_id.addEventListener('mouseover',check,false);
What can i do to prevent this from occuring ?
jsFiddle Demo
You should probably just use a flag to control the motion.
var busy = false;
function check(){
if( busy ) return;
busy = true;
...
function fade_in(){
var opacity = window.getComputedStyle(div_id).opacity;
var direction =1 ; //fade in
transition_opacity(div_id,opacity,direction,function(){busy=false;});
}
This will prevent the animation from starting until it has completed.
Store the state of the fade in in a global variable/hidden input field. 1 when it starts, zero when it stops. Don't run fade out if the variable is 1.
Hi im trying to achieve a "news slider" like the one you can see in yahoo.com... I almost have the 100% of the code.. (if you want to compare them here is my code http://jsfiddle.net/PcAwU/1/)
what is missing in my code , (forget about design) is that , In my slider you have to clic on each item, i tried to replace Onclick for Hover on the javascript, it worked, but the fisrt image on the gallery stop working, so when you just open the slider, you see a missing image.
Other point.. also very important, in yahoo.com after "x seconds" the slider goes to the next item, and so on ... all the Thumnails are gruped 4 by for 4, (in mine 5 by 5, thats ok) ... after pass all the 4 items, it go to the next bloc..
HOW CAN I ACHIEVE THAT!!. I really looked into the API, everything, really im lost, i hope someone can help me. cause im really lost in here.
Thanks
Here is the script
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });
$(".items img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("_t", "");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").click();
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
function toggle(el){
if(el.className!="play")
{
el.className="play";
el.src='images/play.png';
api.pause();
}
else if(el.className=="play")
{
el.className="pause";
el.src='images/pause.png';
api.play();
}
return false;
}
To fix the hover problem you need to make some quick changes: Change the click to a on(..) similar to just hover(..) just the new standard.
$(".items img").on("hover",function() {
....
Then You need to update the bottom click event to mouse over to simulate a hover effect. Trigger is a comman function to use to trigger some event.
}).filter(":first").trigger("mouseover");
jSFiddle: http://jsfiddle.net/PcAwU/2/
Now to have a play feature, you need a counter/ and a set interval like so:
var count = 1;
setInterval(function(){
count++; // add to the counter
if($(".items img").eq(count).length != 0){ // eq(.. select by index [0],[1]..
$(".items img").eq(count).trigger("mouseover");
} else count = 0; //reset counter
},1000);
This will go show new images every 1 second (1000 = 1sec), you can change this and manipulate it to your liking.
jSFiddle: http://jsfiddle.net/PcAwU/3/
If you want to hover the active image, you need to do so with the css() or the addClass() functions. But You have done this already, All we have to do is a simple css change:
.scrollable .active {
....
border-bottom:3px solid skyblue;
Here is the new update jSFilde: http://jsfiddle.net/PcAwU/4/
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow, set 4 seconds for each images
slideShow(2000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
</script>
Note: this is not my script, it came from John Rausch's site.
Update:
Yikes, I didn't realize it was going to format like that! Let me repost just a link to his site. Don't want to give anybody eyestrain http://jonraasch.com/blog/a-simple-jquery-slideshow
It works for me in IE. Try it out with this jsFiddle.. Not sure it's the best slideshow.
I would put the object property name and values in quotes, just to avoid any possible variable name clashes. So I would wirte
current.animate({"opacity": "0.0"}, 1000).removeClass('show');
and not ...({opacity: 0.0}, 1000)...
Also, don't use eval for you setTimeouts, just use a function reference or an anonymous function. So I would write:
var timer = setInterval(gallery,speed);
and not ... setInterval('gallery()',speed);
Not sure what your CSS positioning looks like, but it seems like that'd be tricky with this slideshow.
ie is a pain. Why don't try with ie tags?
http://www.quirksmode.org/css/condcom.html
It worked for me on CSS, sure it can work with JS.