jQuery Domino Like Slider Plugin - javascript

I am looking a jQuery-based content slider plugin. I don't mean one like this (of which there are far too many) nor the jQueryUI slider. What I am looking for can best be described in a picture.
Is there a jQuery plugin which allows me to slide (or transition) certain elements off the viewport and slide new elements in its place? Ideally, I would like to be able to ease several elements off and back onto the page in (sort of a) series, rather than one after another. The ability to ease these elements, rather than slide them with a linear speed, would be awesome.
This picture is the best visual I could come up with:
I know I could develop a plugin, as I have done several before, but I would like to avoid reinventing the wheel, if possible. Can anyone suggest a plugin?
Thank you for your time.

If you're supporting CSS3, you could try doing something like this, albiet it may be better to build an animation class.
.item:nth-child(1)
{
transition-timing-function : ease-in-out;
transition-property : left;
transition-duration : 0.1s;
transition-delay : 0.35s;
}
item:nth-child(2)
{
transition-timing-function : ease-in-out;
transition-property : left;
transition-duration : 0.1s;
transition-delay : 0.55s;
}
.item:nth-child(3)
{
transition-timing-function : ease-in-out;
transition-property : left;
transition-duration : 0.1s;
transition-delay : 0.65s;
}
.item:nth-child(4)
{
transition-timing-function : ease-in-out;
transition-property : left;
transition-duration : 0.1s;
transition-delay : 0.75s;
}​
If you want to use jQuery, I've had some success with http://api.jquery.com/queue/ which would allow you to craft a more complex chained animation. For an unknown number of children you could use the slice() method.
I've changed this snippet of self-executing code found on http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/
(function hidenext(jq){
jq.eq(0).fadeOut("fast", function(){
(jq=jq.slice(1)).length && hidenext(jq);
});
})($('div'))
You don't have to use fadeOut and it doesn't need to be self-executing, but it's neat and tidy way to apply a 'transition' to an unknown number of elements.
Here's a fiddle using fadeOut http://jsfiddle.net/NpBfJ/ ... this is probably more work than you want...:-)
In regards to sliders, this is one of the best free ones out there http://caroufredsel.dev7studios.com/ it has many customizable features.

Related

How can I animate an element programmaticaly using JavaScript?

I am looking at this code http://codepen.io/optyler/pen/FgDyr and if you hover to the triangle element, you will see the animation. However instead of hovering it, I want to do it programmaticaly using JavaScript. This is what I have done so far:
document.querySelector('.triangle').classList.add('animateSpeak');
and added a new css class
.animateSpeak {
animation: vibrate .5s infinite ease-out;
}
The animation is working though as you can see here http://imgur.com/a/V9JyO the left part is only animating. Am I doing something wrong here?
Since you're using a CSS 3 animation, you would probably need some sort of active class.
Just change the :hover selectors (line 54) to, say, .active instead. i.e.:
.triangle.active,
.triangle.active:before,
.triangle.active:after {
animation: vibrate .5s infinite ease-out;
}
You can start the animation programmatically by adding the .active class or stop it be removing the class.
To answer your second question, it looks like the :before and :after elements need the animation too.
In your CSS add
.animateSpeak,
.animateSpeak:before,
.animateSpeak:after {
animation: vibrate .5s infinite ease-out;
}
Just a quick thought, you can avoid the intersection of the three becoming darker than their constituents by changing the color from rgba to rgb or a solid color,
$font_color: rgb(231,236,241);

Parallax scroll with easing

I have an element that move relative to scroll. I use jQuery for this:
$('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');
CSS
#object {
width:200px;
top:100%;
left:50%;
position:absolute;
}
This works well, but moves my element directly without any easing (delay).
By setting a transition using css I get some of the effect that I'm looking for, but doesn't look good if I scroll at the same time:
transition: 400ms ease;
Is it possible to do this smooth, but in a more elegant way?
I figured it out by myself. The problem was the css "ease". Ease means that it will start slow and end slow, which will result in at the time scrolling is active it will always be on the slow start. However if you use css "ease-out" it will always start fast and slow down in the end. So use this:
transition: 400ms ease-out;
Or cubic-bezier if you want to customize the easing-curve yourself:
transition: 400ms cubic-bezier(0.235, 0.615, 0.185, 0.995);
When doing a parallax effect you will set a new translateY() on every scroll event that triggers. The event triggers really often and normally there should be no need for a transition. If you still experience bad rendering it is probably because the browser does not render on every event. You can force the browser to do so by using requestAnimationFrame.
var translate = function() {
$('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');
}
$(window).on('scroll', function() {
window.requestAnimationFrame(translate);
});

hide/unhide HTML portions by hovering?

more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?
It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.
You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});
You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}
Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>

Best approach for "Fade in/fadeout" menu bar on mouse over

First off, my apologies for a lengthy post. I am trying to use CSS, HTML and JavaScript, so please don't recommend using std. libraries.
1)I have found people using different approaches in CSS,HTML and JavaScript to achieve the "fade in/ fade out effect" on navigation bars, some of the approaches using CSS and JavaScript are:
a) Use property "left" to get the submenu outside the screen. Default left :-500px ;onmouseover- left:-10px
b) Use property "visibility". Default visibility: "hidden" and onmouseover-
visibility: visbile
c)use property "display". Default display:none and onmouseover- display:block
My question is which one is the best approach and why?
2)I have used the method a) in this jsfiddle: http://jsfiddle.net/A7TND/.
CSS
.teal-box{
left:-10px;
}
HTML
<div class="level1" onmouseover="showSubs("+")">
Javascript
switch (vwFlg){
case "+" :
elmt.style.left = "-10px";
...
}
In the example, I am not sure whether the function gets called over and over when I am moving between the main item(favorite) and subitems(jsfiddle, google), my questions are:
a) does it get called over and over during the mouse movement between main items(favorites) and sub-items(google and jsfiddle)?
b) how does that(calling javascript function over and over) affect the responsiveness of the page?
3.The approach I did for having multiple images(see the jsfiddle link) separated by , is have multiple divs - where top has different values, is that the best approach? This would mean , I would have to write a div for each image, is there a some spiffy way of using "position" properties absolute and relative to achieve that without creating as many divs as images?
I want to have a table ,how do I get that "button popping out of the page" look ? I tried to debug a commercial web app, it seems they seem to repeat a background image, which I tried, but that did not work.
CSS
.sel-row {
border-style:solid;
border-width:1px;
background-image:url("\lb_sel.gif");
background-repeat:repeat-x-y;
background-color:#CDD2D7 ;
border-color:#8B96A2 ;
height:20px;
}
My approach for something like this, is to have the hidden element be a child of the hover element, then use absolute positioning + display for the hide/show
<li>
Button Copy
<span>HIDE SHOW ME</span>
</li>
li {
position:relative;
}
li:hover span {
display:block;
}
li span {
position:absolute;
top:25px;
left:0;
display:none;
}
Are you animating the opacity as well?
Use javascript to add a class to the element, CSS3 to animate but understand the browsers that don't use CSS3. Also, don't use display anymore.
<li>
Button Copy
<span>HIDE SHOW ME</span>
</li>
li {
position:relative;
}
li.show span {
opacity:0;
}
li span {
position:absolute;
top:25px;
left:0;
opacity:1;
-webkit-transition: all .8s ease-in;
-moz-transition: all .8s ease-in;
-o-transition: all .8s ease-in;
-ms-transition: all .8s ease-in;
transition: all .8s ease-in;
}
With a browser that doesn't support css3, I use Modernizr + jQuery for the fallback. You'd have to turn this into a toggle.
if (!Modernizr.csstransitions) { // if browser doesn't support css3.transitions
$('li span').animate({ "opacity": '1' }, 800);
} else { // if browser does support css3.transitions
$('li').addClass('show');
}

Order CSS Styles with Transitions and JavaScript

if i apply a style to an element and immdiatily afterwards add css transition styles, the transition is applied to the style preceeding. this might not always be the intention.
i found a solution by using settimeout (0), is there any cleaner/more correct approach known ?
http://jsfiddle.net/nicib83/XP9E7/
$("div").css("opacity", 1);
$("div").css("-webkit-transition", "all 0.35s");
/* Works
window.setTimeout(function () {
$("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/
best regards
Edit:
i didn't mean how best to set css styling but how to sequentially set styles when the first style should be applied without the second being active at that time but only afterwards, i wan to add transition afterwards. settimeout fixes it, best solution ?
It's much better to pre-define a class that contains both of the properties you want to apply, and add that class programmatically to the element. Both of the properties will be applied together.
.myClass {
opacity: 1;
-webkit-transition: all 0.35s;
}
$("div").addClass("myClass");
You could take a page from the book of Twitter Bootstrap:
fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition:opacity 0.15s linear;
-o-transition:opacity 0.15s linear;
transition:opacity 0.15s linear;
}
.fade.in{
opacity:1;
}
then programatically add the .in class when you want it to fade in:
$("div").addClass("in");
with your original div looking something like:
<div class="fade">Box</div>
I've been running up against this myself and also found the setTimeout solution. After some research the issue is how the browser handles scheduling. The JavaScript runs in its own thread separate from the threads dealing with the UI and the DOM (which is why issues like UI blocking happen).
In cases like this both JavaScript statements run before the document registers the first change and it ends up applying both classes at the same time. setTimeout(fn,0) effectively makes the function asynchronous and shunts the functions to run at the next available opportunity. This allows the UI thread to catch up before the next class is added.

Categories

Resources