I am trying to create a slider, using javascript and css. I recognize that there are "tons" of them out there, but I am building this to educate myself.
I have attached a video showing the HTML of an example I am trying to recreate. In particular this shows how the MARGIN-LEFT property is being changed, making the images slide to the left. (see the 3rd line from the top)
Does anyone know, or deduce how the MARGIN-LEFT property is being changed in this way?
I have normally just used the CSS transition property to cause the images to slide, but this seems to be doing something else.
Click for my video
Related
everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/
Here's some more details - due to some weird restrictions with the YouTube API, I am forced to push a container off the page to give the impression of hiding the container.
I achieve this by using this class:
.my_hide{
margin-left:-9999px;
position:fixed !important;
}
And by using the JQuery methods $("player-list_container").removeClass("my_hide") and $("player-list_container").addClass("my_hide") to control the toggling.
However, the toggling looks jaunty, and the container jumps up once the class is removed. I want to be able to transition smoothly from one state to the other, and am at a loss for how to do it.
This behaviour can be demonstrated here
Add a video by typing in and searching for anything, and then hit the Play button located below. You should observe the behaviour described.
Iam assuming you 'are not able to'/'not want to' manually hide the container but want to change its position so that it is outside the boundaries of the page and it looks hidden.
In that case changing the position property will definitely give you a jumpy instead of a smooth effect since this affects the whole layout of the page (Read more). What you can instead do is change its position using CSS3 animation's translate property.
Here's a demo I've coded which does exactly what you want.
http://codepen.io/anon/pen/EgcIi
The "Click me" button toggles between taking the container off and on the page and it does it smoothly. You can also adjust the time which it takes to change the position of container. (As of now its 500ms)
I want it to look like the container is fading in in position meaning I would have to get the container to that position before using any type of animation function.
Then, don't throw the element way off the page with CSS. Leave it where it is, and hide it with .hide(). Then fade it in with .fadeIn().
You'll need to manually size the container, as it won't expand to contain a hidden element.
On my screen it just popped up. Im not 100% sure what type of pop in effect you want but that said, check out http://api.jquery.com/animate/
i was going to code up an example but that page has a bunch!
good luck!
PS: scroll down for all the visual animation examples.
Here is some sample code:
$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
//add animation code here;
});
check out a rough fiddle.
edit: heres a rough example: http://jsfiddle.net/somdow/Lef9n/2/
just click the red area to the right of the video
Animate function in jQuery wll help you
Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238
I'm working on a script that fades in and out both an image and a div I have set behind the image when you hover over the image. I'm having two problems:
The fades on the image and div don't seem to move at the same speed even though I have them set to.
I can't figure out how to get the div's to only show for the image you hover over. If I could type ("this" div.info) as an object, it would work fine. Is there a way to do that?
I can't get $(".info",this), $(this).find(".info"), or $(".info", $(this).closest("li")) to work.
Result: I have found the solution. I was able to get it to work by using lthibodeaux's suggestion and using $(".info", $(this).closest("li")) as the object and making all the functions .fadeTo go here for the result:
http://jsfiddle.net/Z5p4K/7/
Edit:
I found out the image and the div animations really were moving at the same speed, just the image only had it's z-index set on hover, so if you took your mouse off the image while the animation was running, it would appear to move at a different speed than the div when really the image was behind the div, it only appeared to be moving at different speeds because when the div became invisible you could see the image behind it but when it became opaque, the image was gone (making you think the image became invisible when really the div was in front of the image). This was easily fixed by moving the the z-index property from ul.columns li:hover img to ul.columns li img.
The div only had a border around it while you hovered over it. This was easily fixed by changing the border properties from ul.columns li:hover .info to ul.columns li .info
Check out the final version here: http://jsfiddle.net/tV9Bw/
This is the final version because I can no longer find any problems with any of the code; everything is optimized, there are no glitches, and it looks great.
Thanks to everyone who answered and to Yi Jiang for editing this post with better formatting. I'm new to this site so I wasn't sure how to properly format my question.
and a Huge thanks to artyom.stv for fixing the last glitch in the script that I didn't know how to fix.
You've got the general idea. One thing you should know about a selector is that you are able to define a second argument as the scope of the selector, i.e.
$("selectorString", scopeObject)
In your case, make the second argument $(this).closest("li"). It will find the list item containing your image and select .info descendants of that container:
$(".info", $(this).closest("li")).fadeIn(1000);
Change $(".info") to $(this).find(".info") and all will be sweet.
Yes you can use something like $(this).find(".info") as mentioned by Bundy
but as The jQuery constructor accepts a 2nd parameter which can be used to override the context of the selection.
You can also do something like this:
$(".info",this)
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.