Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I was wondering if anyone knew how PanelFly (panelfly.com) got the animated tabs. Is it a custom script or is it a plugin?
Thanks in advance,
Marc180
All they look like they are doing is on click they simply use fadeOut(250) and then fadeIn(250) of a div.
There are plugins for this sure, but for the fading it's just fadeIn and fadeOut.
Moving the pointer can be achieved using jQuery animate in which you can animate an item across the screen. Animate is documented here http://api.jquery.com/animate/ In fact, the second demo in the examples section does this exactly.
After that it's just a bunch of pretty pictures and css placement of div's etc.
Their JS is minified and concatenated so this isn't as readable as it could be, but it looks like they wrote a fairly simple jQuery plugin to detect if CSS3 transitions are available and animate the slider and pointer and change tabs. Pretty straightforward stuff:
$(function () {
var n = {};
n.transition = function () {
var k = (document.body || document.documentElement).style;
return k.transition !== void 0 || k.WebkitTransition !== void 0 || k.MozTransition !== void 0 || k.MsTransition !== void 0 || k.OTransition !== void 0
}();
$("section.tabs").each(function () {
var k = $(this),
O = k.find("nav li");
O.click(function (T) {
var u = $(this);
if (!u.hasClass("active")) {
O.removeClass("active");
n.transition ? u.addClass("active") : u.animate({
opacity: 1
}, 300, function () {
u.addClass("active")
});
var A = u.prevAll(),
G = k.find("ul.content li");
G.removeClass("active");
setTimeout(function () {
var k = $(G[A.length]);
n.transition ? k.addClass("active") : k.animate({
opacity: 1
}, 300, function () {
k.addClass("active")
})
}, 100);
var Y = u.position();
$(k.find(".pointer:first")).animate({
left: Y.left
}, 700, function () {})
}
T.preventDefault()
})
})
});
Related
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.
I made a point-and-click-adventure-like website using Snap.SVG. It sort of works! but i'd like to improve it.
www.esad.se
(click on the arrow on the right to go to the next image!)
the biggest problem we encountered (along with the teacher helping me at that time) was to iterate through my collection of SVGs - clicking an SVG causes a new image and a new svg to be loaded into the main page. the solution we used was to point to an array containing the SVG paths and to kill the old SVG by manipulating the DOM with
event.target.parentNode.parentNode.remove()
which we though was probably not the best solution, especially because it doesn't allow for a smooth transition between svgs.
would there be a way of using a loading method to implement smooth transitions between my SVGs (for instance, a cross-fade)?
thanks for your insights.
var s = Snap("#svg");
var first = "A1.JPG"
var data = {
"A1.JPG" : {viens : "A2.JPG", svg : "1.svg"},
"A2.JPG" : {viens : "A3.JPG", svg : "2.svg", scroll : 600}
// [... etc]
}
var currentPath = data[first]
document.images.main.src = first
var mySvg = Snap.load(currentPath.svg, function(loadedFragment){
s.append(loadedFragment)
s.click(getEventElement)
window.scroll(0,0)
});
function getEventElement( event ) {
if( event.target.localName == 'svg' ) { return }
target = event.target.parentNode.id
// if (target == "noclick") {return}
if(currentPath[target] == undefined) {
return
}
document.images.main.src = currentPath[target]
currentPath = data[currentPath[target]]
//this.clear()
event.target.parentNode.parentNode.remove()
if(currentPath.hasOwnProperty("scroll")){
window.scroll(currentPath.scroll,0)
}else{
window.scroll(0,0)
}
mySvg = Snap.load(currentPath.svg, function(loadedFragment){
s.append(loadedFragment)
//s.click(getEventElement)
});
}
I'd just do it with a CSS class. Change the line where you remove the element from the DOM to:
event.target.classList.add('fade-out');
setTimeout (function () {
event.target.parentNode.removeChild(event.target);
}, 2000);
Then in your CSS for the element add:
opacity: 1;
transition: opacity 1.5s;
And add a new style for the fade-out:
.yourSvgClass.fade-out {
opacity: 0;
}
I'm putting together a quick little status board that shows active and upcoming github issues.
I have them all pulled in and formatted as a simple list and found a nice jQuery plugin that cycles through each item as a sort of slideshow. However, it was requested that it show multiple issues at once to fill up the screen more.
So on each slide swap it would display, say 5 LI items at once versus just 1. And then swap to show the next 5 and so on.
HTML
...
<ul id="issue-list">
<li class="issue"></li>
...
<li class="issue"></li>
</ul>
...
<script type="text/javascript">
$(function() {
$('#issue-list').swapmyli({
swapTime: 900, // Speed of effect in animation
transitionTime: 700, // Speed of Transition of ul (height transformation)
time: 4000, // How long each slide will show
timer: 1, // Show (1) /Hide (0) the timer.
css: 0 // Apply plugin css on the list elements.
});
});
</script>
JS
(function(e) {
e.fn.swapmyli = function(t) {
function s() {
var e = i.parent().find(".timer span");
e.animate({
width: "100%"
}, r);
var n = i.find("li:first").outerHeight(true);
i.find("li:first").fadeOut(120);
i.animate({
height: n
}, t.transitionTime);
i.find("li").hide();
e.animate({
width: "0%"
}, 60);
i.find("li:first").remove().appendTo(i).fadeIn(t.swapTime)
}
var n = {
swapTime: 300,
transitionTime: 900,
time: 2e3,
timer: 1,
css: 1
};
var t = e.extend(n, t);
var r = t.time - t.swapTime;
var i = this;
i.wrap('<div class="swapmyli clearfix"></div>');
i.after('<div class="timer"><span></span></div><br class="clear" />');
e(window).load(function() {
var e = i.find("li:first").outerHeight(true);
i.height(e);
i.find("li").hide();
s()
});
if (t.timer == 0) {
i.parent().find(".timer").hide()
}
if (t.css == 0) {
i.parent().addClass("nocss")
}
setInterval(s, t.time)
}
})(jQuery)
I'm not sure if outerHeight() will function correctly with slice, but you may try changing these lines:
var n = i.find("li:first").outerHeight(true);
i.find("li:first").fadeOut(120);
To the following:
var n = i.find("li").slice(0, 4).outerHeight(true);
i.find("li").slice(0, 4).fadeOut(120);
That's sort of a quick answer, but hopefully you're catching my drift. Probably need to play around with it a little bit :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am interested in the way this site has the speakers scrolling at a certain interval.
I am unsure if this is a jQuery plugin but would be keen to know/understand how this functionality is done.
Create a container element that is set to the dimensions you want to display. Then set its overflow property to hidden and give it a child that is much taller. Then use a setInterval to animate the offset from the child to the parent:
HTML --
<div id="container">
<div id="child"></div>
</div>
CSS --
#container {
position : relative;
width : 500px;
height : 300px;
overflow : hidden;
}
#child {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 900px;
}
JS --
$(function () {
var $child = $('#child'),
timer = setInterval(function () {
$child.animate({ top : '-=300' }, 500);
}, 1500);
});
Update
You can then detect if the #child element should be animated back to the beginning once its entire height has been shown:
$(function () {
var $child = $('#child'),
height = $child.height(),
interval = 300,
current = 0,
timer = setInterval(function () {
current++;
if ((current * interval) >= height) {
current = 0;
$child.stop().animate({ top : 0 }, 1000);
} else {
$child.stop().animate({ top : (current * interval * -1) }, 500);
}
}, 1500);
});
Here is a demo: http://jsfiddle.net/BH5gK/2/
Just wondering if anyone has an idea as to how I might re-create a nav bar style that I saw a while ago, I just found the site I saw it on, but am not sure how they might have gotten there. Basically want it to scroll with the page then lock to the top...
http://lesscss.org/
Just do a quick "view source" on http://lesscss.org/ and you'll see this:
window.onscroll = function () {
if (!docked && (menu.offsetTop - scrollTop() < 0)) {
menu.style.top = 0;
menu.style.position = 'fixed';
menu.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
menu.style.position = 'absolute';
menu.style.top = init + 'px';
menu.className = menu.className.replace('docked', '');
docked = false;
}
};
They're binding to the onscroll event for the window, this event is triggered when the window scrolls. The docked flag is set to true when the menu is "locked" to the top of the page, the menu is set to position:fixed at the same time that that flag is set to true. The rest is just some simple "are we about to scroll the menu off the page" and "are we about back where we started" position checking logic.
You have to be careful with onscroll events though, they can fire a lot in rapid succession so your handler needs to be pretty quick and should precompute as much as possible.
In jQuery, it would look pretty much the same:
$(window).scroll(function() {
// Pretty much the same as what's on lesscss.org
});
You see this sort of thing quite often with the "floating almost fixed position vertical toolbar" things such as those on cracked.com.
mu is too short answer is working, I'm just posting this to give you the jquery script!
var docked = false;
var menu = $('#menu');
var init = menu.offset().top;
$(window).scroll(function()
{
if (!docked && (menu.offset().top - $("body").scrollTop() < 0))
{
menu.css({
position : "fixed",
top: 0,
});
docked = true;
}
else if(docked && $("body").scrollTop() <= init)
{
menu.css({
position : "absolute",
top: init + 'px',
});
docked = false;
}
});
Mu's answer got me far. I tried my luck with replicationg lesscss.org's approach but ran into issues on browser resizing and zooming. Took me a while to find out how to react to that properly and how to reset the initial position (init) without jQuery or any other library.
Find a preview on JSFiddle: http://jsfiddle.net/ctietze/zeasg/
So here's the plain JavaScript code in detail, just in case JSFiddle refuses to work.
Reusable scroll-then-snap menu class
Here's a reusable version. I put the scrolling checks into a class because the helper methods involved cluttered my main namespace:
var windowScrollTop = function () {
return window.pageYOffset;
};
var Menu = (function (scrollOffset) {
var Menu = function () {
this.element = document.getElementById('nav');
this.docked = false;
this.initialOffsetTop = 0;
this.resetInitialOffsetTop();
}
Menu.prototype = {
offsetTop: function () {
return this.element.offsetTop;
},
resetInitialOffsetTop: function () {
this.initialOffsetTop = this.offsetTop();
},
dock: function () {
this.element.className = 'docked';
this.docked = true;
},
undock: function () {
this.element.className = this.element.className.replace('docked', '');
this.docked = false;
},
toggleDock: function () {
if (this.docked === false && (this.offsetTop() - scrollOffset() < 0)) {
this.dock();
} else if (this.docked === true && (scrollOffset() <= this.initialOffsetTop)) {
this.undock();
}
}
};
return Menu;
})(windowScrollTop);
var menu = new Menu();
window.onscroll = function () {
menu.toggleDock();
};
Handle zoom/page resize events
var updateMenuTop = function () {
// Shortly dock to reset the initial Y-offset
menu.undock();
menu.resetInitialOffsetTop();
// If appropriate, undock again based on the new value
menu.toggleDock();
};
var zoomListeners = [updateMenuTop];
(function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
var lastWidth = 0;
function pollZoomFireEvent() {
var widthNow = w.innerWidth || e.clientWidth || g.clientWidth;
if (lastWidth == widthNow) {
return;
}
lastWidth = widthNow;
// Length changed, user must have zoomed, invoke listeners.
for (i = zoomListeners.length - 1; i >= 0; --i) {
zoomListeners[i]();
}
}
setInterval(pollZoomFireEvent, 100);
})();
Sounds like an application of Jquery ScrollTop and some manipulation of CSS properties of the navbar element. So for example, under certain scroll conditions the navbar element is changed from absolute positioning with calculated co-ordinates to fixed positioning.
http://api.jquery.com/scrollTop/
The effect you describe would usually start with some type of animation, like in TheDeveloper's answer. Default animations typically slide an element around by changing its position over time or fade an element in/out by changing its opacity, etc.
Getting the "bouce back" or "snap to" effect usually involves easing. All major frameworks have some form of easing available. It's all about personal preference; you can't really go wrong with any of them.
jQuery has easing plugins that you could use with the .animate() function, or you can use jQueryUI.
MooTools has easing built in to the FX class of the core library.
Yahoo's YUI also has easing built in.
If you can remember what site it was, you could always visit it again and take a look at their source to see what framework and effect was used.