I have this site I am developing - I made the scroller with the following code:
$(document).ready(function()
{
function scrollIt()
{
$('#featured-brands div#scroll').animate({
marginLeft: "-4550px"}, 85000, "linear").animate({
marginTop: "-223px" }, 200, "linear").animate({
marginLeft: "750px" }, 100, "linear").animate({
marginTop: "57px" }, 1, "linear", scrollIt);
}
scrollIt();
});
When the final image is sliding across, there is a white blank space visible, how would I make the first image appear right after the final image, so there is no white space?
Cheers,
Keith
split it into two. When one goes off the bottom, move it so it's above the other.
Related
There is a video playing in flowplayer and it is downloadable on my website.
I'm using following code to animate text from right: 100% to left 100% using jquery.
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
wmode: 'transparent',
// the content plugin will show the ad
plugins: {
myContent: {
url: 'flowplayer.content-3.2.9.swf',
wmode: 'transparent',
top: 20,
right: '129%',
opacity: 0.8,
width: '295',
borderRadius: 0,
padding: 0,
background: 'transparent',
border: '0px solid transparent',
backgroundGradient: 'none',
style: {
'.title': {
fontSize: 16,
fontFamily: 'verdana,arial,helvetica'
}
},
}
},
clip: {
url: 'stepup.mp4',
// make something happen on the mid of clip
onCuepoint: [[1000 * 60], function(clip, cuepoint) {
var plugin = this.getPlugin("myContent");
plugin.setHtml('<p>This is sample text</p>');
plugin.animate({left: '129%'}, 90000);
}],
}
});
});
I have two question from following code:
1) How would i set the cue point at mid of the video. Currently it is set to 60th second.
2) How to stop text animation on stop and start on resume.
3) How would I maintain the width of screen for animation from left edge of the video to right edge of video.
4) Will the embedded text in video be existing in the downloaded file? If not how would I?
Thanks in advance.
Here is a tutorial on adding Captions in a Flow video.
Sample code below:
<p begin = "00:00:00.01" dur="04.00">
First caption with default style coming from the Content plugin config
</p>
<p begin = "00:00:04.19" dur="04.00" style="1">
2nd caption with timed text styling to make the text white
</p>
<p begin = "8s" dur="04.00" style="2">
3rd caption using a small black font
</p>
</div>
Here is the address to find the tutorial:
http://flash.flowplayer.org/plugins/flash/captions.html
Hope this helps!
How would one make a slide and fade in animation like in seen in the green and pink boxes on sharethis.com? In particular I like the one in the blue box with the arrows. Are there a set of JavaScript codes or CSS effects?
The easiest would probably be to use a library like this:
http://janpaepke.github.io/ScrollMagic/
I see that for the arrows effect the css-height property is animated when you scroll. This is done in javascript. But you can also achieve this effect through CSS3-transitions.
Update: Slide and wipe effects from the demo page:
// ani
var pinani = new TimelineMax()
// wipe
.add(TweenMax.to("#wipe", 1, {
width: "100%"
}))
// slide
.add(TweenMax.to("#slide", 1, {
top: "0%",
ease: Bounce.easeOut,
delay: 0.2
}));
// pin
new ScrollScene({
triggerElement: "section#pin",
duration: 1100
})
.on("progress", function () {
// keep centered even though width changes
$("#wipe h3").width($("#pin>h3").width());
})
.setTween(pinani)
.setPin("section#pin")
.addTo(controller);
I am trying to use Jquery to create a bounce effect, this is what i have so far:
Html:
<div id ="animation">bounce</div>
Jquery:
$("#animation").animate({ marginTop: "80px" }, 1500 )
.animate({ marginBottom: "40px" }, 800 );
Its goes downwards but not upwards, i tried searching the documentation, but it doesn't
working example here: http://jsfiddle.net/zLw8F/
To go upwards again, you'd need to reduce the margin-top instead of animating margin-bottom:
$("#animation").animate({ marginTop: "80px" }, 1500 )
.animate({ marginTop: "40px" }, 800 );
Demo at jsfiddle.net
Yet, to animate the element decoupled from the rest of the page, I recommend relative positioning instead of playing with margins.
Why not just use the jQuery UI effects? Ex:
$("#animation").effect("bounce", { times:3 }, 300);
jsFiddle example
Try that:
$("#animation").animate({ marginTop: "80px" }, 1500, function() {
$(this).animate({ marginTop: "40px" }, 800 );
});
I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});
This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}
Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).
The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)
http://jsfiddle.net/E6cUF/
The idea is that after the page finished loading the grey box slides left from behind the green box, if possible bounce a little.
Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola
http://jsfiddle.net/RBD3K/
However the grey one should be behind the green one and slide from right to left so it appears
To have it bounce you are missing two things i think:
1) you need to load jquery UI.
2) put the bounce effect after the animate effect:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/
Try this . Not sure if this is what you want.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css
http://jsfiddle.net/E6cUF/11/